A digital services project by FlexionLabel
formUSWDS-derived
A label for form controls.
Reference: USWDS documentation ↗
Variants
Default
<label class="flex-label" for="input-1">First name</label>Optional
<label class="flex-label" for="input-2">Phone number<span class="flex-label__optional"> (optional)</span></label>Contract
Class mapping
| USWDS | Flex | Notes |
|---|---|---|
usa-label | .flex-label | Form label |
Verified properties
font-familyfont-sizefont-weightline-heightcolorBehavior promises
- ✓ Label associates with input via for/id
Source CSS
Base styles: Typography Base
/* flex-label — USWDS Label conformance
Extends: Typography Base (base-classes.css#typography) */
.flex-label {
font-weight: normal;
display: block;
margin-block-start: 1.5rem;
max-inline-size: var(--flex-control-max-width);
}
.flex-label__optional {
color: var(--flex-color-text-muted);
font-weight: normal;
font-style: normal;
}