QsSelect

<qs-select>alpha

A field to pick one option from a list. Renders a native <select> named by its <label for>, with your <option> children moved inside. Where the browser supports customizable select (appearance: base-select, Chrome 135+), the button and the list are fully styled and options can hold rich content such as an icon; elsewhere it stays a native select. Hint, error and native validation work like qs-input.

Examples

EditorialIndustrialChoose a status…DraftIn reviewPublishedEuropeUnited Statesagnostic-framework-ds

<qs-select label="Theme" name="theme" hint="Applies to every component">
  <option value="editorial">Editorial</option>
  <option value="industrial">Industrial</option>
</qs-select>

<qs-select label="Status" name="status" required>
  <option value="">Choose a status…</option>
  <option value="draft"><qs-icon name="pencil"></qs-icon><span>Draft</span></option>
</qs-select>

Prop

Prop	Type	Default	Description
label	string	""	Visible label, also the field's accessible name. Required.
hint	string	""	Suggestion of what to pick, shown inside the label under its text.
error	string	""	Error message, e.g. from the server. Marks the field invalid until you clear it.
name	string	""	Name the value is submitted under in a form.
value	string	""	Value of the selected option. Kept in sync when the user picks one.
required	boolean	false	An option with a non-empty value must be picked before the form submits. Pair it with a first `<option value="">Choose…</option>`.
disabled	boolean	false	The field can't be focused or changed, and isn't submitted.
text	string	—	The text content of the element, captured from light DOM before the first render.

Usage

Use a select to pick one option from a list of about 5 to 15. For two or three options, radio buttons show every choice at once; for long lists, a searchable field works better.

Customizable select

In browsers that support customizable select (appearance: base-select, Chrome 135+), the field and its list are styled with the system's tokens: the list is a sheet anchored under the field with Editorial's hard shadow, the arrow turns while it is open, the chosen option shows a checkmark, and options can hold rich content such as an icon next to the text. The button shows the chosen option's content through <selectedcontent>.

Other browsers keep a native select: same options, same value, same validation, their own look. Icons inside options are then simply not shown, so always put the meaning in the text.

Hint, errors and validation

Same as input: hint sits inside the label; required with a first <option value=""> blocks the form until a real option is picked; native errors appear on blur, change and submit; error shows your own message and keeps the field invalid until you clear it.

Do and don't

• Do order options logically (alphabetical, frequency, or natural order).
• Do write a placeholder option that says what to do ("Choose a status…") when nothing is pre-selected.
• Don't use a select for navigation; use links.
• Don't put the only meaning of an option in its icon.

Accessibility

• A native <select> named by its <label for>: keyboard (↑ ↓, typing to jump, Enter, Esc) and screen readers work as with any select, including in the customizable mode.
• Errors are linked with aria-describedby and set aria-invalid="true"; text, icon and border, never colour alone.
• Icons in options are decorative (aria-hidden); the option's text is what is read and submitted.
• The list fades in over --duration-enter and slides by --offset-lift; under reduced motion it only fades and the arrow snaps. Industrial has no slide and no shadow.