Select

Select lets you choose a single value from a list of options.
Full keyboard navigation
Can be controlled and uncontrolled
Automatic integration with FormControl utility
Similar components:
CheckboxSwitchRadio


Usage

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

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 populating the field default value from a data source but you don't need to control it manually afterwards.

In case you need to manually control the state of the field, you can use value property. That will give you full control of the component value and will stop handling the value automatically. You will have to update the state using onChange handler and will be able to add custom logic before that happens.

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 query.

Slots

Select supports a content slot on the left side, which you can use for displaying text or other components.

Icon

For consistent Icon usage in text fields, you can use icon property instead of startSlot and just pass the icon svg component.

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
iconIcon-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
Previous
Next