Content
Zero-class styling for every native form control: fieldset/legend layout, text inputs, textarea, a custom-drawn select, checkbox/radio, an ARIA switch variant, and a range slider — plus the adjacency rules that space form parts apart from each other and from whatever follows them.
| Name | Description |
|---|---|
fieldset |
Container grouping form controls with hairline border, radius, and subtle surface background tint. |
legend |
Bold legend label nested within fieldset. |
input, |
textarea Zero-class text controls with interface typography, raised shadow, and accent focus rings. |
select |
Custom styled dropdown with double-chevron indicator and rhythm-aligned padding. |
input[role=switch] |
Accessible toggle switch with animated sliding thumb. |
--switch-height |
Primary height sizing knob for toggle switch controls. |
--switch-width |
Width sizing token for toggle switches (calc(var(--switch-height) * 2)). |
--switch-padding |
Inset padding controlling the toggle switch thumb gap (2px). |
--slider-value |
Percentage value driving custom filled range slider tracks. |
A switch (role=switch on a checkbox)
<input type="checkbox" role="switch">
Live
Fieldset with adjacent button spacing
<fieldset>
<legend>Notifications</legend>
<label><input type="checkbox"> Email me</label>
</fieldset>
<button>Save</button>
Live