Select
The simplest way to pick an option from the list
Quick nav
Features
- Keyboard accessible
- Customizable icon
- Multiple styles and sizes
- Themes ready
Anatomy
import { Select } from "@wonderflow/react-components";
export default () => {
return (
<Select defaultValue="placeholder">
<option value="placeholder" hidden disabled>
Pick an option
</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<optgroup label="Option Group Two">
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</optgroup>
</Select>
);
};API Reference
Property
Type
Default
iconenumsort-altlabelReactNodekindenumsingledimensionenumregulardisabledbooleanonChangefunctionAccessibility
Adheres to the select role requirements.
Keyboard interactions
tab
Move focus on the element or outside
space
Open the listbox