Forms & Accessibility

Forms & Accessibility

Style form controls and build accessible interfaces.

Styling form controls

Form elements get some reset from Preflight (e.g. button cursor). Add styles with utilities:

<input class="rounded-md border border-gray-300 px-3 py-2 focus:border-sky-500 focus:ring-2 focus:ring-sky-500/50" type="text" />

Accent color

accent-<color> colors native checkboxes/radios:

<input type="checkbox" class="accent-sky-500" />

Caret color

caret-<color> colors the text cursor:

<input class="caret-sky-500" type="text" />

Checked / invalid states

• checked:bg-sky-500, invalid:border-red-500, required:border, disabled:opacity-50, read-only:bg-gray-50.
• placeholder:italic, placeholder:text-gray-400.
• autofill:bg-sky-50.
• file: for file inputs.

<input class="placeholder:italic placeholder:text-gray-400" type="text" placeholder="Email" />

Focus visibility

• focus-visible: applies styles only when the element is focused via keyboard:

<button class="focus-visible:ring-2 focus-visible:ring-sky-500">...</button>

Accessibility helpers

• sr-only - visually hidden but available to screen readers.
• not-sr-only.
• motion-safe: / motion-reduce: - respect prefers-reduced-motion.

<div class="motion-safe:animate-spin">...</div>

TL;DR

• Style inputs with borders, focus rings, and placeholder variants.
• accent- and caret- color native controls.
• focus-visible: is keyboard-only focus styling.
• sr-only, motion-reduce: improve accessibility.