Chapter 2 — Components · Section 08

Form Inputs

Minimalist bottom-border style — no background fill, only a border-bottom that transitions from outline-variant/40 at rest to primary on focus. Labels float above on focus or when value is present.

Floating labels are not placeholders. The visible label must always exist as text — never use a placeholder as the only label. Error messages use role="alert" so screen readers announce them on appearance. All inputs must have aria-invalid set when in error state.

Basic Fields

Full name

Email address

Password

Phone

Field States

Email address

Please enter a valid email address

Username

Only letters, numbers, and underscores

Disabled field

Textarea

Course description

State Reference

State	Border-bottom	Label color	Notes
Rest	`outline-variant/40`	`on-surface-variant`	Label at base position
Focus	`primary (2px)`	`primary`	Label floats up, border thickens
Active	`primary (2px)`	`primary`	Same as focus, value entered
Error	`secondary (2px)`	`secondary`	aria-invalid="true", role="alert" on message
Disabled	`outline-variant/20`	`on-surface-variant/40`	opacity-40, cursor-not-allowed