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
Placeholder in multi
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 Description
label
The placeholder of the dropdown
placeholder
Supported if multiple select is enabled.
id
false The id attribute for the select component. Will be prefixed with "select_"
description
Additional description or instructions.
required
false If the element should be required
options
[] The options which can be selected. The key if the item will be used as value of the option and the value will be used as a label
errorMessage
false -
preselected
false Key of option to be preselected
multiple
false Sets the select box to a multiple select
name
false The name attribute for the select component
hideLabel
false Hides the label
helperText
Adds a helping text, below the element.
size
md The size of the select component (sm, md, lg)
maxSelections
false The maximum number of selections allowed. Will only be applied if "multiple" is true.
hidePlaceholder
false Hides the placeholder but keeps the label
selectAttributeList
[] Ann array with attributes that will be set on the actual select element.
search
Enables a search input within the select dropdown.
searchPlaceholder
Search... The placeholder text for the search input.
searchNoResultsText
No results found The text to show when no results are found in the search.

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