Forms · astro-ui · Select

Select

Native select with custom chevron, placeholder, and validation state.

Select wraps the native <select> so keyboard support and mobile pickers stay perfect — with token styling, a custom chevron, placeholder support, and options composed through the default slot.

← All components

Features

  • Native <select> — full keyboard + platform pickers
  • Custom chevron (hidden when multiple)
  • placeholder option pattern
  • invalid / disabled / required states
  • 5 sizes, 8 variants
  • Logical-property padding — RTL-ready

Usage

---
import { Select, Label } from "astro-ui";
---

<Label for="fruit" required>Fruit</Label>
<Select id="fruit" placeholder="Choose a fruit" required>
  <option value="apple">Apple</option>
  <option value="pear">Pear</option>
</Select>

Demos

Basic

<Select placeholder="Choose a fruit">
  <option value="apple">Apple</option>
  <option value="pear">Pear</option>
</Select>

States & sizes

<Select invalid><option>…</option></Select>
<Select disabled><option>…</option></Select>
<Select size="lg"><option>…</option></Select>

API

Props

PropTypeDefaultDescription
namestring—Form field name.
placeholderstring—Disabled placeholder option.
required / disabled / invalidbooleanfalseStates.
multiplebooleanfalseMulti-select (native chrome, chevron hidden).
size"xs" | "sm" | "md" | "lg" | "xl""md"Scale.
variant"inherit" | "primary" | … | "info""inherit"Border color.
classstring—Merged via cn(); Tailwind classes welcome.
idstring—Element id.
ariaLabelstring—Accessible name.

Slots

SlotDescription
default<option> / <optgroup> elements.

Accessibility

Implemented accessibility features — semantics, ARIA wiring, and keyboard behavior that ship with the component.

  • Native <select> — popup, arrow keys, and announced options from the platform
  • aria-invalid + aria-describedby for validation

FAQ

Why not a custom listbox?

Native selects keep keyboard nav, screen-reader semantics, and mobile pickers for free — that's the astro-ui philosophy: platform first.

Changelog

Version history mentioning Select.

v0.1.0 — 2026-11-11
added
  • Forms (18): Autocomplete, Combobox, Label, Field, Input, InputGroup, Textarea, Select, Checkbox, Radio, Switch, Toggle, ToggleGroup, RadioGroup, Rating, Slider, DatePicker, TimePicker.
  • Shared --ui-control-* scale (height, inline padding, radius) used by Button, Input, Select, Textarea, and InputGroup so controls align on a row.