Form controls

The form primitives. Field owns the label/hint/error and wires accessibility onto its single child control; the controls themselves stay native where possible (real keyboard + AT behavior).

Live

Branch

HQWest DC

Where the order routes

Notes

Notes are required

Mark as test order

Tier 1Tier 2Tier 3

Email notifications

Field

Wraps one control and wires id ↔ label, aria-describedby (hint + error), and aria-invalid.

import { Field, Input, Select } from '@repo/ui/form';

<Field label="Branch" hint="Where the order routes" error={errors.branch}>
  <Select value={branch} onChange={e => setBranch(e.target.value)}>
    <option value="hq">HQ</option>
  </Select>
</Field>

Prop	Type	Notes
label	string	Rendered as the eyebrow-style <label htmlFor>
hint	string	Helper text; hidden when error is set
error	string	Sets aria-invalid + error styling on the child
required	boolean	Adds the * marker
id	string	Optional; auto-generated via useId otherwise

Controls

• Input — styled native <input> (import { Input } from '@repo/ui/form' for React; @repo/ui/Input exports the Astro component).
• Select — styled native <select> with the brand chevron. All <select> props.
• Textarea — styled native <textarea>. All <textarea> props.
• Checkbox / Radio — native inputs tinted via accent-color; optional inline label. Wrap radios in RadioGroup (role=radiogroup, orientation).
• Switch — role=switch toggle. Controlled: checked + onCheckedChange. Keyboard via the underlying button (space/enter).

import { Input, Checkbox, RadioGroup, Radio, Switch } from '@repo/ui/form';

<Input placeholder="PO-10492" value={poNumber} onChange={e => setPoNumber(e.target.value)} />
<Checkbox label="Mark as test order" checked={isTest} onChange={…} />
<RadioGroup label="Tier" orientation="horizontal">
  <Radio name="tier" value="1" label="Tier 1" />
</RadioGroup>
<Switch checked={on} onCheckedChange={setOn} label="Email notifications" />

Do / don’t

• Do wrap every control in Field so the label and error are wired for screen readers.
• Do pass an accessible name to Switch (label) — it has no text of its own.
• Don’t use a Switch for choosing between options — that’s RadioGroup. A switch is an immediate on/off.
• Don’t hand-style raw <input>s; reuse these so focus rings and error states stay consistent.

Accessibility

• Native controls keep native keyboard + AT semantics; Switch uses a real button with role=switch + aria-checked. Focus-visible ring uses --om-orange-press (≥3:1 on light).
• Verified with jest-axe (zero violations).