Select

Overview

Select is the canonical input for picking exactly one value from a small known list. It pairs with TextField visually — same label-inside-container, same border tokens, same #9EB7FF focus ring — but the suffix is a chevron, and clicking it opens a custom listbox below.

States

Four resting states cover the form. The hover, focus, and open states come for free on the real component — interact with the next section to see them.

Open it

Click the field to open the listbox. Use ↑ and ↓ to navigate options, Enter to confirm, and Esc to dismiss without changing the value.

In forms

Select shares the visual language with TextField — the two stack cleanly in a column or pair across a row without seam.

Anatomy

Five named parts. The trigger mirrors TextField almost exactly; the listbox is the only thing unique to Select.

Behavior

• 01Listbox opens to the current value. When you open a Select with a value already chosen, the active highlight lands on that option — not at the top of the list. Saves you one keystroke on revisit.
• 02Keyboard moves the highlight; click commits. Hovering with the mouse moves the highlight too. Enter or Space on a highlighted option commits the selection and refocuses the trigger.
• 03Escape closes without changing the value. The user's previous choice stays put. Click outside also closes; same outcome.
• 04Form submission is native. Pass a name and the component renders a hidden <input> — the value posts with the form, no extra wiring.
• 05No type-to-search yet. For lists longer than 8–10 items, reach for Combobox — Select is for short, known lists where keyboard browsing is enough.

Accessibility

• Combobox + listbox semantics. The trigger is a role="combobox" with aria-haspopup="listbox" and aria-expanded; the popover is a role="listbox" of role="option" children. Selected state is announced via aria-selected.
• Description and error are linked to the trigger via aria-describedby. Error sets aria-invalid="true".
• Keyboard contract. Trigger: Enter / Space / ↓ opens. Listbox: ↑ / ↓ move, Home / End jump to bounds, Enter commits, Esc closes.
• Focus returns on commit. When the user picks an option (mouse or keyboard), focus moves back to the trigger so keyboard tab order continues correctly.
• Don't hide the label.Same rule as TextField — the always-floating label is the design. Don't set it to sr-only or rely on the placeholder for context.

Code

Import from @flatpay-dk/ui. Children are <SelectOption> elements; pass value as the form value and the children as the visible label.

import { Select, SelectOption } from "@flatpay-dk/ui";

// Default — uncontrolled, with a placeholder
<Select
  label="VAT"
  placeholder="Select…"
  description="Choose the correct VAT rate for this product."
  name="vat_rate"
>
  <SelectOption value="0">0% — exempt</SelectOption>
  <SelectOption value="9">9% — reduced</SelectOption>
  <SelectOption value="21">21% — standard</SelectOption>
</Select>

// Controlled
const [country, setCountry] = useState<string | undefined>("dk");

<Select label="Country" value={country} onValueChange={setCountry}>
  <SelectOption value="dk">Denmark</SelectOption>
  <SelectOption value="se">Sweden</SelectOption>
  <SelectOption value="no">Norway</SelectOption>
</Select>

// Mapped from data
<Select label="Currency" defaultValue="DKK" name="currency">
  {currencies.map((c) => (
    <SelectOption key={c.code} value={c.code}>
      {c.label}
    </SelectOption>
  ))}
</Select>

// Invalid + error message
<Select
  label="VAT"
  placeholder="Select…"
  error="Choose a VAT rate before continuing."
>
  …
</Select>

Best practices

A handful of rules keep Select predictable.

Props

Related