Form Controls

Checkbox

Three states: unchecked, checked, and indeterminate. Supports label, helperText, error, and five sizes. Indeterminate is set via an imperative ref effect — the checkbox remains a standard HTML input.

Checkbox group with indeterminate

A parent checkbox can reflect partial selection using the indeterminate prop. Drive it from your own state — Checkbox does not manage children.

Radio

Wrap Radio elements inside RadioGroup to share name, controlled value, and size. Orientation can be vertical or horizontal.

Switch

Binary on/off control. Uses role="switch" on the underlying input. Supports controlled and uncontrolled usage. The sliding animation is a CSS transition on the thumb position — no JS animation library needed.

Select

Native <select> with a custom chevron overlay. Uses appearance: none to strip the OS chrome and applies the same size tokens as Input.

Sizes

All four controls share the same three-size scale so they compose naturally in forms.

Implementation

All controls are client components that wrap native HTML inputs. Styling is achieved with CSS peer selectors — the native input is visually hidden via sr-only but remains in the accessibility tree and receives focus normally.

import { Checkbox } from "@/components/ui/Checkbox";
import { Radio, RadioGroup } from "@/components/ui/Radio";
import { Switch } from "@/components/ui/Switch";
import { Select } from "@/components/ui/Select";

// Checkbox
<Checkbox label="Accept terms" />
<Checkbox label="Partial selection" indeterminate />
<Checkbox label="With helper" helperText="We'll never share your data" />
<Checkbox label="With error" error="This field is required" />

// Radio group
<RadioGroup name="plan" value={plan} onChange={setPlan}>
  <Radio value="starter" label="Starter" helperText="Up to 3 projects" />
  <Radio value="pro"     label="Pro"     helperText="Unlimited projects" />
</RadioGroup>

// Switch
<Switch label="Push notifications" checked={on} onChange={() => setOn(!on)} />

// Select
<Select label="Region" placeholder="Choose a region…">
  <option value="us-east">US East</option>
  <option value="eu-west">EU West</option>
</Select>

Checkbox props

RadioGroup props

Radio props

Switch props

Select props

Mobile

Form controls require larger tap targets and clear visual states on touch screens. The Switch pattern in particular benefits from native OS conventions on iOS and Android.