Skip to main content

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 #


<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>
<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>
<!-- 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 fill="currentColor" width="16" height="16" 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><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"></path></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 fill="currentColor" width="16" height="16" viewBox="0 0 16 16"><path d="M12 7H4v2h8V7Z"></path><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"></path></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 fill="currentColor" width="16" height="16" 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><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"></path></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 fill="currentColor" width="16" height="16" viewBox="0 0 16 16"><path d="M9 7v5H7V7h2ZM8 4a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z"></path><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"></path></svg>
</span>
<span class="rvt-inline-alert__message" id="info-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.

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.