Dropdown menu for choosing from a list of predefined options. Use when the user must select from a fixed set of choices.
When to Use
- Choosing from a predefined list (countries, categories, sizes)
- When the list has more than 5 options (otherwise consider radio buttons)
- When screen space is limited
- When the user cannot enter custom values
Consider alternatives:
- Radio buttons for 2-5 options when space allows
- datalist when users can enter custom values
Basic Usage
A single-selection dropdown with a placeholder option.
Code
<label for="country">Country</label>
<select id="country" name="country">
<option value="">Select a country...</option>
<option value="us">United States</option>
<option value="ca">Canada</option>
<option value="uk">United Kingdom</option>
</select>
Attributes
| Attribute |
Purpose |
Example |
name |
Form field name for submission |
name="country" |
required |
Field must have a non-empty value |
required |
disabled |
Prevents selection |
disabled |
multiple |
Allow selecting multiple options |
multiple |
size |
Number of visible options |
size="5" |
autocomplete |
Autofill hint |
autocomplete="country" |
Required Select
Use a disabled placeholder option to require selection.
Code
<select required>
<option value="" disabled selected>Choose a category...</option>
<option value="tech">Technology</option>
<option value="design">Design</option>
</select>
With Option Groups
Organize options into categories using optgroup.
Code
<select>
<optgroup label="Electronics">
<option value="laptop">Laptop</option>
<option value="phone">Smartphone</option>
</optgroup>
<optgroup label="Accessories">
<option value="case">Phone Case</option>
<option value="charger">Charger</option>
</optgroup>
</select>
Multiple Selection
Allow selecting multiple options with the multiple attribute. Use size to show more options.
Hold Ctrl/Cmd to select multiple
Code
<select multiple size="5">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
<!-- more options -->
</select>
Disabled States
Disabled Select
Disabled Options
Code
<!-- Disabled select -->
<select disabled>
<option>Cannot change</option>
</select>
<!-- Disabled option -->
<select>
<option value="available">Available</option>
<option value="unavailable" disabled>Unavailable</option>
</select>
With form-field
Use the form-field custom element for enhanced validation.
Code
<form-field>
<label for="department">Department</label>
<select id="department" name="department" required>
<option value="" disabled selected>Select department...</option>
<option value="sales">Sales</option>
<option value="engineering">Engineering</option>
</select>
</form-field>
Common Use Cases
Country Selector
Date Selectors
Sorting Options
Accessibility Notes
- Always use a label: Every select needs an associated label
- Use autocomplete: Add appropriate
autocomplete values for autofill
- Keyboard navigation: Arrow keys navigate options, typing jumps to matching text
- Option groups: Help screen readers understand option categories
- Avoid onChange submission: Don't submit forms on select change without warning
- Multiple select guidance: Provide instructions for Ctrl/Cmd-click
CSS Reference
select {
display: block;
inline-size: 100%;
padding-block: var(--size-s);
padding-inline: var(--size-s);
min-block-size: var(--size-touch-min);
border: var(--border-width-thin) solid var(--color-border);
border-radius: var(--radius-m);
background: var(--color-surface);
font: inherit;
cursor: pointer;
transition: border-color var(--duration-fast);
}
select:focus {
outline: none;
border-color: var(--color-interactive);
box-shadow: 0 0 0 3px oklch(from var(--color-interactive) l c h / 0.15);
}
select:disabled {
background: var(--color-surface-raised);
cursor: not-allowed;
}
select[multiple] {
padding: var(--size-xs);
}
optgroup {
font-weight: 600;
}
Related Elements
- option - Individual options within a select
- optgroup - Group related options
- datalist - For autocomplete with custom values
- label - Required for accessibility
- form-field - Enhanced select with validation