Select
The Select
component allows users pick a value from predefined options. Ideally, it should be used when there are more than 5 options, otherwise you might consider using a radio group instead.
Usage
Here's a basic usage of the Select component.
Editable Example
Multiple
Add the multiple
prop to allow multiple item selection.
Editable Example
Disabled options
Add the disabled
prop to the option you want to disable.
Editable Example
Sizes
Use the size
prop to set the size of the select. The default is md
.
Editable Example
Invalid
Editable Example
Disabled
Editable Example
Text
By default the text for the button is 'Select an option'
when no options are selected or 'X selected'
where X is the number of options selected. This can be change via the text
prop.
Editable Example
Option labels
An additional label can be added to an Option
using the label
prop.
Editable Example
Form usage
The name
prop is submitted along with the control's value when the form data is submitted.
Editable Example
Props
The API for the Select
and Option
components are deliberately similar to their native equivalents (<select>
and <option>
).
Select Props
The Select composes the Box
component so you can pass props for Box
. These are props related to the Select component.
Name | Type | Default | Description |
---|---|---|---|
id | string | The ID for associating a label to the input. | |
autofocus | boolean | Whether the select should receive focus when mounted. | |
disabled | boolean | Whether the select should be disabled. | |
invalid | boolean | Whether the select should be marked invalid. | |
label | string | An aria-label, also used for the placeholder if not specified. | |
multiple | boolean | Allow multiple option selection. | |
name | string | The name for the select. | |
text | ReactText | (selected: string[]) => ReactText | The text for the select's button. | |
size | 'sm' | 'md' | 'lg' | 'md' | The text size for the select. |
onChange | (values: string | Array<string>) => void | A callback for when the select value changes. Note: only the value is passed. | |
value | OptionProps['value'] | Array<OptionProps['value']> | The selected value(s). |
Option Props
Name | Type | Default | Description |
---|---|---|---|
children | string | number | The text to display for the option. | |
value | string | number | The value for the option. | |
label | string | number | The additional text to display for the option (useful for counts). | |
disabled | boolean | Whether the option should be disabled. |