Select

A select picks exactly one option from a long list and keeps the list closed until you open it. The variant sets how much weight the field carries on a form, from a filled panel to plain text. Open the selects below, then press an arrow key or type a letter to move through their options.

Iceland

Japan

Kenya

Peru

Light

Medium

Dark

Tomato

Pesto

Garlic cream

6 to 7 pm

7 to 8 pm

8 to 9 pm

Thin

Sourdough

Deep pan

Stuffed

Basil

Olives

Chili oil

Small

Medium

Large

Sparkling water

Lemonade

Cola

Dine in

Patio

Counter

Tiramisu

Gelato

Soup

Salad

Espresso

Latte

Reference docs⁠

Blazor

React

Web

Overview

Examples

API

Styling

Accessibility

Choosing a selection control⁠

Four components capture a choice in a form. Each suits a different job:

Checkbox: one or more options picked from a short list, or a single yes to confirm, such as "I agree to the terms".
Switch: a setting that takes effect the moment it is flipped, such as Wi-Fi or dark mode.
Radio buttons: exactly one option from a short list shown in full, such as delivery speed.
Select: exactly one option from a longer list kept closed until opened, such as country.

Two jobs belong elsewhere. A choice made by clicking a compact tag, such as filtering results, is a filter chip, and a two-state setting in a toolbar is a toggle button.

Choosing a variant⁠

Three variants differ in how much frame surrounds the chosen text, from most to least:

Filled: a field that needs a distinct ground, such as a settings page or a checkout form.
Outlined: a form with many fields in a row, where an outline separates them without adding weight.
Text: a field inside a toolbar or a table row, such as a sort order, where a container would add noise.

Built in⁠

A menu that opens from the field and closes on a choice, animated by animation.
Typeahead: typing a letter on the closed field selects the matching option, and typeahead-delay sets how long the typed letters count together.
Form participation, so a form collects the choice without glue code.
Required and error states: required adds an asterisk to the label, and error-text replaces supporting-text while error is set.
A badge on the field with badge-value, concealed with badge-concealed.
A leading icon in the leading-icon slot that the field makes room for.
Choosing one option clears selected on the others, and defaultSelected remembers the markup's choice, so a form reset restores it.
display-text sets the short text the field shows for an option, while its row keeps the full label.
An option row shows an icon at either end, set by name or by slot, and can carry an overline, supporting text, and trailing supporting text.

Hidden content renders when first shown⁠

A select keeps its option list hidden until the field opens it. Each opening starts like the first: on the chosen option, or on the first option when none is chosen. Your options and the chosen value are untouched. Wait for updateComplete and the hidden content has rendered, so your code can reach it at once. See Hidden content renders when first shown.

Using selects well⁠

Give every select a label that names the choice, such as "Country", and set aria-label to the same words.
Choose a select when the reader picks one option from a list too long to show in full, and radio buttons when every option should stay visible.
Choose checkboxes when the reader may pick more than one option: a select holds a single selection.
Choose a switch for a setting with two states; a select suits three or more options.
Say how to choose in supporting-text, and say how to fix a problem in error-text.
Keep option labels short and distinct, and write the full name in the row with a short code in display-text, as with "United States of America" and "US".
Give every option an icon or none, and keep supporting text for a second line of information, never for instructions.
Keep a disabled option visible, and explain why in the select's own supporting text, since the option cannot take focus.

Theming fields⁠

Set one design token and every field of that variant follows it: text fields, text areas, selects, and the email, number, password, search, and telephone fields alike.

--ct-field-filled-* themes filled fields, --ct-field-outlined-* outlined fields, and --ct-field-text-* fields with no container.
A token set on the page, or on any element that contains fields, reaches every field of its variant inside it.
To restyle selects only, set the token on the element in your own CSS:

cw-select {
  --ct-field-outlined-corner-shape: square;
}

content_copy

The Styling tab lists every token and its default.

These rules follow Material 3 Expressive's guidance for menus, on material.io.

Variants⁠

variant picks filled, outlined, or text. Omit it and the select takes the variant from your style configuration, which is filled unless you have changed it. The Overview says when to choose each.

Labels and errors⁠

label floats above the chosen text, and supporting-text sits below the field. required adds an asterisk to the label, and no-asterisk removes it. While error is set, error-text replaces the supporting text. A text variant draws no floating label: label there is only the accessible name.

Icons⁠

Put an icon in the leading-icon slot to show it before the chosen text, or in trailing-icon to replace the arrow. The select sets has-leading-icon itself when it sees a leading icon, so you set it only when rendering on a server.

Badges⁠

badge-value puts text in a badge on the field. badge-dot shows a dot instead, and badge-concealed hides the badge without clearing its value, so clearing it shows the same badge again.

Put cw-select-option elements in the default slot, or give expressContent an array of strings or option objects. When both are present, the slot wins and the select logs a warning. clamp-menu-width keeps the menu no wider than the field, and typeahead-delay sets how long typed letters count as one search. display-text is for server rendering only.

Row content⁠

An option's label is its default slot. The overline, supporting-text, and trailing-supporting-text slots add small text above, below, and at the end of the row. The start and end slots take other leading and trailing content.

Option icons⁠

leading-icon-name and trailing-icon-name name a Material Symbols icon for each end of the row. A start or end slot takes precedence over its icon name. In a right-to-left layout, flip-leading-icon-in-rtl and flip-trailing-icon-in-rtl mirror a directional icon. This demo sets the layout right to left, and the switch flips the arrows on the first option.

Display text⁠

display-text sets what the field shows once the option is chosen. Without it, the field shows the option's typeahead text, then its default slot text, then its supporting text. Use it when the row needs a long label and the field should stay short. It changes the field only, so the option's accessible name stays the same.

Preselecting⁠

selected marks an option as chosen. Writing it in markup preselects the option, and setting it from code chooses the option and clears the others. The switch here chooses the second option from code.

Option values⁠

The select submits the chosen option's value, which is an empty string until you set it. Listen for change and input on the select; the option fires neither.

Disabled options⁠

disabled dims a row and makes it non-selectable. The row stays visible and drops out of the Tab order, so keyboard focus never reaches it. The switch here marks the first option as sold out.

Forms⁠

The select is a form control: it submits value under name, and a form reset restores its default. value holds the chosen option's value, and setting value from code selects that option without firing input or change. A user's choice fires input, then change.

Disabled⁠

disabled stops the field from opening. A select inside a disabled <fieldset> reads as disabled too, without the attribute.

Animation⁠

animation sets how the menu appears: none, fade, faded-slide, or expand. Choose one in the first select and open the second to see it.

Density⁠

density shortens the field in four steps below the standard height. Omit it and the select takes its density from your style configuration, which is standard unless you have changed it. A text variant ignores it, and a filled select at density 2 or higher hides its floating label, so give it aria-label.

Select

Select option

Properties⁠

Property	Attribute	Type	Description
`animation`	`animationnone`, `fade`, `faded-slide`, `expand`	`PopoverAnimationPopoverAnimation.None`, `.Fade`, `.FadedSlide`, `.Expand`	The menu's open and close animation. Unset, it follows the style configuration, which defaults to `faded-slide`. See Animation.
`badgeConcealed`	`badge-concealed`	`boolean`default `false`	Hides the badge while keeping its value and dot setting, so clearing this property shows the same badge again. See Badges.
`badgeDot`	`badge-dot`	`boolean`default `false`	Shows the badge as a small dot with no text, whether or not `badgeValue` is set. See Badges.
`badgeValue`	`badge-value`	`string`	The badge's text. While it is empty and `badgeDot` is not set, no badge renders. Ignored if `badgeDot` is set. See Badges.
`clampMenuWidth`	`clamp-menu-width`	`boolean`default `false`	Limits the menu's width to the select's width. Without it, the menu is at least that wide and can grow wider. See Menu content.
`compareWith`		`(a: TItem, b: TItem) => boolean`	Decides whether an option's value and the select's value name the same option. When set, it is the only test. Set it from code; it has no attribute.
`density`	`density0`, `1`, `2`, `3`, `4`	`DensityDensity.Standard`, `.Dense1`, `.Dense2`, `.Dense3`, `.Dense4`default `Density.Standard`, from the style configuration	The field's density level.Ignored for Text variants. See Density.
`disabled`	`disabled`	`boolean`	Whether the element is disabled. Also reads true while a disabled `<fieldset>` contains it. See Disabled options, Disabled.
`displayText`	`display-text`	`string`	The text shown in the field. It follows the chosen option, so set it only for server-side rendering. See Menu content, Display text.
`error`	`error`	`boolean`default `false`	Gets or sets whether or not the select is in a visually invalid state.This error state overrides the error state controlled by `reportValidity()`. See Labels and errors.
`errorText`	`error-text`	`string`	The error message that replaces supporting text when `error` is true. If `errorText` is an empty string, then the supporting text will continue to show.This error message overrides the error message displayed by `reportValidity()`. See Labels and errors.
`expressContent`		`ExpressSelectElement[]`	The options to show, as an array of `ExpressSelectOption` or `string` elements. Slotted options take precedence, and the select logs a warning when both are set. See Menu content.
`form`read-only		`HTMLFormElement`	The form the component belongs to, or `null` when it has none.
`hasLeadingIcon`	`has-leading-icon`	`boolean`default `false`	Whether the select has a leading icon. It follows the `leading-icon` slot, so set it only for server-side rendering. See Icons.
`label`	`label`	`string`	The floating label for the field. It does not name the combobox for a screen reader on a filled or outlined select: set `aria-label` as well. A filled select at density 2 or higher draws no label. For Text variants, it sets only the ARIA label. See Labels and errors.
`labels`read-only		`NodeList`	The `<label>` elements associated with the element.
`name`	`name`	`string`	The name the element's value is submitted under with its form. See Forms.
`noAsterisk`	`no-asterisk`	`boolean`default `false`	Disables the asterisk on the floating label, when the select is required. See Labels and errors.
`options`read-only		`SelectOption[]`	The select's options.
`required`	`required`	`boolean`default `false`	Requires an option to be chosen before the form can be submitted. See Labels and errors.
`selectedOption`read-only		`SelectOption`	The chosen option, or `null` when none is chosen.
`supportingText`	`supporting-text`	`string`	Conveys additional information below the select, such as how it should be used. See Labels and errors.
`typeaheadDelay`	`typeahead-delay`	`number`default `DEFAULT_TYPEAHEAD_BUFFER_TIME`	The longest pause, in milliseconds, between keystrokes of a typeahead search before the search starts again. See Menu content.
`validationMessage`read-only		`string`	The message describing why the element is invalid, or an empty string when it is valid.
`validity`read-only		`ValidityState`	The element's `ValidityState`.
`value`	`value`	`TItem`	The currently selected option's value, of any type. An option matches it by `compareWith`, else by `valueKey`, else when the two are the same value (a number matches its own string). A value that matches no option is kept and nothing is shown selected; the option is selected when one with that value arrives. `""` or `null` chooses nothing.Note: for SSR, set `[selected]` on the requested option and `displayText` rather than setting `value`. See Option values, Forms.
`valueKey`	`value-key`	`string`	The field that identifies an object value: an option whose object holds the same value in this field as the select's object is its option, and the form submits this field.
`variant`	`variantfilled`, `outlined`, `text`	`FieldVariantFieldVariant.Filled`, `.Outlined`, `.Text`default `FieldVariant.Filled`, from the style configuration	The field's variant. See Variants.
`willValidate`read-only		`boolean`	Whether the element takes part in constraint validation. False while it is disabled or read-only.

Slots⁠

Slot	Description
(default)	The `cw-select-option` elements to choose from.
`container`	Custom background content.
`leading-icon`	The leading icon, intended for a `cw-icon` or equivalent.
`trailing-icon`	The trailing icon, intended for a `cw-icon` or equivalent.

Events⁠

Event	Type	Detail	Description
`change`	`SelectionChangeEvent`	`SelectionChangeEventDetail<TItem>`	Fired on the select after its value changes: when a user chooses an option, an option's own `selected` changes, `selectIndex()` or `reset()` is called, or new express content no longer holds the value. `detail.value` is the typed value, `null` when nothing is chosen. Setting `value` from code does not fire it, nor does such a value's option arriving later. It bubbles.
`input`	`Event`	—	Fired on the select after a user chooses an option, before `change`. Setting `value` from code does not fire it. It bubbles and is composed.
`beforetoggle`	`ToggleEvent`	—	Fired when the select's menu is about to open or close. Cancelable: calling `preventDefault()` leaves the select as it is. `newState` is `"open"` or `"closed"`. It bubbles, is composed, and is cancelable.
`toggle`	`ToggleEvent`	—	Fired when the select's menu has finished animations and opened or closed. `newState` is `"open"` or `"closed"`. It bubbles and is composed.

Methods⁠

Method	Returns	Description
`checkValidity()`	`boolean`	Checks the element's validity and returns true if it is valid. If not, it dispatches an `invalid` event; nothing changes on screen.
`reportValidity()`	`boolean`	Checks the element's validity and returns true if it is valid. If not, it dispatches a cancelable `invalid` event and, unless a listener cancels it, shows `validationMessage` as the field's error text and focuses the field.
`reset()`	`void`	Reset the select to its default value.
`selectIndex(index: number)`	`void`	Chooses the option at the given index, which changes the select's `value`.
`setCustomValidity(error: string)`	`void`	Sets a custom validation message, which makes the element invalid. An empty string clears it.

Props⁠

Prop	Type	Description
`animation`	`PopoverAnimationTypePopoverAnimation.None`, `.Fade`, `.FadedSlide`, `.Expand`	The menu's open and close animation. Unset, it follows the style configuration, which defaults to `faded-slide`. See Animation.
`badgeConcealed`	`boolean`default `false`	Hides the badge while keeping its value and dot setting, so clearing this property shows the same badge again. See Badges.
`badgeDot`	`boolean`default `false`	Shows the badge as a small dot with no text, whether or not `badgeValue` is set. See Badges.
`badgeValue`	`string`	The badge's text. While it is empty and `badgeDot` is not set, no badge renders. Ignored if `badgeDot` is set. See Badges.
`clampMenuWidth`	`boolean`default `false`	Limits the menu's width to the select's width. Without it, the menu is at least that wide and can grow wider. See Menu content.
`compareWith`	`(a: TItem, b: TItem) => boolean`	Decides whether an option's value and the select's value name the same option. When set, it is the only test. Set it from code; it has no attribute.
`density`	`DensityTypeDensity.Standard`, `.Dense1`, `.Dense2`, `.Dense3`, `.Dense4`default `Density.Standard`, from the style configuration	The field's density level.Ignored for Text variants. See Density.
`disabled`	`boolean`	Whether the element is disabled. Also reads true while a disabled `<fieldset>` contains it. See Disabled options, Disabled.
`displayText`	`string`	The text shown in the field. It follows the chosen option, so set it only for server-side rendering. See Menu content, Display text.
`error`	`boolean`default `false`	Gets or sets whether or not the select is in a visually invalid state.This error state overrides the error state controlled by `reportValidity()`. See Labels and errors.
`errorText`	`string`	The error message that replaces supporting text when `error` is true. If `errorText` is an empty string, then the supporting text will continue to show.This error message overrides the error message displayed by `reportValidity()`. See Labels and errors.
`expressContent`	`ExpressSelectElement[]`	The options to show, as an array of `ExpressSelectOption` or `string` elements. Slotted options take precedence, and the select logs a warning when both are set. See Menu content.
`form`read-only (ref)	`HTMLFormElement`	The form the component belongs to, or `null` when it has none.
`hasLeadingIcon`	`boolean`default `false`	Whether the select has a leading icon. It follows the `slot="leading-icon"` child, so set it only for server-side rendering. See Icons.
`label`	`string`	The floating label for the field. It does not name the combobox for a screen reader on a filled or outlined select: set `aria-label` as well. A filled select at density 2 or higher draws no label. For Text variants, it sets only the ARIA label. See Labels and errors.
`labels`read-only (ref)	`NodeList`	The `<label>` elements associated with the element.
`name`	`string`	The name the element's value is submitted under with its form. See Forms.
`noAsterisk`	`boolean`default `false`	Disables the asterisk on the floating label, when the select is required. See Labels and errors.
`options`read-only (ref)	`SelectOption[]`	The select's options.
`required`	`boolean`default `false`	Requires an option to be chosen before the form can be submitted. See Labels and errors.
`selectedOption`read-only (ref)	`SelectOption`	The chosen option, or `null` when none is chosen.
`supportingText`	`string`	Conveys additional information below the select, such as how it should be used. See Labels and errors.
`typeaheadDelay`	`number`default `DEFAULT_TYPEAHEAD_BUFFER_TIME`	The longest pause, in milliseconds, between keystrokes of a typeahead search before the search starts again. See Menu content.
`validationMessage`read-only (ref)	`string`	The message describing why the element is invalid, or an empty string when it is valid.
`validity`read-only (ref)	`ValidityState`	The element's `ValidityState`.
`value`	`TItem`	The currently selected option's value, of any type. An option matches it by `compareWith`, else by `valueKey`, else when the two are the same value (a number matches its own string). A value that matches no option is kept and nothing is shown selected; the option is selected when one with that value arrives. `""` or `null` chooses nothing.Note: for SSR, set `[selected]` on the requested option and `displayText` rather than setting `value`. See Option values, Forms.
`valueKey`	`string`	The field that identifies an object value: an option whose object holds the same value in this field as the select's object is its option, and the form submits this field.
`variant`	`FieldVariantTypeFieldVariant.Filled`, `.Outlined`, `.Text`default `FieldVariant.Filled`, from the style configuration	The field's variant. See Variants.
`willValidate`read-only (ref)	`boolean`	Whether the element takes part in constraint validation. False while it is disabled or read-only.

Children⁠

Child	Description
`children`	The `CrSelectOption` elements to choose from.
a child with `slot="container"`	Custom background content.
a child with `slot="leading-icon"`	The leading icon, intended for a `CrIcon` or equivalent.
a child with `slot="trailing-icon"`	The trailing icon, intended for a `CrIcon` or equivalent.

Events⁠

Prop	Argument	Description
`onChange`	`SelectionChangeEvent<TItem>`	Fired on the select after its value changes: when a user chooses an option, an option's own `selected` changes, `selectIndex()` or `reset()` is called, or new express content no longer holds the value. `detail.value` is the typed value, `null` when nothing is chosen. Setting `value` from code does not fire it, nor does such a value's option arriving later. It bubbles. Its `detail` carries `value` and `values`.
`onInput`	`React.ChangeEvent<HTMLInputElement>`	Fired on the select after a user chooses an option, before `change`. Setting `value` from code does not fire it. It bubbles and is composed.
`onBeforeToggle`	`ToggleEvent`	Fired when the select's menu is about to open or close. Cancelable: calling `preventDefault()` leaves the select as it is. `newState` is `"open"` or `"closed"`. It bubbles, is composed, and is cancelable.
`onToggle`	`ToggleEvent`	Fired when the select's menu has finished animations and opened or closed. `newState` is `"open"` or `"closed"`. It bubbles and is composed.

Methods⁠

Call these on the element the ref holds.

Method	Returns	Description
`checkValidity()`	`boolean`	Checks the element's validity and returns true if it is valid. If not, it dispatches an `invalid` event; nothing changes on screen.
`reportValidity()`	`boolean`	Checks the element's validity and returns true if it is valid. If not, it dispatches a cancelable `invalid` event and, unless a listener cancels it, shows `validationMessage` as the field's error text and focuses the field.
`reset()`	`void`	Reset the select to its default value.
`selectIndex(index: number)`	`void`	Chooses the option at the given index, which changes the select's `value`.
`setCustomValidity(error: string)`	`void`	Sets a custom validation message, which makes the element invalid. An empty string clears it.

Parameters⁠

Parameter	Type	Description
`Animation`	`PopoverAnimation?PopoverAnimation.None`, `.Fade`, `.FadedSlide`, `.Expand`	The menu's open and close animation. Unset, it follows the style configuration, which defaults to `faded-slide`. See Animation.
`BadgeConcealed`	`bool?`default `false`	Hides the badge while keeping its value and dot setting, so clearing this property shows the same badge again. See Badges.
`BadgeDot`	`bool?`default `false`	Shows the badge as a small dot with no text, whether or not `BadgeValue` is set. See Badges.
`BadgeValue`	`string?`	The badge's text. While it is empty and `BadgeDot` is not set, no badge renders. Ignored if `BadgeDot` is set. See Badges.
`ClampMenuWidth`	`bool?`default `false`	Limits the menu's width to the select's width. Without it, the menu is at least that wide and can grow wider. See Menu content.
`Density`	`Density?Density.Standard`, `.Dense1`, `.Dense2`, `.Dense3`, `.Dense4`default `Density.Standard`, from the style configuration	The field's density level.Ignored for Text variants. See Density.
`Disabled`	`bool?`	Whether the element is disabled. Also reads true while a disabled `<fieldset>` contains it. See Disabled options, Disabled.
`DisplayText`	`string?`	The text shown in the field. It follows the chosen option, so set it only for server-side rendering. See Menu content, Display text.
`Error`	`bool?`default `false`	Gets or sets whether or not the select is in a visually invalid state.This error state overrides the error state controlled by `reportValidity()`. See Labels and errors.
`ErrorText`	`string?`	The error message that replaces supporting text when `Error` is true. If `ErrorText` is an empty string, then the supporting text will continue to show.This error message overrides the error message displayed by `reportValidity()`. See Labels and errors.
`ExpressContent`	`IEnumerable<ExpressSelectElement>?`	The options to show, as an array of `ExpressSelectOption` or `string` elements. Slotted options take precedence, and the select logs a warning when both are set. See Menu content.
`HasLeadingIcon`	`bool?`default `false`	Whether the select has a leading icon. It follows the `LeadingIcon` render fragment, so set it only for server-side rendering. See Icons.
`Label`	`string?`	The floating label for the field. It does not name the combobox for a screen reader on a filled or outlined select: set `aria-label` as well. A filled select at density 2 or higher draws no label. For Text variants, it sets only the ARIA label. See Labels and errors.
`Name`	`string?`	The name the element's value is submitted under with its form. See Forms.
`NoAsterisk`	`bool?`default `false`	Disables the asterisk on the floating label, when the select is required. See Labels and errors.
`Required`	`bool?`default `false`	Requires an option to be chosen before the form can be submitted. See Labels and errors.
`SupportingText`	`string?`	Conveys additional information below the select, such as how it should be used. See Labels and errors.
`TypeaheadDelay`	`int?`default `DEFAULT_TYPEAHEAD_BUFFER_TIME`	The longest pause, in milliseconds, between keystrokes of a typeahead search before the search starts again. See Menu content.
`Value`	`TItem`	The currently selected option's value, of any type. An option matches it by `CompareWith`, else by `ValueKey`, else when the two are the same value (a number matches its own string). A value that matches no option is kept and nothing is shown selected; the option is selected when one with that value arrives. `""` or `null` chooses nothing.Note: for SSR, set `[selected]` on the requested option and `DisplayText` rather than setting `Value`. See Option values, Forms.
`ValueExpression`	`Expression<Func<TItem>>?`	Gets or sets an expression that identifies the bound value.
`Variant`	`FieldVariant?FieldVariant.Filled`, `.Outlined`, `.Text`default `FieldVariant.Filled`, from the style configuration	The field's variant. See Variants.

Render fragments⁠

Once you write LeadingIcon or any other fragment as a child element, the main content must go in an explicit <ChildContent> too; markup beside <LeadingIcon> is a compile error. Here ChildContent is: The CbSelectOption elements to choose from.

<CbSelect>
    <LeadingIcon><CbIcon>favorite</CbIcon></LeadingIcon>
    <ChildContent>Main content</ChildContent>
</CbSelect>

content_copy

Parameter	Type	Description
`ChildContent`	`RenderFragment?`	The `CbSelectOption` elements to choose from.
`Container`	`RenderFragment?`	Custom background content.
`LeadingIcon`	`RenderFragment?`	The leading icon, intended for a `CbIcon` or equivalent.
`TrailingIcon`	`RenderFragment?`	The trailing icon, intended for a `CbIcon` or equivalent.

Event callbacks⁠

Parameter	Type	Description
`OnChange`	`EventCallback<SelectionChangeEventArgs<TItem>>`	Fired on the select after its value changes: when a user chooses an option, an option's own `selected` changes, `selectIndex()` or `reset()` is called, or new express content no longer holds the value. `detail.value` is the typed value, `null` when nothing is chosen. Setting `Value` from code does not fire it, nor does such a value's option arriving later. It bubbles. Its `detail` carries `Value` and `values`.
`OnInput`	`EventCallback<ChangeEventArgs>`	Fired on the select after a user chooses an option, before `change`. Setting `Value` from code does not fire it. It bubbles and is composed.
`OnBeforeToggle`	`EventCallback<ToggleEventArgs>`	Fired when the select's menu is about to open or close. Cancelable: calling `preventDefault()` leaves the select as it is. `newState` is `"open"` or `"closed"`. It bubbles, is composed, and is cancelable.
`OnToggle`	`EventCallback<ToggleEventArgs>`	Fired when the select's menu has finished animations and opened or closed. `newState` is `"open"` or `"closed"`. It bubbles and is composed.

Inputs⁠

Input	Type	Description
`animation`	`PopoverAnimationTypePopoverAnimation.None`, `.Fade`, `.FadedSlide`, `.Expand`	The menu's open and close animation. Unset, it follows the style configuration, which defaults to `faded-slide`. See Animation.
`badgeConcealed`	`boolean`default `false`	Hides the badge while keeping its value and dot setting, so clearing this property shows the same badge again. See Badges.
`badgeDot`	`boolean`default `false`	Shows the badge as a small dot with no text, whether or not `badgeValue` is set. See Badges.
`badgeValue`	`string`	The badge's text. While it is empty and `badgeDot` is not set, no badge renders. Ignored if `badgeDot` is set. See Badges.
`clampMenuWidth`	`boolean`default `false`	Limits the menu's width to the select's width. Without it, the menu is at least that wide and can grow wider. See Menu content.
`compareWith`	`(a: TItem, b: TItem) => boolean`	Decides whether an option's value and the select's value name the same option. When set, it is the only test. Set it from code; it has no attribute.
`density`	`DensityTypeDensity.Standard`, `.Dense1`, `.Dense2`, `.Dense3`, `.Dense4`default `Density.Standard`, from the style configuration	The field's density level.Ignored for Text variants. See Density.
`disabled`	`boolean`	Whether the element is disabled. Also reads true while a disabled `<fieldset>` contains it. See Disabled options, Disabled.
`displayText`	`string`	The text shown in the field. It follows the chosen option, so set it only for server-side rendering. See Menu content, Display text.
`error`	`boolean`default `false`	Gets or sets whether or not the select is in a visually invalid state.This error state overrides the error state controlled by `reportValidity()`. See Labels and errors.
`errorText`	`string`	The error message that replaces supporting text when `error` is true. If `errorText` is an empty string, then the supporting text will continue to show.This error message overrides the error message displayed by `reportValidity()`. See Labels and errors.
`expressContent`	`ExpressSelectElement[]`	The options to show, as an array of `ExpressSelectOption` or `string` elements. Slotted options take precedence, and the select logs a warning when both are set. See Menu content.
`hasLeadingIcon`	`boolean`default `false`	Whether the select has a leading icon. It follows the `leading-icon` slot, so set it only for server-side rendering. See Icons.
`label`	`string`	The floating label for the field. It does not name the combobox for a screen reader on a filled or outlined select: set `aria-label` as well. A filled select at density 2 or higher draws no label. For Text variants, it sets only the ARIA label. See Labels and errors.
`name`	`string`	The name the element's value is submitted under with its form. See Forms.
`noAsterisk`	`boolean`default `false`	Disables the asterisk on the floating label, when the select is required. See Labels and errors.
`required`	`boolean`default `false`	Requires an option to be chosen before the form can be submitted. See Labels and errors.
`supportingText`	`string`	Conveys additional information below the select, such as how it should be used. See Labels and errors.
`typeaheadDelay`	`number`default `DEFAULT_TYPEAHEAD_BUFFER_TIME`	The longest pause, in milliseconds, between keystrokes of a typeahead search before the search starts again. See Menu content.
`value`	`TItem`	The currently selected option's value, of any type. An option matches it by `compareWith`, else by `valueKey`, else when the two are the same value (a number matches its own string). A value that matches no option is kept and nothing is shown selected; the option is selected when one with that value arrives. `""` or `null` chooses nothing.Note: for SSR, set `[selected]` on the requested option and `displayText` rather than setting `value`. See Option values, Forms.
`valueKey`	`string`	The field that identifies an object value: an option whose object holds the same value in this field as the select's object is its option, and the form submits this field.
`variant`	`FieldVariantTypeFieldVariant.Filled`, `.Outlined`, `.Text`default `FieldVariant.Filled`, from the style configuration	The field's variant. See Variants.

Content projection⁠

Content	Description
content with no `slot`	The `CaSelectOption` elements to choose from.
an element with `slot="container"`	Custom background content.
an element with `slot="leading-icon"`	The leading icon, intended for a `CaIcon` or equivalent.
an element with `slot="trailing-icon"`	The trailing icon, intended for a `CaIcon` or equivalent.

Outputs⁠

Output	Event	Description
`cwChange`	`SelectionChangeEvent`	Fired on the select after its value changes: when a user chooses an option, an option's own `selected` changes, `selectIndex()` or `reset()` is called, or new express content no longer holds the value. `detail.value` is the typed value, `null` when nothing is chosen. Setting `value` from code does not fire it, nor does such a value's option arriving later. It bubbles. Its `detail` carries `value` and `values`.
`cwInput`	`Event`	Fired on the select after a user chooses an option, before `change`. Setting `value` from code does not fire it. It bubbles and is composed.
`cwBeforeToggle`	`ToggleEvent`	Fired when the select's menu is about to open or close. Cancelable: calling `preventDefault()` leaves the select as it is. `newState` is `"open"` or `"closed"`. It bubbles, is composed, and is cancelable.
`cwToggle`	`ToggleEvent`	Fired when the select's menu has finished animations and opened or closed. `newState` is `"open"` or `"closed"`. It bubbles and is composed.

Props⁠

Prop	Type	Description
`animation`	`PopoverAnimationTypePopoverAnimation.None`, `.Fade`, `.FadedSlide`, `.Expand`	The menu's open and close animation. Unset, it follows the style configuration, which defaults to `faded-slide`. See Animation.
`badgeConcealed`	`boolean`default `false`	Hides the badge while keeping its value and dot setting, so clearing this property shows the same badge again. See Badges.
`badgeDot`	`boolean`default `false`	Shows the badge as a small dot with no text, whether or not `badgeValue` is set. See Badges.
`badgeValue`	`string`	The badge's text. While it is empty and `badgeDot` is not set, no badge renders. Ignored if `badgeDot` is set. See Badges.
`clampMenuWidth`	`boolean`default `false`	Limits the menu's width to the select's width. Without it, the menu is at least that wide and can grow wider. See Menu content.
`compareWith`	`(a: TItem, b: TItem) => boolean`	Decides whether an option's value and the select's value name the same option. When set, it is the only test. Set it from code; it has no attribute.
`density`	`DensityTypeDensity.Standard`, `.Dense1`, `.Dense2`, `.Dense3`, `.Dense4`default `Density.Standard`, from the style configuration	The field's density level.Ignored for Text variants. See Density.
`disabled`	`boolean`	Whether the element is disabled. Also reads true while a disabled `<fieldset>` contains it. See Disabled options, Disabled.
`displayText`	`string`	The text shown in the field. It follows the chosen option, so set it only for server-side rendering. See Menu content, Display text.
`error`	`boolean`default `false`	Gets or sets whether or not the select is in a visually invalid state.This error state overrides the error state controlled by `reportValidity()`. See Labels and errors.
`errorText`	`string`	The error message that replaces supporting text when `error` is true. If `errorText` is an empty string, then the supporting text will continue to show.This error message overrides the error message displayed by `reportValidity()`. See Labels and errors.
`expressContent`	`ExpressSelectElement[]`	The options to show, as an array of `ExpressSelectOption` or `string` elements. Slotted options take precedence, and the select logs a warning when both are set. See Menu content.
`hasLeadingIcon`	`boolean`default `false`	Whether the select has a leading icon. It follows the `leading-icon` slot, so set it only for server-side rendering. See Icons.
`label`	`string`	The floating label for the field. It does not name the combobox for a screen reader on a filled or outlined select: set `aria-label` as well. A filled select at density 2 or higher draws no label. For Text variants, it sets only the ARIA label. See Labels and errors.
`name`	`string`	The name the element's value is submitted under with its form. See Forms.
`noAsterisk`	`boolean`default `false`	Disables the asterisk on the floating label, when the select is required. See Labels and errors.
`required`	`boolean`default `false`	Requires an option to be chosen before the form can be submitted. See Labels and errors.
`supportingText`	`string`	Conveys additional information below the select, such as how it should be used. See Labels and errors.
`typeaheadDelay`	`number`default `DEFAULT_TYPEAHEAD_BUFFER_TIME`	The longest pause, in milliseconds, between keystrokes of a typeahead search before the search starts again. See Menu content.
`value`	`TItem`	The currently selected option's value, of any type. An option matches it by `compareWith`, else by `valueKey`, else when the two are the same value (a number matches its own string). A value that matches no option is kept and nothing is shown selected; the option is selected when one with that value arrives. `""` or `null` chooses nothing.Note: for SSR, set `[selected]` on the requested option and `displayText` rather than setting `value`. See Option values, Forms.
`valueKey`	`string`	The field that identifies an object value: an option whose object holds the same value in this field as the select's object is its option, and the form submits this field.
`variant`	`FieldVariantTypeFieldVariant.Filled`, `.Outlined`, `.Text`default `FieldVariant.Filled`, from the style configuration	The field's variant. See Variants.

Slots⁠

Slot	Description
`default`	The `CvSelectOption` elements to choose from.
`container`	Custom background content.
`leading-icon`	The leading icon, intended for a `CvIcon` or equivalent.
`trailing-icon`	The trailing icon, intended for a `CvIcon` or equivalent.

Events⁠

Event	Type	Description
`change`	`SelectionChangeEvent`	Fired on the select after its value changes: when a user chooses an option, an option's own `selected` changes, `selectIndex()` or `reset()` is called, or new express content no longer holds the value. `detail.value` is the typed value, `null` when nothing is chosen. Setting `value` from code does not fire it, nor does such a value's option arriving later. It bubbles. Its `detail` carries `value` and `values`.
`input`	`Event`	Fired on the select after a user chooses an option, before `change`. Setting `value` from code does not fire it. It bubbles and is composed.
`beforeToggle`	`ToggleEvent`	Fired when the select's menu is about to open or close. Cancelable: calling `preventDefault()` leaves the select as it is. `newState` is `"open"` or `"closed"`. It bubbles, is composed, and is cancelable.
`toggle`	`ToggleEvent`	Fired when the select's menu has finished animations and opened or closed. `newState` is `"open"` or `"closed"`. It bubbles and is composed.

Props⁠

Prop	Type	Description
`animation`	`PopoverAnimationTypePopoverAnimation.None`, `.Fade`, `.FadedSlide`, `.Expand`	The menu's open and close animation. Unset, it follows the style configuration, which defaults to `faded-slide`. See Animation.
`badgeConcealed`	`boolean`default `false`	Hides the badge while keeping its value and dot setting, so clearing this property shows the same badge again. See Badges.
`badgeDot`	`boolean`default `false`	Shows the badge as a small dot with no text, whether or not `badgeValue` is set. See Badges.
`badgeValue`	`string`	The badge's text. While it is empty and `badgeDot` is not set, no badge renders. Ignored if `badgeDot` is set. See Badges.
`clampMenuWidth`	`boolean`default `false`	Limits the menu's width to the select's width. Without it, the menu is at least that wide and can grow wider. See Menu content.
`compareWith`	`(a: TItem, b: TItem) => boolean`	Decides whether an option's value and the select's value name the same option. When set, it is the only test. Set it from code; it has no attribute.
`density`	`DensityTypeDensity.Standard`, `.Dense1`, `.Dense2`, `.Dense3`, `.Dense4`default `Density.Standard`, from the style configuration	The field's density level.Ignored for Text variants. See Density.
`disabled`	`boolean`	Whether the element is disabled. Also reads true while a disabled `<fieldset>` contains it. See Disabled options, Disabled.
`displayText`	`string`	The text shown in the field. It follows the chosen option, so set it only for server-side rendering. See Menu content, Display text.
`error`	`boolean`default `false`	Gets or sets whether or not the select is in a visually invalid state.This error state overrides the error state controlled by `reportValidity()`. See Labels and errors.
`errorText`	`string`	The error message that replaces supporting text when `error` is true. If `errorText` is an empty string, then the supporting text will continue to show.This error message overrides the error message displayed by `reportValidity()`. See Labels and errors.
`expressContent`	`ExpressSelectElement[]`	The options to show, as an array of `ExpressSelectOption` or `string` elements. Slotted options take precedence, and the select logs a warning when both are set. See Menu content.
`hasLeadingIcon`	`boolean`default `false`	Whether the select has a leading icon. It follows the `leadingIconSnippet` snippet, so set it only for server-side rendering. See Icons.
`label`	`string`	The floating label for the field. It does not name the combobox for a screen reader on a filled or outlined select: set `aria-label` as well. A filled select at density 2 or higher draws no label. For Text variants, it sets only the ARIA label. See Labels and errors.
`name`	`string`	The name the element's value is submitted under with its form. See Forms.
`noAsterisk`	`boolean`default `false`	Disables the asterisk on the floating label, when the select is required. See Labels and errors.
`required`	`boolean`default `false`	Requires an option to be chosen before the form can be submitted. See Labels and errors.
`supportingText`	`string`	Conveys additional information below the select, such as how it should be used. See Labels and errors.
`typeaheadDelay`	`number`default `DEFAULT_TYPEAHEAD_BUFFER_TIME`	The longest pause, in milliseconds, between keystrokes of a typeahead search before the search starts again. See Menu content.
`value`	`TItem`	The currently selected option's value, of any type. An option matches it by `compareWith`, else by `valueKey`, else when the two are the same value (a number matches its own string). A value that matches no option is kept and nothing is shown selected; the option is selected when one with that value arrives. `""` or `null` chooses nothing.Note: for SSR, set `[selected]` on the requested option and `displayText` rather than setting `value`. See Option values, Forms.
`valueKey`	`string`	The field that identifies an object value: an option whose object holds the same value in this field as the select's object is its option, and the form submits this field.
`variant`	`FieldVariantTypeFieldVariant.Filled`, `.Outlined`, `.Text`default `FieldVariant.Filled`, from the style configuration	The field's variant. See Variants.

Snippets⁠

Snippet	Description
`children`	The `CsSelectOption` elements to choose from.
`containerSnippet`	Custom background content.
`leadingIconSnippet`	The leading icon, intended for a `CsIcon` or equivalent.
`trailingIconSnippet`	The trailing icon, intended for a `CsIcon` or equivalent.

Events⁠

Prop	Type	Description
`onChange`	`SelectionChangeEvent`	Fired on the select after its value changes: when a user chooses an option, an option's own `selected` changes, `selectIndex()` or `reset()` is called, or new express content no longer holds the value. `detail.value` is the typed value, `null` when nothing is chosen. Setting `value` from code does not fire it, nor does such a value's option arriving later. It bubbles. Its `detail` carries `value` and `values`.
`onInput`	`Event`	Fired on the select after a user chooses an option, before `change`. Setting `value` from code does not fire it. It bubbles and is composed.
`onBeforeToggle`	`ToggleEvent`	Fired when the select's menu is about to open or close. Cancelable: calling `preventDefault()` leaves the select as it is. `newState` is `"open"` or `"closed"`. It bubbles, is composed, and is cancelable.
`onToggle`	`ToggleEvent`	Fired when the select's menu has finished animations and opened or closed. `newState` is `"open"` or `"closed"`. It bubbles and is composed.

Properties⁠

Property	Attribute	Type	Description
`defaultSelected`read-only		`boolean`	The selected state the option returns to when the owning form, or the select's `reset()`, resets it. It comes from the `selected` attribute the option was written with, and later changes to `selected` do not alter it, as with the native `HTMLOptionElement.defaultSelected`.
`disabled`	`disabled`	`boolean`default `false`	Removes the item from the tab and arrow-key order, dims it and ignores the pointer. It sets no `aria-disabled`. See Disabled options, Disabled.
`displayText`	`display-text`	`string`	The text that is displayed in the select field when selected. If not set, defaults to the default slot's text, then the supporting text. The typeahead text is never shown. See Menu content, Display text.
`flipLeadingIconInRtl`	`flip-leading-icon-in-rtl`	`boolean`default `false`	Flips the leading icon supplied in `leading-icon-name` when the text direction is right to left. See Option icons.
`flipTrailingIconInRtl`	`flip-trailing-icon-in-rtl`	`boolean`default `false`	Flips the trailing icon supplied in `trailing-icon-name` when the text direction is right to left. See Option icons.
`leadingIconName`	`leading-icon-name`	`string`	A leading Material Symbols icon name. This is an alternative to the `start` slot. If both are provided, the `start` slot takes precedence. See Option icons.
`selected`	`selected`	`boolean`default `false`	Marks the option as the select's chosen option; choosing another option clears it. Set it in markup to choose the initial option. See Preselecting.
`trailingIconName`	`trailing-icon-name`	`string`	A trailing Material Symbols icon name. This is an alternative to the `end` slot. If both are provided, the `end` slot takes precedence. See Option icons.
`value`	`value`	`unknown`	The item's value: the parent reports it as its own `value` when this item is chosen. Set from code it can be any value, such as a number or an object; the `value` attribute sets it to a string. See Option values, Forms.

A select option does nothing outside a select. Setting selected from code updates the field and clears the other options.

Slots⁠

Slot	Description
`container`	Content shown behind the item, such as a background image.
`overline`	A small text snippet above the headline.
(default)	The headline/custom content.
`supporting-text`	Supporting text lines underneath the headline.
`start`	Any leading content, such as icons, avatars, or checkboxes.
`end`	Any trailing content, such as icons and buttons.
`trailing-supporting-text`	A small text snippet at the end of the item.

An overline together with supporting text, or supporting text with more than one child element, makes the row multiline.

Props⁠

Prop	Type	Description
`defaultSelected`read-only (ref)	`boolean`	The selected state the option returns to when the owning form, or the select's `reset()`, resets it. It comes from the `selected` attribute the option was written with, and later changes to `selected` do not alter it, as with the native `HTMLOptionElement.defaultSelected`.
`disabled`	`boolean`default `false`	Removes the item from the tab and arrow-key order, dims it and ignores the pointer. It sets no `aria-disabled`. See Disabled options, Disabled.
`displayText`	`string`	The text that is displayed in the select field when selected. If not set, defaults to the default slot's text, then the supporting text. The typeahead text is never shown. See Menu content, Display text.
`flipLeadingIconInRtl`	`boolean`default `false`	Flips the leading icon supplied in `leadingIconName` when the text direction is right to left. See Option icons.
`flipTrailingIconInRtl`	`boolean`default `false`	Flips the trailing icon supplied in `trailingIconName` when the text direction is right to left. See Option icons.
`leadingIconName`	`string`	A leading Material Symbols icon name. This is an alternative to the `slot="start"` child. If both are provided, the `slot="start"` child takes precedence. See Option icons.
`selected`	`boolean`default `false`	Marks the option as the select's chosen option; choosing another option clears it. Set it in markup to choose the initial option. See Preselecting.
`trailingIconName`	`string`	A trailing Material Symbols icon name. This is an alternative to the `slot="end"` child. If both are provided, the `slot="end"` child takes precedence. See Option icons.
`value`	`unknown`	The item's value: the parent reports it as its own `value` when this item is chosen. Set from code it can be any value, such as a number or an object; the `value` attribute sets it to a string. See Option values, Forms.

A select option does nothing outside a select. Setting selected from code updates the field and clears the other options.

Children⁠

Child	Description
a child with `slot="container"`	Content shown behind the item, such as a background image.
a child with `slot="overline"`	A small text snippet above the headline.
`children`	The headline/custom content.
a child with `slot="supporting-text"`	Supporting text lines underneath the headline.
a child with `slot="start"`	Any leading content, such as icons, avatars, or checkboxes.
a child with `slot="end"`	Any trailing content, such as icons and buttons.
a child with `slot="trailing-supporting-text"`	A small text snippet at the end of the item.

An overline together with supporting text, or supporting text with more than one child element, makes the row multiline.

Parameters⁠

Parameter	Type	Description
`Disabled`	`bool?`default `false`	Removes the item from the tab and arrow-key order, dims it and ignores the pointer. It sets no `aria-disabled`. See Disabled options, Disabled.
`DisplayText`	`string?`	The text that is displayed in the select field when selected. If not set, defaults to the default slot's text, then the supporting text. The typeahead text is never shown. See Menu content, Display text.
`FlipLeadingIconInRtl`	`bool?`default `false`	Flips the leading icon supplied in `LeadingIconName` when the text direction is right to left. See Option icons.
`FlipTrailingIconInRtl`	`bool?`default `false`	Flips the trailing icon supplied in `TrailingIconName` when the text direction is right to left. See Option icons.
`LeadingIconName`	`string?`	A leading Material Symbols icon name. This is an alternative to the `Start` render fragment. If both are provided, the `Start` render fragment takes precedence. See Option icons.
`Selected`	`bool?`default `false`	Marks the option as the select's chosen option; choosing another option clears it. Set it in markup to choose the initial option. See Preselecting.
`TrailingIconName`	`string?`	A trailing Material Symbols icon name. This is an alternative to the `End` render fragment. If both are provided, the `End` render fragment takes precedence. See Option icons.
`Value`	`TItem`	The item's value: the parent reports it as its own `Value` when this item is chosen. Set from code it can be any value, such as a number or an object; the `Value` attribute sets it to a string. See Option values, Forms.

A select option does nothing outside a select. Setting selected from code updates the field and clears the other options.

Render fragments⁠

Once you write Container or any other fragment as a child element, the main content must go in an explicit <ChildContent> too; markup beside <Container> is a compile error. Here ChildContent is: The headline/custom content.

<CbSelectOption>
    <Container>Content</Container>
    <ChildContent>Main content</ChildContent>
</CbSelectOption>

content_copy

Parameter	Type	Description
`ChildContent`	`RenderFragment?`	The headline/custom content.
`Container`	`RenderFragment?`	Content shown behind the item, such as a background image.
`End`	`RenderFragment?`	Any trailing content, such as icons and buttons.
`Overline`	`RenderFragment?`	A small text snippet above the headline.
`Start`	`RenderFragment?`	Any leading content, such as icons, avatars, or checkboxes.
`SupportingText`	`RenderFragment?`	Supporting text lines underneath the headline.
`TrailingSupportingText`	`RenderFragment?`	A small text snippet at the end of the item.

An overline together with supporting text, or supporting text with more than one child element, makes the row multiline.

Inputs⁠

Input	Type	Description
`disabled`	`boolean`default `false`	Removes the item from the tab and arrow-key order, dims it and ignores the pointer. It sets no `aria-disabled`. See Disabled options, Disabled.
`displayText`	`string`	The text that is displayed in the select field when selected. If not set, defaults to the default slot's text, then the supporting text. The typeahead text is never shown. See Menu content, Display text.
`flipLeadingIconInRtl`	`boolean`default `false`	Flips the leading icon supplied in `leadingIconName` when the text direction is right to left. See Option icons.
`flipTrailingIconInRtl`	`boolean`default `false`	Flips the trailing icon supplied in `trailingIconName` when the text direction is right to left. See Option icons.
`leadingIconName`	`string`	A leading Material Symbols icon name. This is an alternative to the `start` slot. If both are provided, the `start` slot takes precedence. See Option icons.
`selected`	`boolean`default `false`	Marks the option as the select's chosen option; choosing another option clears it. Set it in markup to choose the initial option. See Preselecting.
`trailingIconName`	`string`	A trailing Material Symbols icon name. This is an alternative to the `end` slot. If both are provided, the `end` slot takes precedence. See Option icons.
`value`	`unknown`	The item's value: the parent reports it as its own `value` when this item is chosen. Set from code it can be any value, such as a number or an object; the `value` attribute sets it to a string. See Option values, Forms.

A select option does nothing outside a select. Setting selected from code updates the field and clears the other options.

Content projection⁠

Content	Description
an element with `slot="container"`	Content shown behind the item, such as a background image.
an element with `slot="overline"`	A small text snippet above the headline.
content with no `slot`	The headline/custom content.
an element with `slot="supporting-text"`	Supporting text lines underneath the headline.
an element with `slot="start"`	Any leading content, such as icons, avatars, or checkboxes.
an element with `slot="end"`	Any trailing content, such as icons and buttons.
an element with `slot="trailing-supporting-text"`	A small text snippet at the end of the item.

An overline together with supporting text, or supporting text with more than one child element, makes the row multiline.

Props⁠

Prop	Type	Description
`disabled`	`boolean`default `false`	Removes the item from the tab and arrow-key order, dims it and ignores the pointer. It sets no `aria-disabled`. See Disabled options, Disabled.
`displayText`	`string`	The text that is displayed in the select field when selected. If not set, defaults to the default slot's text, then the supporting text. The typeahead text is never shown. See Menu content, Display text.
`flipLeadingIconInRtl`	`boolean`default `false`	Flips the leading icon supplied in `leadingIconName` when the text direction is right to left. See Option icons.
`flipTrailingIconInRtl`	`boolean`default `false`	Flips the trailing icon supplied in `trailingIconName` when the text direction is right to left. See Option icons.
`leadingIconName`	`string`	A leading Material Symbols icon name. This is an alternative to the `start` slot. If both are provided, the `start` slot takes precedence. See Option icons.
`selected`	`boolean`default `false`	Marks the option as the select's chosen option; choosing another option clears it. Set it in markup to choose the initial option. See Preselecting.
`trailingIconName`	`string`	A trailing Material Symbols icon name. This is an alternative to the `end` slot. If both are provided, the `end` slot takes precedence. See Option icons.
`value`	`unknown`	The item's value: the parent reports it as its own `value` when this item is chosen. Set from code it can be any value, such as a number or an object; the `value` attribute sets it to a string. See Option values, Forms.

A select option does nothing outside a select. Setting selected from code updates the field and clears the other options.

Slots⁠

Slot	Description
`default`	The headline/custom content.
`container`	Content shown behind the item, such as a background image.
`end`	Any trailing content, such as icons and buttons.
`overline`	A small text snippet above the headline.
`start`	Any leading content, such as icons, avatars, or checkboxes.
`supporting-text`	Supporting text lines underneath the headline.
`trailing-supporting-text`	A small text snippet at the end of the item.

An overline together with supporting text, or supporting text with more than one child element, makes the row multiline.

Props⁠

Prop	Type	Description
`disabled`	`boolean`default `false`	Removes the item from the tab and arrow-key order, dims it and ignores the pointer. It sets no `aria-disabled`. See Disabled options, Disabled.
`displayText`	`string`	The text that is displayed in the select field when selected. If not set, defaults to the default slot's text, then the supporting text. The typeahead text is never shown. See Menu content, Display text.
`flipLeadingIconInRtl`	`boolean`default `false`	Flips the leading icon supplied in `leadingIconName` when the text direction is right to left. See Option icons.
`flipTrailingIconInRtl`	`boolean`default `false`	Flips the trailing icon supplied in `trailingIconName` when the text direction is right to left. See Option icons.
`leadingIconName`	`string`	A leading Material Symbols icon name. This is an alternative to the `startSnippet` snippet. If both are provided, the `startSnippet` snippet takes precedence. See Option icons.
`selected`	`boolean`default `false`	Marks the option as the select's chosen option; choosing another option clears it. Set it in markup to choose the initial option. See Preselecting.
`trailingIconName`	`string`	A trailing Material Symbols icon name. This is an alternative to the `endSnippet` snippet. If both are provided, the `endSnippet` snippet takes precedence. See Option icons.
`value`	`unknown`	The item's value: the parent reports it as its own `value` when this item is chosen. Set from code it can be any value, such as a number or an object; the `value` attribute sets it to a string. See Option values, Forms.

A select option does nothing outside a select. Setting selected from code updates the field and clears the other options.

Snippets⁠

Snippet	Description
`containerSnippet`	Content shown behind the item, such as a background image.
`overlineSnippet`	A small text snippet above the headline.
`children`	The headline/custom content.
`supportingTextSnippet`	Supporting text lines underneath the headline.
`startSnippet`	Any leading content, such as icons, avatars, or checkboxes.
`endSnippet`	Any trailing content, such as icons and buttons.
`trailingSupportingTextSnippet`	A small text snippet at the end of the item.

An overline together with supporting text, or supporting text with more than one child element, makes the row multiline.

Select

Select option

Each attribute value has its own tokens; a cell shows its token's value, and selecting the cell shows the token's fallback path, with each name and value ready to copy. For example, the filled column's active-indicator-color row is --ct-field-filled-active-indicator-color, which defaults to --ct-sys-color-on-surface-variant.

Variant⁠

Name	`filled`	`outlined`	`text`
`active-indicator-color`	`--ct-sys-color-on-surface-variant` `--ct-field-filled-active-indicator-color`	—	—
`active-indicator-height`	`1px` `--ct-field-filled-active-indicator-height`	—	—
`bottom-space`	`16px` `--ct-field-filled-bottom-space`	`16px` `--ct-field-outlined-bottom-space`	—
`container-color`	`--ct-sys-color-surface-container-highest` `--ct-field-filled-container-color`	—	—
`container-end-end-radius`	—	`--ct-sys-corner-radius-extra-small` `--ct-field-outlined-container-end-end-radius`	—
`container-end-start-radius`	—	`--ct-sys-corner-radius-extra-small` `--ct-field-outlined-container-end-start-radius`	—
`container-start-end-radius`	`--ct-sys-corner-radius-extra-small` `--ct-field-filled-container-start-end-radius`	`--ct-sys-corner-radius-extra-small` `--ct-field-outlined-container-start-end-radius`	—
`container-start-start-radius`	`--ct-sys-corner-radius-extra-small` `--ct-field-filled-container-start-start-radius`	`--ct-sys-corner-radius-extra-small` `--ct-field-outlined-container-start-start-radius`	—
`content-color`	`--ct-sys-color-on-surface` `--ct-field-filled-content-color`	`--ct-sys-color-on-surface` `--ct-field-outlined-content-color`	`--ct-sys-color-on-surface` `--ct-field-text-content-color`
`content-font`	`--ct-sys-typescale-body-large-font` `--ct-field-filled-content-font`	`--ct-sys-typescale-body-large-font` `--ct-field-outlined-content-font`	`--ct-sys-typescale-body-large-font` `--ct-field-text-content-font`
`content-line-height`	`--ct-sys-typescale-body-large-line-height` `--ct-field-filled-content-line-height`	`--ct-sys-typescale-body-large-line-height` `--ct-field-outlined-content-line-height`	`--ct-sys-typescale-body-large-line-height` `--ct-field-text-content-line-height`
`content-size`	`--ct-sys-typescale-body-large-size` `--ct-field-filled-content-size`	`--ct-sys-typescale-body-large-size` `--ct-field-outlined-content-size`	`--ct-sys-typescale-body-large-size` `--ct-field-text-content-size`
`content-space`	`16px` `--ct-field-filled-content-space`	`16px` `--ct-field-outlined-content-space`	—
`content-tracking`	`--ct-sys-typescale-body-large-tracking` `--ct-field-filled-content-tracking`	`--ct-sys-typescale-body-large-tracking` `--ct-field-outlined-content-tracking`	—
`content-weight`	`--ct-sys-typescale-body-large-weight` `--ct-field-filled-content-weight`	`--ct-sys-typescale-body-large-weight` `--ct-field-outlined-content-weight`	`--ct-sys-typescale-body-large-weight` `--ct-field-text-content-weight`
`label-text-color`	`--ct-sys-color-on-surface-variant` `--ct-field-filled-label-text-color`	`--ct-sys-color-on-surface-variant` `--ct-field-outlined-label-text-color`	—
`label-text-font`	`--ct-sys-typescale-body-large-font` `--ct-field-filled-label-text-font`	`--ct-sys-typescale-body-large-font` `--ct-field-outlined-label-text-font`	—
`label-text-line-height`	`--ct-sys-typescale-body-large-line-height` `--ct-field-filled-label-text-line-height`	`--ct-sys-typescale-body-large-line-height` `--ct-field-outlined-label-text-line-height`	—
`label-text-padding-bottom`	—	`8px` `--ct-field-outlined-label-text-padding-bottom`	—
`label-text-populated-line-height`	`--ct-sys-typescale-body-small-line-height` `--ct-field-filled-label-text-populated-line-height`	`--ct-sys-typescale-body-small-line-height` `--ct-field-outlined-label-text-populated-line-height`	—
`label-text-populated-size`	`--ct-sys-typescale-body-small-size` `--ct-field-filled-label-text-populated-size`	`--ct-sys-typescale-body-small-size` `--ct-field-outlined-label-text-populated-size`	—
`label-text-size`	`--ct-sys-typescale-body-large-size` `--ct-field-filled-label-text-size`	`--ct-sys-typescale-body-large-size` `--ct-field-outlined-label-text-size`	—
`label-text-weight`	`--ct-sys-typescale-body-large-weight` `--ct-field-filled-label-text-weight`	`--ct-sys-typescale-body-large-weight` `--ct-field-outlined-label-text-weight`	—
`leading-content-color`	`--ct-sys-color-on-surface-variant` `--ct-field-filled-leading-content-color`	`--ct-sys-color-on-surface-variant` `--ct-field-outlined-leading-content-color`	—
`leading-content-size`	`24px` `--ct-field-filled-leading-content-size`	`24px` `--ct-field-outlined-leading-content-size`	`24px` `--ct-field-text-leading-content-size`
`leading-space`	`16px` `--ct-field-filled-leading-space`	`16px` `--ct-field-outlined-leading-space`	—
`outline-color`	—	`--ct-sys-color-outline` `--ct-field-outlined-outline-color`	—
`outline-label-padding`	—	`4px` `--ct-field-outlined-outline-label-padding`	—
`outline-width`	—	`1px` `--ct-field-outlined-outline-width`	—
`supporting-text-color`	`--ct-sys-color-on-surface-variant` `--ct-field-filled-supporting-text-color`	`--ct-sys-color-on-surface-variant` `--ct-field-outlined-supporting-text-color`	—
`supporting-text-font`	`--ct-sys-typescale-body-small-font` `--ct-field-filled-supporting-text-font`	`--ct-sys-typescale-body-small-font` `--ct-field-outlined-supporting-text-font`	—
`supporting-text-leading-space`	`16px` `--ct-field-filled-supporting-text-leading-space`	`16px` `--ct-field-outlined-supporting-text-leading-space`	—
`supporting-text-line-height`	`--ct-sys-typescale-body-small-line-height` `--ct-field-filled-supporting-text-line-height`	`--ct-sys-typescale-body-small-line-height` `--ct-field-outlined-supporting-text-line-height`	—
`supporting-text-size`	`--ct-sys-typescale-body-small-size` `--ct-field-filled-supporting-text-size`	`--ct-sys-typescale-body-small-size` `--ct-field-outlined-supporting-text-size`	—
`supporting-text-top-space`	`4px` `--ct-field-filled-supporting-text-top-space`	`4px` `--ct-field-outlined-supporting-text-top-space`	—
`supporting-text-tracking`	`--ct-sys-typescale-body-small-tracking` `--ct-field-filled-supporting-text-tracking`	`--ct-sys-typescale-body-small-tracking` `--ct-field-outlined-supporting-text-tracking`	—
`supporting-text-trailing-space`	`16px` `--ct-field-filled-supporting-text-trailing-space`	`16px` `--ct-field-outlined-supporting-text-trailing-space`	—
`supporting-text-weight`	`--ct-sys-typescale-body-small-weight` `--ct-field-filled-supporting-text-weight`	`--ct-sys-typescale-body-small-weight` `--ct-field-outlined-supporting-text-weight`	—
`top-space`	`16px` `--ct-field-filled-top-space`	`16px` `--ct-field-outlined-top-space`	—
`trailing-content-color`	`--ct-sys-color-on-surface-variant` `--ct-field-filled-trailing-content-color`	`--ct-sys-color-on-surface-variant` `--ct-field-outlined-trailing-content-color`	—
`trailing-content-size`	`24px` `--ct-field-filled-trailing-content-size`	`24px` `--ct-field-outlined-trailing-content-size`	`24px` `--ct-field-text-trailing-content-size`
`trailing-space`	`16px` `--ct-field-filled-trailing-space`	`16px` `--ct-field-outlined-trailing-space`	—
`with-label-bottom-space`	`8px` `--ct-field-filled-with-label-bottom-space`	—	—
`with-label-top-space`	`8px` `--ct-field-filled-with-label-top-space`	—	—
`with-leading-content-leading-space`	`12px` `--ct-field-filled-with-leading-content-leading-space`	`12px` `--ct-field-outlined-with-leading-content-leading-space`	—
`with-trailing-content-trailing-space`	`12px` `--ct-field-filled-with-trailing-content-trailing-space`	`12px` `--ct-field-outlined-with-trailing-content-trailing-space`	—
`hover-active-indicator-color`	`--ct-sys-color-on-surface` `--ct-field-filled-hover-active-indicator-color`	—	—
`hover-active-indicator-height`	`1px` `--ct-field-filled-hover-active-indicator-height`	—	—
`hover-content-color`	`--ct-sys-color-on-surface` `--ct-field-filled-hover-content-color`	`--ct-sys-color-on-surface` `--ct-field-outlined-hover-content-color`	—
`hover-label-text-color`	`--ct-sys-color-on-surface-variant` `--ct-field-filled-hover-label-text-color`	`--ct-sys-color-on-surface-variant` `--ct-field-outlined-hover-label-text-color`	—
`hover-leading-content-color`	`--ct-sys-color-on-surface-variant` `--ct-field-filled-hover-leading-content-color`	`--ct-sys-color-on-surface-variant` `--ct-field-outlined-hover-leading-content-color`	—
`hover-outline-color`	—	`--ct-sys-color-on-surface` `--ct-field-outlined-hover-outline-color`	—
`hover-outline-width`	—	`1px` `--ct-field-outlined-hover-outline-width`	—
`hover-state-layer-color`	`--ct-sys-color-on-surface` `--ct-field-filled-hover-state-layer-color`	`--ct-sys-color-on-surface` `--ct-field-outlined-hover-state-layer-color`	—
`hover-state-layer-opacity`	`--ct-sys-state-hover-state-layer-opacity` `--ct-field-filled-hover-state-layer-opacity`	`--ct-sys-state-hover-state-layer-opacity` `--ct-field-outlined-hover-state-layer-opacity`	—
`hover-supporting-text-color`	`--ct-sys-color-on-surface-variant` `--ct-field-filled-hover-supporting-text-color`	`--ct-sys-color-on-surface-variant` `--ct-field-outlined-hover-supporting-text-color`	—
`hover-trailing-content-color`	`--ct-sys-color-on-surface-variant` `--ct-field-filled-hover-trailing-content-color`	`--ct-sys-color-on-surface-variant` `--ct-field-outlined-hover-trailing-content-color`	—
`focus-active-indicator-color`	`--ct-sys-color-primary` `--ct-field-filled-focus-active-indicator-color`	—	—
`focus-active-indicator-height`	`3px` `--ct-field-filled-focus-active-indicator-height`	—	—
`focus-content-color`	`--ct-sys-color-on-surface` `--ct-field-filled-focus-content-color`	`--ct-sys-color-on-surface` `--ct-field-outlined-focus-content-color`	—
`focus-label-text-color`	`--ct-sys-color-primary` `--ct-field-filled-focus-label-text-color`	`--ct-sys-color-primary` `--ct-field-outlined-focus-label-text-color`	—
`focus-leading-content-color`	`--ct-sys-color-on-surface-variant` `--ct-field-filled-focus-leading-content-color`	`--ct-sys-color-on-surface-variant` `--ct-field-outlined-focus-leading-content-color`	—
`focus-outline-color`	—	`--ct-sys-color-primary` `--ct-field-outlined-focus-outline-color`	`--ct-sys-color-primary` `--ct-field-text-focus-outline-color`
`focus-outline-width`	—	`2px` `--ct-field-outlined-focus-outline-width`	`2px` `--ct-field-text-focus-outline-width`
`focus-supporting-text-color`	`--ct-sys-color-on-surface-variant` `--ct-field-filled-focus-supporting-text-color`	`--ct-sys-color-on-surface-variant` `--ct-field-outlined-focus-supporting-text-color`	—
`focus-trailing-content-color`	`--ct-sys-color-on-surface-variant` `--ct-field-filled-focus-trailing-content-color`	`--ct-sys-color-on-surface-variant` `--ct-field-outlined-focus-trailing-content-color`	—
`disabled-active-indicator-color`	`--ct-sys-color-on-surface` `--ct-field-filled-disabled-active-indicator-color`	—	—
`disabled-active-indicator-height`	`1px` `--ct-field-filled-disabled-active-indicator-height`	—	—
`disabled-active-indicator-opacity`	`0.38` `--ct-field-filled-disabled-active-indicator-opacity`	—	—
`disabled-container-color`	`--ct-sys-color-on-surface` `--ct-field-filled-disabled-container-color`	—	—
`disabled-container-opacity`	`0.04` `--ct-field-filled-disabled-container-opacity`	—	—
`disabled-content-color`	`--ct-sys-color-on-surface` `--ct-field-filled-disabled-content-color`	`--ct-sys-color-on-surface` `--ct-field-outlined-disabled-content-color`	`--ct-sys-color-on-surface` `--ct-field-text-disabled-content-color`
`disabled-content-opacity`	`0.38` `--ct-field-filled-disabled-content-opacity`	`0.38` `--ct-field-outlined-disabled-content-opacity`	`0.38` `--ct-field-text-disabled-content-opacity`
`disabled-label-text-color`	`--ct-sys-color-on-surface` `--ct-field-filled-disabled-label-text-color`	`--ct-sys-color-on-surface` `--ct-field-outlined-disabled-label-text-color`	—
`disabled-label-text-opacity`	`0.38` `--ct-field-filled-disabled-label-text-opacity`	`0.38` `--ct-field-outlined-disabled-label-text-opacity`	—
`disabled-leading-content-color`	`--ct-sys-color-on-surface` `--ct-field-filled-disabled-leading-content-color`	`--ct-sys-color-on-surface` `--ct-field-outlined-disabled-leading-content-color`	—
`disabled-leading-content-opacity`	`0.38` `--ct-field-filled-disabled-leading-content-opacity`	`0.38` `--ct-field-outlined-disabled-leading-content-opacity`	—
`disabled-outline-color`	—	`--ct-sys-color-on-surface` `--ct-field-outlined-disabled-outline-color`	—
`disabled-outline-opacity`	—	`0.12` `--ct-field-outlined-disabled-outline-opacity`	—
`disabled-outline-width`	—	`1px` `--ct-field-outlined-disabled-outline-width`	—
`disabled-supporting-text-color`	`--ct-sys-color-on-surface` `--ct-field-filled-disabled-supporting-text-color`	`--ct-sys-color-on-surface` `--ct-field-outlined-disabled-supporting-text-color`	—
`disabled-supporting-text-opacity`	`0.38` `--ct-field-filled-disabled-supporting-text-opacity`	`0.38` `--ct-field-outlined-disabled-supporting-text-opacity`	—
`disabled-trailing-content-color`	`--ct-sys-color-on-surface` `--ct-field-filled-disabled-trailing-content-color`	`--ct-sys-color-on-surface` `--ct-field-outlined-disabled-trailing-content-color`	—
`disabled-trailing-content-opacity`	`0.38` `--ct-field-filled-disabled-trailing-content-opacity`	`0.38` `--ct-field-outlined-disabled-trailing-content-opacity`	—
`error-active-indicator-color`	`--ct-sys-color-error` `--ct-field-filled-error-active-indicator-color`	—	—
`error-content-color`	`--ct-sys-color-on-surface` `--ct-field-filled-error-content-color`	`--ct-sys-color-on-surface` `--ct-field-outlined-error-content-color`	`--ct-sys-color-on-surface` `--ct-field-text-error-content-color`
`error-focus-active-indicator-color`	`--ct-sys-color-error` `--ct-field-filled-error-focus-active-indicator-color`	—	—
`error-focus-content-color`	`--ct-sys-color-on-surface` `--ct-field-filled-error-focus-content-color`	`--ct-sys-color-on-surface` `--ct-field-outlined-error-focus-content-color`	—
`error-focus-label-text-color`	`--ct-sys-color-error` `--ct-field-filled-error-focus-label-text-color`	`--ct-sys-color-error` `--ct-field-outlined-error-focus-label-text-color`	—
`error-focus-leading-content-color`	`--ct-sys-color-on-surface-variant` `--ct-field-filled-error-focus-leading-content-color`	`--ct-sys-color-on-surface-variant` `--ct-field-outlined-error-focus-leading-content-color`	—
`error-focus-outline-color`	—	`--ct-sys-color-error` `--ct-field-outlined-error-focus-outline-color`	—
`error-focus-supporting-text-color`	`--ct-sys-color-error` `--ct-field-filled-error-focus-supporting-text-color`	`--ct-sys-color-error` `--ct-field-outlined-error-focus-supporting-text-color`	—
`error-focus-trailing-content-color`	`--ct-sys-color-error` `--ct-field-filled-error-focus-trailing-content-color`	`--ct-sys-color-error` `--ct-field-outlined-error-focus-trailing-content-color`	—
`error-hover-active-indicator-color`	`--ct-sys-color-on-error-container` `--ct-field-filled-error-hover-active-indicator-color`	—	—
`error-hover-content-color`	`--ct-sys-color-on-surface` `--ct-field-filled-error-hover-content-color`	`--ct-sys-color-on-surface` `--ct-field-outlined-error-hover-content-color`	—
`error-hover-label-text-color`	`--ct-sys-color-on-error-container` `--ct-field-filled-error-hover-label-text-color`	`--ct-sys-color-on-error-container` `--ct-field-outlined-error-hover-label-text-color`	—
`error-hover-leading-content-color`	`--ct-sys-color-on-surface-variant` `--ct-field-filled-error-hover-leading-content-color`	`--ct-sys-color-on-surface-variant` `--ct-field-outlined-error-hover-leading-content-color`	—
`error-hover-outline-color`	—	`--ct-sys-color-on-error-container` `--ct-field-outlined-error-hover-outline-color`	—
`error-hover-state-layer-color`	`--ct-sys-color-on-surface` `--ct-field-filled-error-hover-state-layer-color`	—	—
`error-hover-state-layer-opacity`	`--ct-sys-state-hover-state-layer-opacity` `--ct-field-filled-error-hover-state-layer-opacity`	—	—
`error-hover-supporting-text-color`	`--ct-sys-color-on-error-container` `--ct-field-filled-error-hover-supporting-text-color`	`--ct-sys-color-on-error-container` `--ct-field-outlined-error-hover-supporting-text-color`	—
`error-hover-trailing-content-color`	`--ct-sys-color-on-error-container` `--ct-field-filled-error-hover-trailing-content-color`	`--ct-sys-color-on-error-container` `--ct-field-outlined-error-hover-trailing-content-color`	—
`error-label-text-color`	`--ct-sys-color-error` `--ct-field-filled-error-label-text-color`	`--ct-sys-color-error` `--ct-field-outlined-error-label-text-color`	—
`error-leading-content-color`	`--ct-sys-color-on-surface-variant` `--ct-field-filled-error-leading-content-color`	`--ct-sys-color-on-surface-variant` `--ct-field-outlined-error-leading-content-color`	—
`error-outline-color`	—	`--ct-sys-color-error` `--ct-field-outlined-error-outline-color`	—
`error-supporting-text-color`	`--ct-sys-color-error` `--ct-field-filled-error-supporting-text-color`	`--ct-sys-color-error` `--ct-field-outlined-error-supporting-text-color`	—
`error-trailing-content-color`	`--ct-sys-color-error` `--ct-field-filled-error-trailing-content-color`	`--ct-sys-color-error` `--ct-field-outlined-error-trailing-content-color`	—

A value is what the token defaults to; selecting it copies the token's name.

Tokens⁠

Names and states⁠

A screen reader announces the select as a combobox that opens a listbox menu, as described in the WAI-ARIA Authoring Practices: Select-Only Combobox Example.

The select takes its name from its aria-label. A text variant falls back to label when there is no aria-label.
A filled or outlined select is not named by label. Set aria-label to the same words as label.
The menu takes its name from label, or from aria-label when there is no label.
aria-label is the only ARIA attribute that changes what a screen reader announces. Any other aria-* attribute you set has no effect.
The select is announced as expanded while the menu is open and as collapsed otherwise, and the description is announced with it.
The description is error-text while error is set and the text is not empty, and supporting-text otherwise.
A disabled select is announced as dimmed or unavailable.
Each option is announced as a menu item, not as a listbox option; set role="option" on an option for that announcement. An option takes its name from its aria-label, or else its default slot text, and display-text changes only what the field shows.
A change to an option's selected after the first render is announced; an option selected in markup is not announced as selected when the page loads.
An option that holds only an icon has no text for a name: give it an aria-label.
Mark a decorative icon in a slot aria-hidden="true", so it adds nothing to what a screen reader announces.
For a short list the reader should see in full, a radio button group suits the job better.

Keyboard and focus⁠

Key	Action
Tab	Moves focus to the field
Enter, Space, Down Arrow, Up Arrow, Home	Opens the menu and focuses the selected option, or the first option when none is selected
End	Opens the menu and starts at the last option, or at the match while a search is under way
A printable character	With the menu closed, selects the first option whose text matches the typed letters; Space is part of the typed text while a search is under way
Down Arrow, Up Arrow	With the menu open, moves between options without wrapping at the ends
Enter, Space	With the menu open, selects the focused option, then closes the menu
Escape	With the menu open, closes it without changing the selection

The select handles all of these keys itself, so they work the same in every browser.

Typed letters count as one search until typeahead-delay passes without a key.
An opening key pressed during a search opens the menu on the matching option, and the search goes on there: letters typed next, even while the menu is still opening, extend it. A click opens the menu with a fresh search.
Typeahead matches the start of an option's aria-label when it has one, or its slot text, and never a disabled option. The field always shows the option's visible text.
The field shows a focus ring on keyboard focus.
disabled removes the field from the Tab order, and on an option it stops the row taking focus or a click.
An option shows a focus ring inside its edge on keyboard focus.
Focus leaving the select and its menu closes the menu.

Pointer and touch⁠

The whole field opens the menu, and the select is at least 210 pixels wide.
A click on an option selects it and closes the menu. A one-line option is 56 pixels tall by default.
The field's height changes with density. Check the height you choose against the 24 by 24 pixel minimum of WCAG 2.5.8; the density example shows each step.

Display settings⁠

Forced colors: the text variant draws its focus ring in Highlight, and a disabled text variant uses GrayText at full opacity. The selected option gets a 3 pixel double border in the text color, and a disabled option takes GrayText.
Reduced motion: the arrow's rotation and the animation still run when a reader asks for less motion. Set animation to none to stop them.
Right-to-left: the trailing arrow turns the opposite way when the menu opens. An option's icons mirror only where you set a flip member on it.

Standards⁠

With its defaults, the select meets two WCAG 2.2 success criteria:

2.1.1 Keyboard (A)
2.4.7 Focus Visible (AA)

Five more depend on how you use it:

1.1.1 Non-text Content (A): mark a decorative icon or image in a slot aria-hidden="true", or give a meaningful one a text alternative.
2.5.8 Target Size (Minimum) (AA): check the field's height at the density you choose against 24 by 24 pixels.
3.3.1 Error Identification (A): set error with an error-text that says what is wrong.
3.3.2 Labels or Instructions (A): set label, and supporting-text where the choice needs explaining.
4.1.2 Name, Role, Value (A): set aria-label on every select, and on an option that holds only an icon.

Token	Value
`--ct-menu-item-bottom-space`	`12px` `--ct-menu-item-bottom-space`
`--ct-menu-item-container-color`	`transparent` `--ct-menu-item-container-color`
`--ct-menu-item-disabled-opacity`	`0.38` `--ct-menu-item-disabled-opacity`
`--ct-menu-item-hover-state-layer-color`	`--ct-sys-color-on-surface` `--ct-menu-item-hover-state-layer-color`
`--ct-menu-item-hover-state-layer-opacity`	`--ct-sys-state-hover-state-layer-opacity` `--ct-menu-item-hover-state-layer-opacity`
`--ct-menu-item-label-text-color`	`--ct-sys-color-on-surface` `--ct-menu-item-label-text-color`
`--ct-menu-item-label-text-font`	`--ct-sys-typescale-body-large-font` `--ct-menu-item-label-text-font`
`--ct-menu-item-label-text-line-height`	`--ct-sys-typescale-body-large-line-height` `--ct-menu-item-label-text-line-height`
`--ct-menu-item-label-text-size`	`--ct-sys-typescale-body-large-size` `--ct-menu-item-label-text-size`
`--ct-menu-item-label-text-tracking`	`--ct-sys-typescale-body-large-tracking` `--ct-menu-item-label-text-tracking`
`--ct-menu-item-label-text-weight`	`--ct-sys-typescale-body-large-weight` `--ct-menu-item-label-text-weight`
`--ct-menu-item-leading-icon-color`	`--ct-sys-color-on-surface-variant` `--ct-menu-item-leading-icon-color`
`--ct-menu-item-leading-icon-size`	`24px` `--ct-menu-item-leading-icon-size`
`--ct-menu-item-leading-space`	`16px` `--ct-menu-item-leading-space`
`--ct-menu-item-one-line-container-height`	`56px` `--ct-menu-item-one-line-container-height`
`--ct-menu-item-overline-color`	`--ct-sys-color-on-surface-variant` `--ct-menu-item-overline-color`
`--ct-menu-item-overline-font`	`--ct-sys-typescale-label-small-font` `--ct-menu-item-overline-font`
`--ct-menu-item-overline-line-height`	`--ct-sys-typescale-label-small-line-height` `--ct-menu-item-overline-line-height`
`--ct-menu-item-overline-size`	`--ct-sys-typescale-label-small-size` `--ct-menu-item-overline-size`
`--ct-menu-item-overline-tracking`	`--ct-sys-typescale-label-small-tracking` `--ct-menu-item-overline-tracking`
`--ct-menu-item-overline-weight`	`--ct-sys-typescale-label-small-weight` `--ct-menu-item-overline-weight`
`--ct-menu-item-pressed-state-layer-color`	`--ct-sys-color-on-surface` `--ct-menu-item-pressed-state-layer-color`
`--ct-menu-item-pressed-state-layer-opacity`	`--ct-sys-state-pressed-state-layer-opacity` `--ct-menu-item-pressed-state-layer-opacity`
`--ct-menu-item-selected-container-color`	`--ct-sys-color-secondary-container` `--ct-menu-item-selected-container-color`
`--ct-menu-item-selected-label-text-color`	`--ct-sys-color-on-secondary-container` `--ct-menu-item-selected-label-text-color`
`--ct-menu-item-supporting-text-color`	`--ct-sys-color-on-surface-variant` `--ct-menu-item-supporting-text-color`
`--ct-menu-item-supporting-text-font`	`--ct-sys-typescale-body-medium-font` `--ct-menu-item-supporting-text-font`
`--ct-menu-item-supporting-text-line-height`	`--ct-sys-typescale-body-medium-line-height` `--ct-menu-item-supporting-text-line-height`
`--ct-menu-item-supporting-text-size`	`--ct-sys-typescale-body-medium-size` `--ct-menu-item-supporting-text-size`
`--ct-menu-item-supporting-text-tracking`	`--ct-sys-typescale-body-medium-tracking` `--ct-menu-item-supporting-text-tracking`
`--ct-menu-item-supporting-text-weight`	`--ct-sys-typescale-body-medium-weight` `--ct-menu-item-supporting-text-weight`
`--ct-menu-item-top-space`	`12px` `--ct-menu-item-top-space`
`--ct-menu-item-trailing-icon-color`	`--ct-sys-color-on-surface-variant` `--ct-menu-item-trailing-icon-color`
`--ct-menu-item-trailing-icon-size`	`24px` `--ct-menu-item-trailing-icon-size`
`--ct-menu-item-trailing-space`	`16px` `--ct-menu-item-trailing-space`
`--ct-menu-item-trailing-supporting-text-color`	`--ct-sys-color-on-surface-variant` `--ct-menu-item-trailing-supporting-text-color`
`--ct-menu-item-trailing-supporting-text-font`	`--ct-sys-typescale-label-small-font` `--ct-menu-item-trailing-supporting-text-font`
`--ct-menu-item-trailing-supporting-text-line-height`	`--ct-sys-typescale-label-small-line-height` `--ct-menu-item-trailing-supporting-text-line-height`
`--ct-menu-item-trailing-supporting-text-size`	`--ct-sys-typescale-label-small-size` `--ct-menu-item-trailing-supporting-text-size`
`--ct-menu-item-trailing-supporting-text-tracking`	`--ct-sys-typescale-label-small-tracking` `--ct-menu-item-trailing-supporting-text-tracking`
`--ct-menu-item-trailing-supporting-text-weight`	`--ct-sys-typescale-label-small-weight` `--ct-menu-item-trailing-supporting-text-weight`

Select

Reference docs⁠link

Choosing a selection control⁠link

Choosing a variant⁠link

Built in⁠link

Hidden content renders when first shown⁠link

Using selects well⁠link

Theming fields⁠link

Variants⁠link

Labels and errors⁠link

Icons⁠link

Badges⁠link

Menu content⁠link

Row content⁠link

Option icons⁠link

Display text⁠link

Preselecting⁠link

Option values⁠link

Disabled options⁠link

Forms⁠link

Disabled⁠link

Animation⁠link

Density⁠link

Properties⁠link

Slots⁠link

Events⁠link

Methods⁠link

Props⁠link

Children⁠link

Events⁠link

Methods⁠link

Parameters⁠link

Render fragments⁠link

Event callbacks⁠link

Inputs⁠link

Content projection⁠link

Outputs⁠link

Props⁠link

Slots⁠link

Events⁠link

Props⁠link

Snippets⁠link

Events⁠link

Properties⁠link

Slots⁠link

Props⁠link

Children⁠link

Parameters⁠link

Render fragments⁠link

Inputs⁠link

Content projection⁠link

Props⁠link

Slots⁠link

Props⁠link

Snippets⁠link

Variant⁠link

Tokens⁠link

Names and states⁠link

Keyboard and focus⁠link

Pointer and touch⁠link

Display settings⁠link

Standards⁠link

Reference docs⁠

Choosing a selection control⁠

Choosing a variant⁠

Built in⁠

Hidden content renders when first shown⁠

Using selects well⁠

Theming fields⁠

Variants⁠

Labels and errors⁠

Icons⁠

Badges⁠

Menu content⁠

Row content⁠

Option icons⁠

Display text⁠

Preselecting⁠

Option values⁠

Disabled options⁠

Forms⁠

Disabled⁠

Animation⁠

Density⁠

Properties⁠

Slots⁠

Events⁠

Methods⁠

Props⁠

Children⁠

Events⁠

Methods⁠

Parameters⁠

Render fragments⁠

Event callbacks⁠

Inputs⁠

Content projection⁠

Outputs⁠

Props⁠

Slots⁠

Events⁠

Props⁠

Snippets⁠

Events⁠

Properties⁠

Slots⁠

Props⁠

Children⁠

Parameters⁠

Render fragments⁠

Inputs⁠

Content projection⁠

Props⁠

Slots⁠

Props⁠

Snippets⁠

Variant⁠

Tokens⁠

Names and states⁠

Keyboard and focus⁠

Pointer and touch⁠

Display settings⁠

Standards⁠