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