Select

formUSWDS-derived

A styled native select with custom dropdown chevron.

Variants

Default

Choose an option

<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

Disabled select

<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

Select 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

Required fieldPlease select an option.

<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-left

Behavior 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");
  }
}