Skip to content

Selects

Custom select boxes and multi-selects.

3 component(s)

Multi-Select Dropdown with Checkboxes – Bootstrap 5 selects preview

Multi-Select Dropdown with Checkboxes

Bootstrap 5 multi-select dropdown with checkboxes, live search, select all and clear, a selected count badge and removable chips.

Bootstrap 5 Selects
Styled Native Select – Pure CSS selects preview

Styled Native Select

Pure CSS restyle of the native select element with a custom arrow, focus ring, error, success and disabled states, and three sizes.

Pure CSS Selects
Searchable Select – Tailwind CSS selects preview

Searchable Select

Accessible Tailwind CSS combobox that filters options as you type, highlights matches and supports full keyboard navigation.

Tailwind CSS Selects

What is a select component?

A select lets users choose one or more options from a list. The native <select> element is reliable and accessible, while custom select boxes add search, icons, grouped options, tags for multiple values and richer styling. This category covers styled native selects, searchable selects, multi-selects with chips and grouped option lists.

When to use a select

  • When there are more than about five options and space is limited.
  • For known lists such as countries, categories or sort orders.
  • Use radio buttons instead when there are only a few options and comparing them matters.
  • Use a searchable or multi-select pattern when lists are long or users need several values.

Best practices

  • Start with the native <select> whenever it does the job; it works with keyboards, screen readers and mobile pickers out of the box.
  • Style native selects with appearance: none and a custom arrow, keeping a clear focus style.
  • Always pair the select with a visible <label>.
  • Group long lists with <optgroup> and order options logically, alphabetically or by frequency.
  • Custom selects must follow the combobox or listbox pattern: correct roles, aria-expanded, aria-activedescendant or roving focus, arrow key navigation, Enter to select and Escape to close.
  • For multi-selects, show selected values as removable chips with buttons labelled "Remove ...".
  • Make sure the dropdown panel is not cut off by containers with overflow: hidden, and that it fits on small screens.

Framework versions

The custom select examples here include styled native selects, searchable dropdowns and multi-select boxes. Bootstrap 6 versions use theme-* colour roles and ship any script as an ES module. Bootstrap 5 versions start from .form-select and add small vanilla JavaScript where needed, Tailwind CSS versions use utility styling around native or custom elements, and pure CSS versions show how to restyle a native select without JavaScript. Preview each one, open the code tabs, and copy the HTML, CSS and JS into your form.