Select

Status: Experimental

Select styles the native <select> element without replacing its keyboard behavior, form participation, or platform option menu.

The closed control uses Frasto tokens across its full interactive area. The opened option menu remains native: its width, row hit area, spacing, and some colors are controlled by the operating system and browser. A custom listbox Select is planned as a separate post-alpha accessibility milestone.

Preview

Usage

---
import { Select } from '@freight-px/frasto';
---

<label for="status">Status</label>
<Select id="status" name="status" required>
  <option value="">Choose status</option>
  <option value="active">Active</option>
  <option value="invited">Invited</option>
</Select>

Sizes and states

size supports sm, md, and lg, matching Input heights of 32px, 36px, and 40px. Use invalid with associated error text, and use native disabled, required, multiple, and form attributes normally.

<Select size="sm">...</Select>
<Select invalid aria-describedby="status-error">...</Select>
<Select disabled>...</Select>

API

Prop	Type	Default	Purpose
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	control height and spacing
`invalid`	`boolean`	`false`	applies invalid styling and semantics
`fullWidth`	`boolean`	`true`	fills available inline space
`class`	`string`	—	styles the outer control
`selectClass`	`string`	—	styles the native select

Native select attributes are forwarded, and the default slot accepts native option and optgroup elements.

Accessibility and responsive behavior

Always provide a visible label or accessible name.
Placeholder-like options must remain real options; do not rely on an empty visual placeholder.
Associate invalid text through aria-describedby.
Native option menus adapt to keyboard, touch, zoom, and operating-system conventions.
The control fills its container by default; constrain the surrounding field when a shorter width is appropriate.

Use a future combobox component when filtering, remote search, or custom option content is genuinely required.