Selects

Select components are used for collecting user-provided information from a list of options.

Basic Selects

The helper text is optional, but if used, note the use of aria-describedby on the select which references the id of the helper text element.

<form class="u-grid-container u-grid-justify--center">
  <div class="u-grid-item u-md-8 u-lg-6">
    <div class="u-form-control u-form-control--fullwidth">
      <label class="u-form-label" for="standard-select">Standard Select</label>
      <div class="u-select">
        <select id="standard-select" aria-describedby="standard-select-helper-text">
          <option value="">Opt 1</option>
          <option value="">Opt 2</option>
        </select>
        <span class="u-select__focus"></span>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <path d="M7 10l5 5 5-5z"></path>
        </svg>
      </div>
    </div>
    <p id="standard-select-helper-text" class="u-form-helpertext u-form-helpertext--padded">
      Helping text
    </p>

    <div class="u-form-control u-form-control--fullwidth u-mt-xs-4">
      <span class="u-form-label_notch">
        <label class="u-form-label" for="select-outlined"><span>Select Outlined</span></label>
      </span>
      <div class="u-select u-select--outlined ">
        <select id="select-outlined" aria-describedby="outlined-select-helper-text">
          <option value="">Opt 1</option>
          <option value="">Opt 2</option>
        </select>
        <span class="u-select__focus"></span>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <path d="M7 10l5 5 5-5z"></path>
        </svg>
      </div>
    </div>
    <p id="outlined-select-helper-text" class="u-form-helpertext u-form-helpertext--padded">
      Helping text
    </p>

    <div class="u-form-control u-form-control--fullwidth u-mt-xs-4">
      <label class="u-form-label u-form-label--disabled" for="disabled-select"
        >Disabled Select</label
      >
      <div class="u-select u-select--disabled">
        <select id="disabled-select" disabled>
          <option value="">Opt 1</option>
          <option value="">Opt 2</option>
        </select>
        <span class="u-select__focus"></span>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <path d="M7 10l5 5 5-5z"></path>
        </svg>
      </div>
    </div>
    <div class="u-form-control u-form-control--fullwidth">
      <span class="u-form-label_notch u-form-label_notch--disabled">
        <label class="u-form-label" for="disabled-outlined"><span>Disabled Outlined</span></label>
      </span>
      <div class="u-select u-select--disabled u-select--outlined ">
        <select id="disabled-outlined" disabled>
          <option value="">Opt 1</option>
          <option value="">Opt 2</option>
        </select>
        <span class="u-select__focus"></span>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <path d="M7 10l5 5 5-5z"></path>
        </svg>
      </div>
    </div>
  </div>
</form>

<form class="u-grid-container u-grid-justify--center">
  <div class="u-grid-item u-md-8 u-lg-6">
    <div class="u-form-control u-form-control--fullwidth">
      <label class="u-form-label" for="standard-select">Standard Select</label>
      <div class="u-select">
        <select id="standard-select" aria-describedby="standard-select-helper-text">
          <option value="">Opt 1</option>
          <option value="">Opt 2</option>
        </select>
        <span class="u-select__focus"></span>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <path d="M7 10l5 5 5-5z"></path>
        </svg>
      </div>
    </div>
    <p id="standard-select-helper-text" class="u-form-helpertext u-form-helpertext--padded">
      Helping text
    </p>

    <div class="u-form-control u-form-control--fullwidth u-mt-xs-4">
      <span class="u-form-label_notch">
        <label class="u-form-label" for="select-outlined"><span>Select Outlined</span></label>
      </span>
      <div class="u-select u-select--outlined ">
        <select id="select-outlined" aria-describedby="outlined-select-helper-text">
          <option value="">Opt 1</option>
          <option value="">Opt 2</option>
        </select>
        <span class="u-select__focus"></span>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <path d="M7 10l5 5 5-5z"></path>
        </svg>
      </div>
    </div>
    <p id="outlined-select-helper-text" class="u-form-helpertext u-form-helpertext--padded">
      Helping text
    </p>

    <div class="u-form-control u-form-control--fullwidth u-mt-xs-4">
      <label class="u-form-label u-form-label--disabled" for="disabled-select"
        >Disabled Select</label
      >
      <div class="u-select u-select--disabled">
        <select id="disabled-select" disabled>
          <option value="">Opt 1</option>
          <option value="">Opt 2</option>
        </select>
        <span class="u-select__focus"></span>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <path d="M7 10l5 5 5-5z"></path>
        </svg>
      </div>
    </div>
    <div class="u-form-control u-form-control--fullwidth">
      <span class="u-form-label_notch u-form-label_notch--disabled">
        <label class="u-form-label" for="disabled-outlined"><span>Disabled Outlined</span></label>
      </span>
      <div class="u-select u-select--disabled u-select--outlined ">
        <select id="disabled-outlined" disabled>
          <option value="">Opt 1</option>
          <option value="">Opt 2</option>
        </select>
        <span class="u-select__focus"></span>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <path d="M7 10l5 5 5-5z"></path>
        </svg>
      </div>
    </div>
  </div>
</form>

Multiple Select

<form class="u-grid-container u-grid-justify--center">
  <div class="u-grid-item u-md-8 u-lg-6">
    <div class="u-form-control u-form-control--fullwidth">
      <label class="u-form-label" for="multiple-select">Multiple Select</label>
      <div class="u-select u-select--multiple">
        <select id="multiple-select" multiple>
          <option value="">Opt 1</option>
          <option value="">Opt 2</option>
        </select>
        <span class="u-select__focus"></span>
      </div>
    </div>
    <div class="u-form-control u-form-control--fullwidth">
      <span class="u-form-label_notch">
        <label class="u-form-label" for="multiple-outlined"><span>Multiple Outlined</span></label>
      </span>
      <div class="u-select u-select--multiple u-select--outlined ">
        <select id="multiple-outlined" multiple>
          <option value="">Opt 1</option>
          <option value="">Opt 2</option>
        </select>
        <span class="u-select__focus"></span>
      </div>
    </div>
  </div>
</form>

<form class="u-grid-container u-grid-justify--center">
  <div class="u-grid-item u-md-8 u-lg-6">
    <div class="u-form-control u-form-control--fullwidth">
      <label class="u-form-label" for="multiple-select">Multiple Select</label>
      <div class="u-select u-select--multiple">
        <select id="multiple-select" multiple>
          <option value="">Opt 1</option>
          <option value="">Opt 2</option>
        </select>
        <span class="u-select__focus"></span>
      </div>
    </div>
    <div class="u-form-control u-form-control--fullwidth">
      <span class="u-form-label_notch">
        <label class="u-form-label" for="multiple-outlined"><span>Multiple Outlined</span></label>
      </span>
      <div class="u-select u-select--multiple u-select--outlined ">
        <select id="multiple-outlined" multiple>
          <option value="">Opt 1</option>
          <option value="">Opt 2</option>
        </select>
        <span class="u-select__focus"></span>
      </div>
    </div>
  </div>
</form>

Error State

To display field in an error state, add .u-form-control--invalid to the .u-form-control element, and .u-form-helpertext--invalid to the helper text element (if in use).

Note: Implementation of validation logic is up to the application.

<form class="u-grid-container u-grid-justify--center">
  <div class="u-grid-item u-md-8 u-lg-6">
    <div class="u-form-control u-form-control--fullwidth u-form-control--invalid">
      <label class="u-form-label" for="invalid-select">Invalid Select</label>
      <div class="u-select">
        <select id="invalid-select" aria-describedby="invalid-select-helper-text">
          <option value="">Opt 1</option>
          <option value="">Opt 2</option>
        </select>
        <span class="u-select__focus"></span>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <path d="M7 10l5 5 5-5z"></path>
        </svg>
      </div>
    </div>
    <p
      id="invalid-select-helper-text"
      class="u-form-helpertext u-form-helpertext--padded u-form-helpertext--invalid"
    >
      Helping text
    </p>
    <div class="u-form-control u-form-control--fullwidth u-form-control--invalid u-mt-xs-4">
      <span class="u-form-label_notch">
        <label class="u-form-label" for="invalid-outlined"><span>Select Outlined</span></label>
      </span>
      <div class="u-select u-select--outlined ">
        <select id="invalid-outlined" aria-describedby="invalid-outlined-helper-text">
          <option value="">Opt 1</option>
          <option value="">Opt 2</option>
        </select>
        <span class="u-select__focus"></span>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <path d="M7 10l5 5 5-5z"></path>
        </svg>
      </div>
    </div>
    <p
      id="invalid-outlined-helper-text"
      class="u-form-helpertext u-form-helpertext--padded u-form-helpertext--invalid"
    >
      Helping text
    </p>
  </div>
</form>

<form class="u-grid-container u-grid-justify--center">
  <div class="u-grid-item u-md-8 u-lg-6">
    <div class="u-form-control u-form-control--fullwidth u-form-control--invalid">
      <label class="u-form-label" for="invalid-select">Invalid Select</label>
      <div class="u-select">
        <select id="invalid-select" aria-describedby="invalid-select-helper-text">
          <option value="">Opt 1</option>
          <option value="">Opt 2</option>
        </select>
        <span class="u-select__focus"></span>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <path d="M7 10l5 5 5-5z"></path>
        </svg>
      </div>
    </div>
    <p
      id="invalid-select-helper-text"
      class="u-form-helpertext u-form-helpertext--padded u-form-helpertext--invalid"
    >
      Helping text
    </p>
    <div class="u-form-control u-form-control--fullwidth u-form-control--invalid u-mt-xs-4">
      <span class="u-form-label_notch">
        <label class="u-form-label" for="invalid-outlined"><span>Select Outlined</span></label>
      </span>
      <div class="u-select u-select--outlined ">
        <select id="invalid-outlined" aria-describedby="invalid-outlined-helper-text">
          <option value="">Opt 1</option>
          <option value="">Opt 2</option>
        </select>
        <span class="u-select__focus"></span>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <path d="M7 10l5 5 5-5z"></path>
        </svg>
      </div>
    </div>
    <p
      id="invalid-outlined-helper-text"
      class="u-form-helpertext u-form-helpertext--padded u-form-helpertext--invalid"
    >
      Helping text
    </p>
  </div>
</form>

Selects

Basic Selects

Multiple Select

Error State

Properties

<Select />

<FormControl />

<FormLabel />

<FormHelperText />