Form
formUSWDS-derived
Form container that provides proper spacing between form groups.
Reference: USWDS documentation ↗
Variants
Default
Form content goes here.
<div class="flex-form">
<p>Form content goes here.</p>
</div>Large
Large size form.
<div class="flex-form" data-size="large">
<p>Large size form.</p>
</div>With Action
<form class="flex-form" action="/submit" method="post">
<p>Form with action and method.</p>
</form>Contract
Class mapping
| USWDS | Flex | Notes |
|---|---|---|
usa-form | .flex-form | Base form class with max-width 32em |
usa-form--large | data-size="large" | Wider form variant (46rem) |
Verified properties
max-widthfont-familyfont-sizeline-heightSource CSS
/* flex-form — USWDS Form conformance
Base: max-width 32em (matches usa-form), proper child spacing
Large variant: data-size="large" — max-width 46rem (matches usa-form--large) */
.flex-form {
font-size: var(--flex-text-uswds);
line-height: 1.3;
/* stylelint-disable-next-line declaration-property-value-allowed-list -- USWDS usa-form intrinsic width. */
max-inline-size: 32em;
&[data-size="large"] {
/* stylelint-disable-next-line declaration-property-value-allowed-list -- USWDS usa-form--large intrinsic width. */
max-inline-size: 46rem;
}
/* Inputs within the form take full width */
:where(.flex-input, .flex-textarea, .flex-select) {
max-inline-size: none;
}
/* Button spacing within forms */
.flex-button {
margin-block-start: 1.5rem;
}
/* Abbreviation styling for required markers */
abbr[title="required"] {
text-decoration: none;
}
/* Form group spacing */
.flex-form-group {
margin-block-start: 1rem;
.flex-label:first-child {
margin-block-start: 0;
}
/* Form group error state */
&[data-state="error"] {
border-inline-start: 0.25rem solid var(--flex-color-error);
padding-inline-start: 1rem;
position: relative;
margin-inline-start: -1.25rem;
}
}
/* Zero out label margin-top within form — stack gap handles between-field spacing */
.flex-label {
margin-block-start: 0;
}
/* Fieldset reset within forms */
fieldset {
border: 0;
margin: 0;
padding: 0;
}
/* Fieldset separation — generous spacing between sections */
fieldset + fieldset {
margin-block-start: var(--flex-space-xl);
}
legend {
font-size: 1.34rem;
font-weight: 700;
padding: 0;
margin-block-end: 0.5rem;
}
}
A digital services project by Flexion