Forms

Forms collect user input with consistent spacing, typography, labels, and validation. Use this page for text fields, selects, and field-level feedback — not for full panel layout (see Feature Panels).

When to use

• Collecting structured input: names, settings, filters, credentials.
• Inline editing in dialogs, panels, or dedicated settings views.
• Grouping related fields with labels, help text, and validation.

When not to use

• Single binary choices — use Checkboxes or toggles.
• Choosing one action from a list — use Dropdowns.
• Primary commit actions — use Button, not a link styled as submit.

Anatomy

Element	Guidance
Field wrapper	Vertical stack; consistent spacing between fields (--space-3 / 6px rhythm)
Label	Sentence case; above the control; associate with for / id
Input / select	28px min-height; border, focus ring, disabled state
Help text	Optional; secondary color; below control
Error message	Specific and actionable; linked via aria-describedby

Example — default fields

Validation example

Accessibility

• Every input has a visible label or accessible name.
• Errors are announced via text and aria-invalid / aria-describedby.
• Tab order follows visual order; focus ring remains visible on all fields.
• Do not rely on placeholder text alone — it is not a substitute for labels.

Related components

• Alignment — label and control placement
• Error Handling — validation patterns and messaging
• Feature Panels — panel layout and button placement
• Disabled Controls — disabled field behavior