Forms

Tokens for inputs, controls, and toggles.

View demo Docs index

Inputs

Text inputs + the base field rhythm.

Preview	Token	Used for	Value
	`--sp-elev-2`	Input background	`—`
	`--sp-border-1`	Input border style	`—`
	`--sp-radius-2`	Input/controls radius	`—`
Spectra	`--sp-fs-3`	Input font-size	`—`
Spectra	`--sp-lh-2`	Input line-height	`—`
Hover/Focus	`--sp-duration-2`	Transitions (inputs)	`—`
Ease	`--sp-ease-standard`	Transitions (inputs)	`—`
Spectra	`--sp-text`	Text color (inputs)
Spectra	`--sp-text-muted`	Muted text (inputs)
Spectra	`--sp-subtle`	Placeholder text

Controls

Textarea + select (from Spectra v0.0.25 helpers).

Preview	Token	Used for	Value
Spectra textarea	`--sp-accent-3`	Focus border + ring (controls)	`—`
Focus ring width	`--sp-border-w-2`	Focus ring width	`—`
Placeholder/arrow	`--sp-subtle`	Placeholder + select arrow	`—`
	`--sp-opacity-60`	Disabled opacity	`—`

Toggles

Switch / checkbox / radio + error state hooks.

Preview	Token	Used for	Value
Error state Radio	`--sp-danger`	Error tint + focus ring	`—`
Switch	`--sp-border-strong`	Control hover border	`—`

Layout helpers

Spacing tokens used by form helper classes.

Preview	Token	Used for	Value
Small gaps	`--sp-2`	Tight vertical rhythm (stacked controls)	`—`
Control gap	`--sp-3`	Inline control spacing	`—`