Skip to content
All primitives

A primitive is one control you drop into a form or a toolbar — a segmented control, an input with an addon, a tag field.

Form Controls

7 of the 54 primitives in the catalog. Every one is a single file of plain markup and Tailwind classes — paste it and it works.

Open the full page for this primitive

Field

The label, hint, error and aria wiring around one input — including the part that is usually wrong, where the hint has to stay in aria-describedby once an error joins it.

Form Controls129 lines1 dep
Open the full page for this primitive

Input Group

An input with addons, an inline icon or an action button attached, with the padding reserved for the icon and the focus ring on the whole group rather than its middle third.

Form Controls120 linesNo deps
Open the full page for this primitive

Keyboard Key

A shortcut written once as "mod+k" and rendered for the keyboard it will be typed on — ⌘ on Apple, Ctrl elsewhere — with the symbols hidden from screen readers behind a spoken name.

Form Controls149 linesNo deps
Open the full page for this primitive

Switch

An on/off setting that takes effect now, as role="switch" so a screen reader says "on" rather than "checked" — with the label and description in one row, a clickable label, and an off state dark enough to pass 3:1.

Form Controls106 linesNo deps
Open the full page for this primitive

Range Slider

Two thumbs on one track, built from two native range inputs so the keyboard, touch dragging and announced values come free — with the thumbs prevented from crossing and the min thumb still reachable at the far end.

Form Controls129 linesNo deps