Form controls

Native HTML elements styled with CSS state variants. No JavaScript toggling classes.

Text input

Textarea

Bio

Select

Native <select> with a custom chevron. Two sizes, support for leading icons, error and disabled states. Wrapper gets the focus ring so it reads as one surface.

Favorite fruit · default

Small

With leading icon

Error

Please choose a fruit before continuing.

Disabled

Checkbox

Default

Checked

Indeterminate

Disabled

The indeterminate state is a DOM property, not an HTML attribute — set input.indeterminate = true in JavaScript. Styling is pure CSS via the :indeterminate pseudo-class and group-not-has-indeterminate.

Radio

Left

Original

Right

Toggle

Enable fruit mode

Rules

Every control has a name and either a <label> or aria-label.
Controls use inset-ring not solid borders; focus rings use -outline-offset-1 so they don't spill outside the field.
Checkboxes, radios, toggles are bigger on mobile (size-5 sm:size-4) for touch targets.
Never use the conjoined input+button pattern — leave a gap or nest the button visually.