Form Controls
Semantic classes for native form elements. Apply .input, .select, .textarea, .checkbox, or .radio to their respective HTML elements. Size them with data-size and mark errors with aria-invalid.
Text Input
Use .input on any text-like input element. Includes built-in focus ring and placeholder styling.
Textarea
Use .textarea on a native textarea element.
Select
Use .select on a native select element. A custom chevron is provided via background-image.
Checkbox & Radio
Use .checkbox and .radio on native input elements. They replace the default appearance with a styled version that includes check and dot marks.
.checkbox.radioSizing
All controls support data-size="small" and data-size="large". Medium is the default.
Error State
Set aria-invalid="true" on the control to trigger the error style. Don't add custom error classes or inline colors — the styling is handled automatically.
– You may only enter numbers
Example Form
A realistic form combining labels, layout, validation, and multiple control types.
Example Form
A realistic form combining labels, layout, validation, and multiple control types.