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

<label for="select-input-default" class="rvt-label">Select Input <span class="rvt-color-orange-500 rvt-text-bold">*</span></label>
<select id="select-input-default" class="rvt-select" required>
  <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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <path d="M7 11.414 11.914 6.5 10.5 5.086 7 8.586l-1.5-1.5L4.086 8.5 7 11.414Z"/>  <path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0ZM2 8a6 6 0 1 1 12 0A6 6 0 0 1 2 8Z"/></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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <path d="M12 7H4v2h8V7Z"/>  <path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0ZM2 8a6 6 0 1 1 12 0A6 6 0 0 1 2 8Z"/></svg>
  </span>
  <span class="rvt-inline-alert__message" id="weak-password-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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <path d="m8 6.586-2-2L4.586 6l2 2-2 2L6 11.414l2-2 2 2L11.414 10l-2-2 2-2L10 4.586l-2 2Z"/>  <path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0ZM2 8a6 6 0 1 1 12 0A6 6 0 0 1 2 8Z"/></svg>
  </span>
  <span class="rvt-inline-alert__message" id="username-taken-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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <path d="M9 7v5H7V7h2ZM8 4a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z"/>  <path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6a6 6 0 1 0 0 12A6 6 0 0 0 8 2Z"/></svg>
  </span>
  <span class="rvt-inline-alert__message" id="info-message">The Description tells users more about this stuff.</span>
</div>

Elements #

Element	Description	Usage	Required	Multiple
Label	Text that appears next to the select input	Limit to a few words. Write labels using sentence-style capitalization without punctuation.	Label is required	Component may contain only one Label
Dropdown list item	Item that appears within the dropdown	Limit to a few words. Use similar phrasing for each option.	Dropdown list item is required	Component may contain only one Dropdown list item

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

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

Accessibility #

Include a note about required fields. If you use required select inputs in a form, add a note to the start of the form or field set explaining that required fields are marked with an asterisk (*). The create or edit resource page layout includes an example of this note.