Select input

Allow users to choose one option from a dropdown list

Overview #

Use the select input component to allow users to choose one option from a dropdown list.

Examples #

Choose an example

<label for="select-input-default" class="rvt-label">Select Input:</label>
<select id="select-input-default" class="rvt-select">
  <option value="option one">Option One</option>
  <option value="option two">Option Two</option>
  <option value="option three">Option Three</option>
</select>

Open in new window Copy link to example

<!-- Success -->
<label for="select-input-success" class="rvt-label">Select Input:</label>
<select id="select-input-success" class="rvt-select rvt-validation-success">
  <option value="option one">Option One</option>
  <option value="option two">Option Two</option>
  <option value="option three">Option Three</option>
</select>
<div class="rvt-inline-alert rvt-inline-alert--success">
  <span class="rvt-inline-alert__icon">
    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
      <g fill="currentColor">
        <path d="M10.2,5.4,7.1,9.53,5.67,8.25a1,1,0,1,0-1.34,1.5l2.05,1.82a1.29,1.29,0,0,0,.83.32h.12a1.23,1.23,0,0,0,.88-.49L11.8,6.6a1,1,0,1,0-1.6-1.2Z" />
        <path d="M8,0a8,8,0,1,0,8,8A8,8,0,0,0,8,0ZM8,14a6,6,0,1,1,6-6A6,6,0,0,1,8,14Z" />
      </g>
    </svg>
  </span>
  <span class="rvt-inline-alert__message" id="first-name-message">First name is valid!</span>
</div>

<!-- Warning -->
<label for="select-input-warning" class="rvt-label [ rvt-m-top-md ]">Select Input:</label>
<select id="select-input-warning" class="rvt-select rvt-validation-warning">
  <option value="option one">Option One</option>
  <option value="option two">Option Two</option>
  <option value="option three">Option Three</option>
</select>
<div class="rvt-inline-alert rvt-inline-alert--warning">
  <span class="rvt-inline-alert__icon">
    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
      <g fill="currentColor">
        <path d="M11,9H5A1,1,0,0,1,5,7h6a1,1,0,0,1,0,2Z" />
        <path d="M8,16a8,8,0,1,1,8-8A8,8,0,0,1,8,16ZM8,2a6,6,0,1,0,6,6A6,6,0,0,0,8,2Z" />
      </g>
    </svg>
  </span>
  <span class="rvt-inline-alert__message" id="first-name-message">Your Password is weak.</span>
</div>

<!-- Danger -->
<label for="select-input-danger" class="rvt-label [ rvt-m-top-md ]">Select Input:</label>
<select id="select-input-danger" class="rvt-select rvt-validation-danger">
  <option value="option one">Option One</option>
  <option value="option two">Option Two</option>
  <option value="option three">Option Three</option>
</select>
<div class="rvt-inline-alert rvt-inline-alert--danger">
  <span class="rvt-inline-alert__icon">
    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
      <g fill="currentColor">
        <path d="M8,0a8,8,0,1,0,8,8A8,8,0,0,0,8,0ZM8,14a6,6,0,1,1,6-6A6,6,0,0,1,8,14Z" />
        <path d="M10.83,5.17a1,1,0,0,0-1.41,0L8,6.59,6.59,5.17A1,1,0,0,0,5.17,6.59L6.59,8,5.17,9.41a1,1,0,1,0,1.41,1.41L8,9.41l1.41,1.41a1,1,0,0,0,1.41-1.41L9.41,8l1.41-1.41A1,1,0,0,0,10.83,5.17Z" />
      </g>
    </svg>
  </span>
  <span class="rvt-inline-alert__message" id="first-name-message">The Username you entered is taken.</span>
</div>

<!-- Info -->
<label for="select-input-info" class="rvt-label [ rvt-m-top-md ]">Select Input:</label>
<select id="select-input-info" class="rvt-select rvt-validation-info">
  <option value="option one">Option One</option>
  <option value="option two">Option Two</option>
  <option value="option three">Option Three</option>
</select>
<div class="rvt-inline-alert rvt-inline-alert--info">
  <span class="rvt-inline-alert__icon">
    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
      <g fill="currentColor">
        <path d="M8,16a8,8,0,1,1,8-8A8,8,0,0,1,8,16ZM8,2a6,6,0,1,0,6,6A6,6,0,0,0,8,2Z" />
        <path d="M8,12a1,1,0,0,1-1-1V8A1,1,0,0,1,9,8v3A1,1,0,0,1,8,12Z" />
        <circle cx="8" cy="5" r="1" />
      </g>
    </svg>
  </span>
  <span class="rvt-inline-alert__message" id="first-name-message">The Description tells users more about this stuff.</span>
</div>

Usage #

Do

Use to present a choice between many mutually exclusive options
Sort options in an order that makes sense for the data, such as alphabetical or chronological
Write each option as a word or very short phrase without punctuation
Write options using positive phrasing that describes what the user is opting into by selecting that option
Use parallel phrasing for each option

Don't

Use to present a list of options that can be toggled on or off—use a list of checkboxes instead
Use to present a very short list of options—use a radio input instead
Phrase an option so that selecting it means not to choose that option
Bury common options in large dropdowns—place them at the top. When placing items out of order, always place a non-selectable separator (---) between the unsorted and sorted items.