Select
formUSWDS-derived
A styled native select with custom dropdown chevron.
Reference: USWDS documentation ↗
Variants
Default
<div>
<label class="flex-label" for="sel-default">Choose an option</label>
<select class="flex-select" id="sel-default" name="choice">
<option value="">- Select -</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>Disabled
<div>
<label class="flex-label" for="sel-disabled">Disabled select</label>
<select class="flex-select" id="sel-disabled" name="disabled" disabled="">
<option value="">- Select -</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>Multiple
<div>
<label class="flex-label" for="sel-multi">Select multiple</label>
<select class="flex-select" id="sel-multi" name="multi" multiple="">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>With Error
<div>
<label class="flex-label" for="sel-error">Required field</label>
<select class="flex-select" id="sel-error" name="error" data-state="error">
<option value="">- Select -</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<span class="flex-error-message" id="sel-error-msg" role="alert"><span class="u-visually-hidden">Error: </span>Please select an option.</span>
</div>Contract
Class mapping
| USWDS | Flex | Notes |
|---|---|---|
usa-select | .flex-select | Base select class |
usa-select (multiple) | .flex-select[multiple] | Multiple select variant without chevron |
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
- ○ Custom chevron visible in default mode
- ○ No chevron in multiple mode
- ○ Disabled state prevents interaction
Source CSS
Base styles: Form Control Base
/* flex-select -- USWDS Select conformance
Extends: Form Control Base (base-classes.css#form-control)
Variants: default, multiple
States: disabled, error */
/* Custom chevron icon */
.flex-select {
block-size: var(--flex-control-height);
padding-inline-end: 2rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23565c65' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.5rem center;
background-size: 10px 6px;
/* Multiple select — no chevron, auto height */
&[multiple] {
block-size: auto;
background-image: none;
padding-inline-end: 0;
}
/* Error state */
&[data-state="error"] {
border-width: 4px;
border-color: var(--flex-color-error);
padding-block: 4px;
}
option {
overflow: hidden;
text-overflow: ellipsis;
}
}
:root[data-theme="dark"] .flex-select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23a9aeb1' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
:root[data-theme="auto"] .flex-select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23a9aeb1' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
}
}
A digital services project by Flexion