Select

Ordered or unordered lists. Note: Due to reserverd keywords, this internally is called "listing" and not "list".

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.

Parameters (Blade)

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

Parameters (CSS)

Key Default value Type Available 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