Bootstrap components

Selects

The dropdown list of a form, single or multiple. The native control of the theme; a plugin never builds its own.

A select lets the user pick one option (or several) from a short, known list. It is the theme’s own select: native behaviour, with the height, border and arrow of the other fields.

When to use it

Use it

A select for 4 to about 15 options that the user already knows.
A visible label, linked with for and id.
A first option that says what to do (“Choose…”) when no value is the default.
multiple with size only when the user must see the options at once.
Moodle sizes a select to its content; add w-100 where it has to fill the row.

Don't

Use a select for two options; use radio buttons or a switch.
Use it for a long or searchable list; Moodle’s autocomplete is the component for that.
Style the options; the browser draws them.
Change the arrow or the height in a plugin.

Anatomy

A select has a label, the control with the chosen option and an arrow, and the list the browser opens. Same hint and message rules as a text field.

Variants and states

Single, small and multiple

The list that opens

The browser draws the list of a select on its own and a page cannot style it. In this system a select opens a menu of the design system instead: the same one a dropdown has, with the groups as headers, the disabled options dimmed and the chosen one marked. The select keeps its value and its events, so the markup of a plugin does not change. Try it with the keyboard too (arrows, Home, End, a letter, Enter, Escape).

The menu of a select

Course category

Open it: the list is a menu of the design system, with the groups as headers and the chosen option marked.

Sizes

Small, default and large

Use the default size. Small belongs in dense places (a filter bar over a table, the rows per page of a pager); large only for a single main field on a page.

Several values as tags

A select with the attribute multiple is drawn as a field of tags: what is chosen shows as pieces that are removed one by one, and the options open in the menu of the design system, with a check, which stays open while the user picks. The select underneath keeps its values and its events, so the markup of a plugin does not change. The same field also takes free text (tags that do not exist yet); see the page “Tags”.

A select with several values, free tags and an empty field

Combinations

Combination	Use it for
Select × a few options	4 to about 15 options the user already knows. Fewer than 4: radios. More than 15, or searchable: the autocomplete of Moodle.
Select + optgroup	Group options with `optgroup`; the menu shows each group as a header.
Select + input group	A select attached to a button (“Hide
Width	Moodle sizes a select to its content. Add `w-100` where it has to fill the row.

What Didactika changes and why

What we changed	Why it helps
The list that opens is a menu of the design system	The native list cannot be styled, so each browser showed a different, plain list that did not match the rest of the page. One menu looks the same everywhere and shows the chosen option.
The arrow has its own room on the right	Long options never run under the arrow, in any size.
Same height, border and focus as a text field	A select next to a field looks like its sibling, not like another component.

Classes

Class	What it does
`form-selectcustom-select`	The select
`form-select-sm`, `form-select-lgcustom-select-sm`, `custom-select-lg`	Smaller and larger
`form-label`	Label above the select
`dd-select-menu`	The menu a select opens (Didactika). Built by the site; plugins do not write it

In this version

Bootstrap 5.3 draws the focus as a soft ring and keeps every colour in CSS variables (--bs-*), so a theme recolours a control with one variable. The arrow is a background image that the theme can swap.

Bootstrap 4.6 draws the focus as a coloured shadow and compiles the colours of every control, so a theme recolours it by rebuilding its stylesheet. The class is custom-select.

Accessibility

A label for every select.
Do not use onchange to navigate or submit; give a button.
Native keyboard behaviour (arrows, type to find) is free: keep the native element.
An error message is linked with aria-describedby.