Select

The Select component provides a reusable pattern for select in the interface.

Select

A single-select dropdown rendered at all three available sizes (sm, md, lg) with the label hidden.

Multiple Select

A multi-select dropdown rendered at all three sizes, with two items preselected and the field marked as required.

Placeholder in multi

Searchable Select

Both a searchable multi-select and a searchable single-select using a large option list; search is explicitly enabled via the search parameter.

Search for options

Select with Description

A select field with an additional description line rendered below the label to provide extra context or instructions.

Select the country where you currently reside.

Select with Helper Text

A select field with a small helper text rendered below the component using the helperText parameter.

Your selection will affect the language of all notifications.

Select with Error Message

A select field in an invalid state, showing how the errorMessage parameter attaches a validation message to the component.

Preselected Option

A single-select dropdown with one option preselected on load using the preselected parameter with a scalar key.

Required Select

A required single-select field that displays a required asterisk next to the label and removes the clear button.

Multiple Select with Max Selections

A multi-select dropdown limited to two simultaneous selections using the maxSelections parameter.

Select interests

Rounded Select

A select field styled with the c-select--rounded modifier class, producing a pill-shaped button appearance often used for filters.

API

Parameter Default Type Description
label
string -
placeholder
string -
id
false string|boolean -
description
string -
required
false boolean -
options
[] array -
errorMessage
false string|boolean -
preselected
false string|boolean -
multiple
false boolean -
name
false string|boolean -
hideLabel
false boolean -
helperText
string -
size
md string -
maxSelections
false integer|boolean -
hidePlaceholder
false boolean -
selectAttributeList
[] array -
search
null ?boolean -
searchPlaceholder
Search... string -
searchNoResultsText
No results found string -

CSS API

Variable Default Type Values Description
--c-select--base
var(--base) range - Main unit that drives radius and spacing scales.
--c-select--border-radius
var(--border-radius) range - Border Radius
--c-select--color--primary
var(--color--primary) color - Primary
--c-select--color--surface
var(--color--surface) color - Surface
--c-select--color--danger
var(--color--danger) color - Danger
--c-select--color--success
var(--color--success) color - Success
--c-select--font-size-100
var(--font-size-100) range - Base font size.
--c-select--font-size-90
var(--font-size-90) range - One step below base in the type scale.
--c-select--font-size-80
var(--font-size-80) range - Two steps below base in the type scale.
--c-select--color--surface-border
var(--color--surface-border) color - Manual companion token for borders on surface elements.
--c-select--color--surface-contrast-muted
var(--color--surface-contrast-muted) color - Derived muted contrast for text and icons on surface backgrounds.
--c-select--color--danger-contrast
var(--color--danger-contrast) color - Danger Contrast

Similar components

Segment Collection Icon Section