select

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 type custom values alongside suggestions
• combo-box for a fully custom filterable dropdown

Examples

Basic select, optgroup categorization, multiple selection, and disabled states.

Basic Select

With Option Groups

Organize options into categories using optgroup.

Multiple Selection

Allow selecting multiple options with the multiple attribute. Use size to control how many options are visible.

Disabled States

Disable the entire select or individual options within it.

Attributes

With form-field

Wrap a select in the form-field custom element for enhanced validation, required indicators, and helper text.

Accessibility

• Always use a label: Every select needs an associated label, either wrapping or via for/id
• Use autocomplete: Add appropriate autocomplete values for autofill (e.g., country)
• Keyboard navigation: Arrow keys navigate options; typing jumps to matching text
• Option groups: Help screen readers understand option categories
• Avoid onChange submission: Do not submit forms automatically on select change without warning
• Multiple select guidance: Provide visible instructions for Ctrl/Cmd-click

CSS Reference

VB sets appearance: none to remove the native dropdown arrow and replaces it with a custom SVG chevron positioned via background-image. The select inherits shared input styles (border, radius, focus ring) from the form layer.

Customizable Select

Chrome 135+ ships appearance: base-select, which unlocks full CSS control over the dropdown picker, options, checkmark icon, and open/close animations — while retaining native semantics, keyboard navigation, form participation, and accessibility.

VB wraps all customizable-select styles in @supports (appearance: base-select), making this a zero-risk progressive enhancement. Non-supporting browsers keep the existing appearance: none + SVG chevron.

What Changes Automatically

• Dropdown picker gets surface background, border, radius, shadow, and max-height scroll
• Options gain hover highlight, checked color, and rounded corners
• Checkmark icon uses --color-interactive
• Chevron rotates 180° on open
• Picker animates in with opacity + translateY (respects prefers-reduced-motion)
• <optgroup> headers render as uppercase muted section labels with dividers

No markup changes are required — every existing <select> upgrades automatically.

Rich Content

For selects with images, icons, or descriptions inside options, add a <button> trigger with <selectedcontent> to mirror the selected option in the closed state.

• <button> becomes the trigger — VB styles it as a flex container
• <selectedcontent> automatically clones the selected option's content
• Elements with class="detail" are hidden in the closed trigger to keep it compact
• Images inside options are sized to 1.5em with border-radius and object-fit: cover

Styling Reference

The base-select value exposes these pseudo-elements and states:

Select vs Combo Box

Use this table to decide between the native customizable select and VB's combo-box web component.

Browser Support

appearance: base-select ships in Chrome 135 (April 2025). Other browsers are implementing it — check caniuse for current status.

VB's implementation is fully gated behind @supports:

Detect in JavaScript:

Related

• option - Individual options within a select
• optgroup - Group related options with a label
• selectedcontent - Clone selected option content in the trigger button
• datalist - Autocomplete with custom values
• combo-box - Fully custom filterable dropdown
• form-field - Enhanced select with validation
• label - Required for accessibility