Mushilu-San UI Select
A native dropdown for choosing one value from a fixed list.
Selector: select[muiSelect]
import { Select } from '@mushilu-san/ui/forms';Loading example…
Overview
<select>, so the browser handles keyboard and mobile pickers. It keeps the native role and all option behaviour.
invalid also sets aria-invalid="true", so the failed choice is announced.
When to use
Choosing one value from a list of about 5 to 20 items. Choosing a country, a category or a unit.
When not to use
Choosing one of two to four options that should all be visible. Use radio buttons. Use Radio instead.Choosing from a long, searchable list. Use a combobox.
Examples
Sizes and variants
Loading example…
Guidelines
Do
Put a placeholder option first, such as "Choose a country", and make it disabled.
Don't
Do not use a select for a list of two items. Use radio buttons.
Accessibility
Roles and attributes
| Element | Role | Notes |
|---|---|---|
select[muiSelect] | combobox (native) | invalid sets data-invalid and aria-invalid="true". |
Keyboard
| Keys | Action |
|---|---|
| TabShiftTab | |
| Arrow keysSpaceEnter |
Name the select with a <label>oraria-label.
API
Select
| Name | Type | Default | Description |
|---|---|---|---|
size | 'sm' | 'md' | 'lg' | 'md' | Select height and text size: `sm`, `md` or `lg`. Default `md`. |
variant | 'ghost' | 'outline' | 'filled' | 'outline' | Visual style: `outline`, `filled` or `ghost`. Default `outline`. |
invalid | boolean | false | Shows the failed-validation style and sets `data-invalid`. Also sets `aria-invalid`. Accepts attribute presence, e.g. <… invalid>. |
CSS parts
::part(select)
Tokens
--mui-color-surface--mui-color-border--mui-color-text--mui-color-focus-ring--mui-touch-target