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 |