Select
Select lets you choose a single value from a list of options.

Other available selection types:

Usage

All form fields have a required name property, so that's the only property you have to pass to Select to start using it. If you need to handle its change events - add an onChange property to it.

Controlled/uncontrolled value

Like when using native inputs in React, Select can be used as controlled or uncontrolled component. By default, Select is uncontrolled and lets you define its default value using defaultValue property. In this case all change events will be handled automatically. This approach is helpful when you're pre-filling a form from a data source but you don't need to control the further behavior of the input.

However, it's not possible to control the input value with your product code when using an uncontrolled component. To solve this, React provides a way to define component as controlled and use value property instead. That will give you full control of the component value and will stop handling the value automatically. Therefore, you will have to update it manually using onChange handler.

States

When a field status has to be highlighted, hasError property can be used to guide the user.

Select can be disabled with disabled flag. Keep in mind, that disabling the field will remove it from the form submit url by default.

Slots

Select has slots on the left side, which you can use for displaying text or icons.

Using as a form control

To let user know what data you expect them to type in, add labels or status messages to your fields with the help of FormControl utility. Adding a placeholder should help even further by defining the format of data used in the field.

Note: Don't use placeholders as labels for the fields as users won't see the placeholder when input contains a value.

Accessibility

When using Select - make sure to provide a text description for it. You can either provide the label by using FormControl utility or by passing inputAttributes={{ 'aria-label': 'Your label' }} to the component if you don't want to display it visually.

Properties

NameTypeDefaultRequiredComment
namestring-true
idstring-falseCustom id override
disabledboolean-false
hasErrorboolean-false
placeholderstring-false
startSlotReactNode-false
valueboolean-falseControlled value
defaultValueboolean-falseUncontrolled value
onChange({ name, value, event }) => {}-false
classNamestring-falseclassName for the root element
attributesobject-falseAttributes for the root element
inputAttributesobject-falseAttributes for the input element