A digital services project by FlexionSearch
navigationUSWDS-derived
A search form with input field and submit button for finding content.
Reference: USWDS documentation ↗
Variants
Big
<form class="flex-search" role="search" data-size="big" method="get">
<label class="flex-search__label" for="search-big">Search</label>
<input class="flex-search__input" id="search-big" type="search" name="search"/>
<button class="flex-search__submit" type="submit"><span class="flex-search__submit-text">Search</span></button>
</form>Default
<form class="flex-search" role="search" method="get">
<label class="flex-search__label" for="search">Search</label>
<input class="flex-search__input" id="search" type="search" name="search"/>
<button class="flex-search__submit" type="submit"><span class="flex-search__submit-text">Search</span></button>
</form>Small
<form class="flex-search" role="search" data-size="small" method="get">
<label class="flex-search__label" for="search-small">Search</label>
<input class="flex-search__input" id="search-small" type="search" name="search"/>
<button class="flex-search__submit" type="submit"><span class="flex-search__submit-text">Search</span></button>
</form>With Action
<form class="flex-search" role="search" action="/search" method="get">
<label class="flex-search__label" for="search-form">Search</label>
<input class="flex-search__input" id="search-form" type="search" name="search" placeholder="Search our site..."/>
<button class="flex-search__submit" type="submit"><span class="flex-search__submit-text">Search</span></button>
</form>Contract
Class mapping
| USWDS | Flex | Notes |
|---|---|---|
usa-search | .flex-search | Search form wrapper |
usa-search [type=search] | .flex-search__input | Search input field |
usa-search [type=submit] | .flex-search__submit | Search submit button |
usa-search--big | data-size="big" | Big search variant |
usa-search--small | data-size="small" | Small search variant |
Verified properties
font-familyfont-sizeline-heightdisplayheightBehavior promises
- ○ Form submits on button click or enter key
- ○ Magnifier icon visible in submit button via CSS mask-image
- ○ Big size has larger input and button
- ○ Small size has compact input and icon-only button
Source CSS
/* flex-search — USWDS Search conformance
Sizes: default, big, small */
.flex-search {
font-size: 1.06rem;
line-height: 1.5;
position: relative;
display: flex;
inline-size: 100%;
&::after {
clear: both;
content: "";
display: block;
}
&[data-size="big"] {
& .flex-search__input {
font-size: 1.06rem;
block-size: 3rem;
}
& .flex-search__submit {
padding-inline: 2rem;
font-size: 1.46rem;
block-size: 3rem;
}
}
&[data-size="small"] {
& .flex-search__input {
font-size: 0.93rem;
block-size: 2rem;
padding: 0.25rem 0.5rem;
}
& .flex-search__submit {
block-size: 2rem;
padding-inline: 0.5rem;
font-size: 0.93rem;
}
& .flex-search__submit-text {
position: absolute;
inset-inline-start: -999em;
}
& .flex-search__submit::before {
inline-size: 1.25rem;
block-size: 1.25rem;
mask-size: 1.25rem 1.25rem;
}
}
}
/* --- Label --- */
.flex-search__label {
font-weight: normal;
font-size: 1.06rem;
display: block;
position: absolute;
inset-inline-start: -999em;
}
/* --- Input --- */
.flex-search__input {
font-size: 1rem;
line-height: 1.3;
color: var(--flex-color-text);
padding-block: 0;
padding-inline: 0.5rem;
block-size: 2.5rem;
border-width: 1px;
border-style: solid;
border-color: var(--flex-color-text-muted); /* @uswds base-dark (#565c65) */
border-inline-end: none;
border-radius: 0;
box-sizing: border-box;
appearance: none;
outline-offset: -2px;
flex: 1;
margin: 0;
&:focus {
outline: 0.25rem solid var(--flex-color-focus);
}
}
/* --- Submit button --- */
.flex-search__submit {
font-weight: 700;
font-size: var(--flex-text-uswds);
line-height: 0.9;
color: var(--flex-color-on-accent);
background-color: var(--flex-color-accent);
border: 0;
border-radius: 0;
cursor: pointer;
margin: 0;
padding-inline: 1rem;
block-size: 2.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.25rem;
&:hover {
background-color: color-mix(in srgb, var(--flex-color-accent) 85%, black);
}
&:active {
background-color: color-mix(in srgb, var(--flex-color-accent) 70%, black);
}
&:focus {
outline: 0.25rem solid var(--flex-color-focus);
outline-offset: 0;
}
/* Search icon via CSS mask-image on ::before pseudo-element */
&::before {
content: "";
display: inline-block;
inline-size: 1.5rem;
block-size: 1.5rem;
vertical-align: middle;
background-color: currentColor;
mask-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E"),
linear-gradient(transparent, transparent);
mask-position: center center;
mask-repeat: no-repeat;
mask-size: 1.5rem 1.5rem;
}
}
.flex-search__submit-text {
display: inline;
}