Form Select

The FormSelect component is a reusable and customizable select element. This atomic hv-ui component is used in the select-input component defined in the hv-common package.

Examples

Default Form Select

Preview

Please select an optionOption 1Option 2Option 3Option 4

Code

import { FormSelect } from '@hv/ui/form-select';

<FormSelect>
    <option value=''>Please select an option</option>
    <option value='1'>Option 1</option>
    <option value='2'>Option 2</option>
    <option value='3'>Option 3</option>
    <option value='4'>Option 4</option>
</FormSelect>

Form Select in Error State

Preview

Please select an optionOption 1Option 2Option 3Option 4

Code

import { FormSelect } from '@hv/ui/form-select';

<FormSelect state="error">
    <option value=''>Please select an option</option>
    <option value='1'>Option 1</option>
    <option value='2'>Option 2</option>
    <option value='3'>Option 3</option>
    <option value='4'>Option 4</option>
</FormSelect>

Props

Name	Description	Type
className	Additional classes for styling the checkbox.	String
state	Defines the input state: default or error	String
ref	Forwarded reference to the input element.	React.Ref<HTMLSelectElement>
props	Additional select properties from HTML attributes.	HTMLSelectElement

Customization

Customizations to this component can be made directly to the source file in the UI library package or one-off styles can be passed in as className overrides.