Prepared Docs

Overview

Label identifies controls and groups of controls, carrying typography and color variants that reinforce validation state. Clear labels reduce input errors in high-stress dispatch forms (incident metadata, supervisor configuration) and are required for accessibility association with fields.

When to use

Every Input, Select, TextArea, and custom control exposing a single value.
Compact horizontal clusters where inline labels save vertical space—only when the relationship remains obvious.

When not to use

Page-level headings—use CoreText heading types.
Static read-only rows—use Data list.

Variants

Color: Base default; Success, Warning, Error align to field validation—use sparingly and consistently with helper text.

Layout: Block (default) vs inline for dense toolbars or filter rows.

Action: Optional link Button at the trailing edge of block labels for secondary affordances (for example, "Forgot password?"). Not available with inline layout.

Anatomy

Text node wired to control via htmlFor + id; may wrap inline controls in horizontal layouts. Block labels may include a trailing action button and optional required asterisk.

Content guidelines

Sentence case; short and specific; include units in the label when it prevents format errors (“Age (years)”); formatMessage.
Required fields follow product indicator patterns (asterisk with legend or explicit “Required” copy).

Behavior and states

Disable labels when controls are disabled; mirror state for screen readers.
Error color must pair with textual errorMessage below the field—not color alone.

Best practices

Do keep label placement consistent within a form (above field vs inline).
Do explain why fields are disabled via helper text when operators expect editability.
Don’t rely on placeholder text instead of labels—placeholders disappear while typing.
Don’t use warning color decoratively—reserve for real validation categories.

Accessibility

Clicking label focuses control; aria-required and aria-invalid coordinated on the input as implemented.
Inline layouts must not collapse reading order illogically for screen readers.

Input and Textarea for field patterns.
Checkbox for selection labels.
Callout for form-level error summaries.

Accessibility / Disabled State Communication

Label / API and Development

Overview

When to use

Every Input, Select, TextArea, and custom control exposing a single value.
Compact horizontal clusters where inline labels save vertical space—only when the relationship remains obvious.

When not to use

Page-level headings—use CoreText heading types.
Static read-only rows—use Data list.

Variants

Color: Base default; Success, Warning, Error align to field validation—use sparingly and consistently with helper text.

Layout: Block (default) vs inline for dense toolbars or filter rows.

Action: Optional link Button at the trailing edge of block labels for secondary affordances (for example, "Forgot password?"). Not available with inline layout.

Anatomy

Text node wired to control via htmlFor + id; may wrap inline controls in horizontal layouts. Block labels may include a trailing action button and optional required asterisk.

Content guidelines

Sentence case; short and specific; include units in the label when it prevents format errors (“Age (years)”); formatMessage.
Required fields follow product indicator patterns (asterisk with legend or explicit “Required” copy).

Behavior and states

Disable labels when controls are disabled; mirror state for screen readers.
Error color must pair with textual errorMessage below the field—not color alone.

Best practices

Do keep label placement consistent within a form (above field vs inline).
Do explain why fields are disabled via helper text when operators expect editability.
Don’t rely on placeholder text instead of labels—placeholders disappear while typing.
Don’t use warning color decoratively—reserve for real validation categories.

Accessibility

Clicking label focuses control; aria-required and aria-invalid coordinated on the input as implemented.
Inline layouts must not collapse reading order illogically for screen readers.

Input and Textarea for field patterns.
Checkbox for selection labels.
Callout for form-level error summaries.

Accessibility / Disabled State Communication

Label / API and Development