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
icon
enum
sort-alt
label
ReactNode
message
string
kind
enum
single
dimension
enum
regular
disabled
boolean
invalid
boolean
onChange
function
Accessibility
Adheres to the select
role requirements.
Keyboard interactions
Name | Description |
---|---|
tab | Move focus on the element or outside |
space | Open the listbox |