Labels beside inputs
- Forbidden
- Labels to the left of their fields, left- or right-aligned
- Instead
- Stack the label directly above its input,
--spacing-label(4px) away.
What this rule looks like
Why this rule
Left-placed labels make the eye zig-zag between column and field. Right-aligning them to shorten that distance creates a jagged left edge that is harder to scan. Long labels wrap awkwardly in the narrow column. Stacked above and close, label and input are read in one focus.
- Kind
- Rule
- Section
- Things to avoid
- Group
- Forms
- Bucket
- judgment
- Severity
- note
- Since
- v0.1.0