A digital services project by FlexionInput Prefix/Suffix
formUSWDS-derived
Add-ons that attach to the start or end of a text input to provide visual context.
Reference: USWDS documentation ↗
Variants
Default
<div class="flex-input-group">
<input class="flex-input" type="text"/>
</div>Error State
<div class="flex-input-group" data-state="error">
<div class="flex-input-group__prefix" aria-hidden="true">$</div>
<input class="flex-input" type="text" placeholder="Invalid amount"/>
</div>With Prefix
<div class="flex-input-group">
<div class="flex-input-group__prefix" aria-hidden="true">$</div>
<input class="flex-input" type="text" placeholder="0.00"/>
</div>With Prefix And Suffix
<div class="flex-input-group">
<div class="flex-input-group__prefix" aria-hidden="true">$</div>
<input class="flex-input" type="text" placeholder="Amount"/>
<div class="flex-input-group__suffix" aria-hidden="true">.00</div>
</div>With Suffix
<div class="flex-input-group">
<input class="flex-input" type="text" placeholder="Weight"/>
<div class="flex-input-group__suffix" aria-hidden="true">lbs</div>
</div>Contract
Class mapping
| USWDS | Flex | Notes |
|---|---|---|
usa-input-group | .flex-input-group | Input group wrapper |
usa-input-prefix | .flex-input-group__prefix | Prefix add-on |
usa-input-suffix | .flex-input-group__suffix | Suffix add-on |
Verified properties
displayalign-itemsborder-styleborder-widthborder-colorheightmax-widthfont-familyfont-sizeSource CSS
/* flex-input-prefix-suffix — USWDS Input Prefix/Suffix conformance
Input group wraps input + prefix/suffix into a single visual unit
States: error, success (from parent group) */
.flex-input-group {
font-size: var(--flex-text-uswds);
line-height: 1.3;
appearance: none;
border: 1px solid var(--flex-gray-cool-60);
border-radius: 0;
color: var(--flex-color-text);
display: flex;
align-items: center;
inline-size: 100%;
max-inline-size: var(--flex-control-max-width);
block-size: var(--flex-control-height);
margin-block-start: var(--flex-control-margin-top);
padding: 0;
position: relative;
.flex-input {
border: 0;
block-size: 100%;
margin-block-start: 0;
min-inline-size: 0;
inline-size: 100%;
max-inline-size: none;
&:focus-visible {
outline: none;
}
}
&:focus-within {
outline: var(--flex-focus-ring);
outline-offset: var(--flex-focus-offset-inset);
}
/* --- State: error --- */
&[data-state="error"] {
border-width: 4px;
border-color: var(--flex-color-error);
}
/* --- State: success --- */
&[data-state="success"] {
border-width: 4px;
border-color: var(--flex-color-success);
}
/* --- Disabled --- */
&:has(.flex-input:disabled) .flex-input-group__prefix,
&:has(.flex-input:disabled) .flex-input-group__suffix {
color: var(--flex-color-disabled-dark);
background-color: var(--flex-color-disabled-lighter);
cursor: not-allowed;
}
}
/* --- Prefix and Suffix shared styles --- */
.flex-input-group__prefix,
.flex-input-group__suffix {
color: var(--flex-color-ink);
line-height: 0;
padding: 0 0.5rem;
user-select: none;
white-space: nowrap;
display: flex;
align-items: center;
}
/* --- Suffix positioning --- */
.flex-input-group__suffix {
position: absolute;
inset-inline-end: 0;
}
/* Input padding to avoid overlap with suffix */
.flex-input-group:has(.flex-input-group__suffix) .flex-input {
padding-inline-end: 2.5rem;
}
/* Input padding to avoid overlap with prefix */
.flex-input-group:has(.flex-input-group__prefix) .flex-input {
padding-inline-start: 2.5rem;
padding-inline-end: 0.5rem;
}
/* --- Prefix positioning --- */
.flex-input-group__prefix {
position: absolute;
inset-inline-start: 0;
}