Forms are notoriously difficult to get right. Our accessible primitives handle IDs, labels, keyboard navigation, and error messaging automatically.

Regulatory Context

Info and Relationships (WCAG 1.3.1) and Labels or Instructions (3.3.2) are top failure points. If an error message is visible but not programmatically linked (via aria-describedby) to the input, screen reader users will not know why the form failed. This component automates that linkage.

Text Fields

Accessible input fields with integrated labels, helper text, and error messaging.

Email Address

We'll never share your email.

Password

Password must be at least 8 characters

Checkbox

A control that allows the user to toggle between checked and not checked.

Enable email notifications

Subscribe to newsletter (Disabled)

Switch / Toggle

A control that allows the user to toggle between checked and not checked.

Airplane Mode

Bluetooth (Disabled)

Radio Group

A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.

Select Theme

System Default

Light Mode

Dark Mode

High Contrast

Selected value: system

Select / Dropdown

A custom accessible select component with full keyboard support (Arrows, Enter, Esc).

User Role

Current Role: viewer

FormField Props

Props Reference

Prop	Type	Default	Description
label *	string	-	Visible text label. Cannot be hidden (use ScreenReaderOnly if absolutely necessary, but discouraged).
error	string	-	Error message. Automatically sets aria-invalid="true" and links via aria-describedby.
helpText	string	-	Instructions shown below input. Automatically linked via aria-describedby.
required	boolean	-	Adds visual indicator (*) and sets aria-required.