UCLA Design System

Select Menu

Select is a type of input that is used in forms, where a user is submitting data and chooses one option from a list.

When to use

Use the select component inside a form where users are making a single selection from a list of options and submitting data.

Use the dropdown component to filter or sort content on a page.

For when to use a select menu rather than a radio button, see the following article for considerations: 7 Rules of Using Radio Buttons vs Drop-Down Menus

Anatomy

Select Menu Anatomy

1. Label

2. Container (required)

3. Placeholder (required)

4. Down arrow (required)

5. Up arrow (required)

Examples

<h2 class="headline-text__md mb-3">Default</h2>
<!-- Select Menu Only -->
<div class="ucla-field">
  <label class="ucla-field__label" for="exampleSelection">Label</label>
  <div class="ucla-field__control">
    <select
      class="ucla-field__select"
      id="exampleSelection"
      aria-describedby="uclaAssistSelect"
    >
      <option disabled selected>Make a selection</option>
      <option value="Epsum">Epsum factorial non deposit quid</option>
      <option value="Pro">Pro quo hic escorol olypian</option>
      <option value="Et">Et gorilla congolium sic</option>
      <option value="Ad">Ad nauseum souvlaki ignitus carborundum</option>
    </select>
  </div>
  <p class="ucla-field__help" id="uclaAssistSelect">This is a help text.</p>
</div>
<h2 class="headline-text__md mb-3">Warning</h2>
<div class="ucla-field ucla-is-warning">
  <label class="ucla-field__label" for="exampleSelectionWarning">Label</label>
  <div class="ucla-field__control">
    <select
      class="ucla-field__select"
      id="exampleSelectionWarning"
      aria-describedby="uclaWarningSelect"
    >
      <option disabled selected>Make a selection</option>
      <option value="Epsum">Epsum factorial non deposit quid</option>
      <option value="Pro">Pro quo hic escorol olypian</option>
      <option value="Et">Et gorilla congolium sic</option>
      <option value="Ad">Ad nauseum souvlaki ignitus carborundum</option>
    </select>
  </div>
  <p class="ucla-field__help" id="uclaWarningSelect">This is a help text.</p>
</div>
<h2 class="headline-text__md mb-3">Error</h2>
<div class="ucla-field ucla-is-error">
  <label class="ucla-field__label" for="exampleSelectionError">Label</label>
  <div class="ucla-field__control">
    <select
      class="ucla-field__select"
      id="exampleSelectionError"
      aria-describedby="uclaErrorSelect"
    >
      <option disabled selected>Make a selection</option>
      <option value="Epsum">Epsum factorial non deposit quid</option>
      <option value="Pro">Pro quo hic escorol olypian</option>
      <option value="Et">Et gorilla congolium sic</option>
      <option value="Ad">Ad nauseum souvlaki ignitus carborundum</option>
    </select>
  </div>
  <p class="ucla-field__help" id="uclaErrorSelect">This is a help text.</p>
</div>

<h2 class="headline-text__md mb-3">Disabled</h2>
<div class="ucla-field">
  <label class="ucla-field__label" for="exampleSelectionDisabled">Label</label>
  <div class="ucla-field__control">
    <select class="ucla-field__select" name="exampleSelectionDisabled" disabled>
      <option disabled selected>Make a selection</option>
      <option value="Epsum">Epsum factorial non deposit quid</option>
      <option value="Pro">Pro quo hic escorol olypian</option>
      <option value="Et">Et gorilla congolium sic</option>
      <option value="Ad">Ad nauseum souvlaki ignitus carborundum</option>
    </select>
  </div>
</div>

Best Practices

Labels. Labels are essential to the usability of forms. Do not place a label inside a select element. Use sentence case and no more than three words.

Order. The order of the select list should be based on the frequency of use. If applicable, the list should be in increasing order relative to the content. In cases of forms, alternative orders such as alphabetical may be more fitting. A horizontal rule can be used to group similar items together.

Default Selection. You can set a default choice if one is recommended or you don’t expect users to change it. If you don’t want to influence their selection you can start it with the phrase “Make a selection” or similar that is not selectable once they change it.