Select
A select picks one value from a short list. It is a styled native select, so the platform menu, keyboard and screen reader support come free.
Sizes and quiet
Medium is 36px and fills its row. Small is 32px for toolbars. Quiet drops the plate until hover, so a select can sit in a header like a label.
Show code
<KbSelect aria-label="Priority" defaultValue="high">…</KbSelect>
<KbSelect size="sm" auto aria-label="Priority">…</KbSelect>
<KbSelect quiet auto aria-label="Sort">…</KbSelect>When to use
- Use a select for a single choice from about three to fifteen options.
- Name it: use a visible label through a field, or an aria-label when the row already says what it is.
- For two or three options that people compare, use chips or a segmented control so all options are visible.
- For a status that people change in place, use the status select, which looks like the lozenge.
Import
import { KbSelect } from "@/components/ui/KbSelect";
<KbSelect aria-label="Priority" defaultValue="high">
<option value="low">Low priority</option>
<option value="high">High priority</option>
</KbSelect>Props
| Prop | Type | Default | What it does |
|---|---|---|---|
size | "sm" | "md" | "md" | 32 or 36px tall. |
auto | boolean | false | Shrinks to its content instead of filling the row. |
quiet | boolean | false | No border or plate until hover. |
title | string | None | Tooltip. Defaults to the selected option's label, so a clipped value is still readable. |
aria-label | string | None | Required when there is no visible label. |
Keyboard and screen readers
- A native select: arrow keys, type-ahead and the platform menu work without extra code.
- Inside a field, the help and error text are linked with aria-describedby and aria-invalid is set for you.
- The tooltip repeats the selected label for values that do not fit.