Select
Pick one value from a list that opens on press.
SessionYou can change it until the session starts.
Usage
import { Select } from '@smartui/react';
import '@smartui/react/styles.css';When to use
- More than five options.
When not to use
- Two to five options. Use Radio or Segmented.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | { key, label, isDisabled? }[] | required | |
label | string | - | Always visible above the control. |
helperText | string | - | Help text below the control. |
errorMessage | string | - | Shown when isInvalid; replaces the helper text. |
variant | 'raised' | 'flat' | 'raised' | Raised on the canvas, flat inside a white card. |
size | 'sm' | 'md' | 'lg' | 'md' | md on desktop, lg on touch. |
isInvalid, isDisabled, isRequired | boolean | false | |
placeholder | string | 'Select' | |
selectedKey, onSelectionChange | Key, (key) => void | - |
Accessibility
- Arrow keys move, Enter selects, Escape closes.
- The selected option has a check mark, not only a color.