Design Pattern

Select

Select is the basic pattern for picking one option from a predefined set. By using the native select element, you get keyboard support, assistive technology support, and native mobile selection UI for free.

Difficulty: Beginner Category: Forms

When to use / not use

Use it when

  • When the options are fixed and free-form input is not desired
  • When users pick from predefined values such as prefectures, inquiry types, or statuses
  • When you want a stable selection UI that works well on mobile

Don't use it when

  • When there are many options and search is needed → use a combobox
  • When multi-select is the main goal → use a checkbox group
  • When there are only two options → radio buttons or a switch are easier to understand

Anatomy

1 Label
2 The select element itself
3 Initial empty option
4 Help text / error
  1. Label — Clarifies the meaning of the choice. Don't rely on vague placeholder-like text
  2. select — Prefer the native control
  3. Empty option — For required fields, putting a disabled selected option at the top makes the empty state clear
  4. Supplementary text — Use aria-describedby to tie in conditions or error messages

HTML Structure

Key points

  • Use a label to state the purpose clearly
  • For required fields, put a "Please select" option first so the empty state is visible
  • When options fall into categories, use optgroup
  • Before layering custom UI on top, verify that native operability isn't broken

CSS Implementation

Styling for each state

  • Default — A clear border that signals the field accepts input
  • Focus — Show a ring with :focus-visible to indicate keyboard position
  • Error — Combine a red border with a text message
  • Density — Don't cram arrows and padding too tightly; keep tap targets comfortable

Accessibility

WCAG 1.3.1 Info and Relationships

Associate the label, grouping, and supplementary description programmatically.

WCAG 3.3.2 Labels or Instructions

Make it clear in visible text what the control is choosing.

WCAG 3.3.1 Error Identification

When the empty state is an error, specifically describe what needs to be chosen.

Keyboard operation

  • Use Tab to move focus to the select
  • Use ↑ / ↓ to choose an option
  • Some browsers open/close with Enter or Space

Live Demo

Basic select

A minimal setup for picking one option from a fixed list, with label and help text associated.

PreviewFullscreen

Required selection and error display

A pattern that reports a per-field error when the user leaves the field while still unselected.

PreviewFullscreen

Organizing options with optgroup

A pattern that groups options by category to improve scannability.

PreviewFullscreen

Common mistakes

Deploying without a label

The text in the first option alone doesn't convey the meaning. Always include a label.

Having a default value auto-selected

For required fields, if the first option is pre-selected, users easily submit without checking.

Breaking native behavior for visual styling

Replacing native controls purely for looks easily costs you mobile and assistive-technology usability.