Select
Choose an option from a predefined list, displayed in a dropdown
Source ↗️ Report Issue ↗️The Select
component is an extended List
component. Any prop that the List
component can accept, can also be used by the Select
component. To better understand how this component works, we recommend reading through the documentation of the List
component first.
itemGroups
prop used in the above example in this section. To handle select events, listen to the selectOnChange
event in Astro, or use the onChange
prop for Svelte and React components. The event
object returns the following properties:
States
The select event is only triggered for active Select
components. To disable a Select
component, set the disabled
prop to true
:
If you’d like to use the Select
component as a command list or as a combobox, you can disable automatic value update to keep its placeholder/value intact using the updateValue
prop:
Labels
The Select
component can be labelled in three different ways using the following props:
label
: Sets a label above the input field.placeholder
: Sets a label inside the input field.subText
: Sets a label below the input field.
Positioning
By default, options are displayed under the Select
component. These options can be repositioned using the position
prop. Please see the API documentation below for all possible position
values. The following three Select
components demonstrate the left
, right
, and modal
positions.
API
Prop | Purpose |
---|---|
name | Sets a unique name for the select that. |
value | Sets a default value for the select. |
placeholder | Sets a placeholder for the select. |
label | Sets a label for the select that appears above the input. |
label | Sets a label for the select that appears below the input. |
disabled | Disables the select. |
updateValue | Sets whether the value of the select should be updated on interaction. Defaults to true . |
position | Sets the position of the options, relative to the select. Defaults to bottom . |
Svelte & React Prop | Purpose |
---|---|
onChange | Attach an on-change event listener that is triggered when an option is selected. |
Request improvement for this page