inputs
Select
The simplest way to pick an option from the list
Features
- Keyboard accessible
- Customizable icon
- Multiple styles and sizes
- Themes ready
Anatomy
import { Select } from "@wonderflow/react-components";
export default () => {
return (
<Select
defaultValue="placeholder"
label="Label"
message="Sample hint message">
<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-altlabelReactNodemessagestringkindenumsingledimensionenumregulardisabledbooleaninvalidbooleanonChangefunctionAccessibility
Adheres to the select role requirements.
Keyboard interactions
| Name | Description |
|---|---|
| tab | Move focus on the element or outside |
| space | Open the listbox |