Text Input
formUSWDS-derived
A single-line text input for form data.
Reference: USWDS documentation ↗
Variants
Default
<div>
<label class="flex-label" for="input-default">Name</label>
<input class="flex-input" id="input-default" name="name" type="text"/>
</div>Disabled
<div>
<label class="flex-label" for="input-disabled">Disabled field</label>
<input class="flex-input" id="input-disabled" type="text" disabled="" value="Cannot edit"/>
</div>Width Variants
<div>
<label class="flex-label" for="input-2xs">2xs (5ex)</label>
<input class="flex-input" id="input-2xs" type="text" data-width="2xs"/>
<label class="flex-label" for="input-xs">xs (9ex)</label>
<input class="flex-input" id="input-xs" type="text" data-width="xs"/>
<label class="flex-label" for="input-sm">sm (13ex)</label>
<input class="flex-input" id="input-sm" type="text" data-width="sm"/>
<label class="flex-label" for="input-md">md (20ex)</label>
<input class="flex-input" id="input-md" type="text" data-width="md"/>
<label class="flex-label" for="input-lg">lg (30ex)</label>
<input class="flex-input" id="input-lg" type="text" data-width="lg"/>
<label class="flex-label" for="input-xl">xl (40ex)</label>
<input class="flex-input" id="input-xl" type="text" data-width="xl"/>
<label class="flex-label" for="input-2xl">2xl (50ex)</label>
<input class="flex-input" id="input-2xl" type="text" data-width="2xl"/>
</div>With Error
<div>
<label class="flex-label" for="input-error">Email</label>
<input class="flex-input" id="input-error" name="email" type="email" data-state="error" aria-describedby="error-msg"/>
<span class="flex-error-message" id="error-msg" role="alert"><span class="u-visually-hidden">Error: </span>Please enter a valid email address.</span>
</div>Contract
Class mapping
| USWDS | Flex | Notes |
|---|---|---|
usa-input | .flex-input | Base text input class |
usa-input--error | data-state="error" | Error state with thicker red border |
usa-input--success | data-state="success" | Success state with thicker green border |
Verified properties
font-familyfont-sizeline-heightcolorbackground-colorborder-radiusborder-top-widthborder-right-widthborder-bottom-widthborder-left-widthborder-top-styleborder-right-styleborder-bottom-styleborder-left-stylepadding-toppadding-rightpadding-bottompadding-leftBehavior promises
- ○ Focus ring visible on keyboard focus
- ○ Disabled state grays out input
Source CSS
Base styles: Form Control Base
/* flex-text-input — USWDS Text Input conformance
Extends: Form Control Base (base-classes.css#form-control)
Width variants: 2xs, xs, sm, md, lg, xl, 2xl
States: error, success
States: disabled, readonly */
.flex-input {
block-size: var(--flex-control-height);
&[readonly] {
background-color: var(--flex-color-bg);
}
/* --- State: error --- */
&[data-state="error"] {
padding-block: 4px;
}
/* --- State: success --- */
&[data-state="success"] {
padding-block: 4px;
}
/* --- Width variants --- */
&[data-width="2xs"] {
max-inline-size: 5ex;
}
&[data-width="xs"] {
max-inline-size: 9ex;
}
&[data-width="sm"] {
max-inline-size: 13ex;
}
&[data-width="md"] {
max-inline-size: 20ex;
}
&[data-width="lg"] {
max-inline-size: 30ex;
}
&[data-width="xl"] {
max-inline-size: 40ex;
}
&[data-width="2xl"] {
max-inline-size: 50ex;
}
}
A digital services project by Flexion