A select component allows users to choose from a predefined list of options. You can click or tap on it, and it reveals a list of options and you can select the option that aligns with your preference.

  <sl-select value="2" style="inline-size: 20rem;">
    <sl-select-option value="1">Biology</sl-select-option>
    <sl-select-option value="2">Mathematics</sl-select-option>
    <sl-select-option value="3">English</sl-select-option>

When to use

Use the select component when you need users to select from a predefined list of more than five options. Whether it’s choosing a country, a language, or a course, a select dropdown keeps things organized and user-friendly.

Filtering and sorting options

When designing search interfaces or data tables, consider using select components for filtering or sorting. These components allow users to narrow down search results based on specific criteria. For instance, teachers can filter pupils by grade level or sort the results by relevance or class.

When not to use

Fewer total options

If you’re dealing with less than 5 options, use radio buttons instead of a select component. Radio buttons are more straightforward for a limited set of options.

As a menu

Avoid using the select component as a menu. Its primary purpose is to display a list of options. If you need to present a list of actions, consider using a menu component specifically designed for that purpose.


1LabelDescribes the input categoryyes
2Select fieldContains optional placeholder text, which is replaced by the selectionno
3HintInformative messageyes
4Dropdown panelShows a list of optionsno

Figma Options

With these options, you can tweak the appearance of the select in Figma. They are available in the Design Panel so you can compose the select to exactly fit the user experience need for the use case you are working on.


LabelbooleanTo display a label.
Sizesm md lgThe label come in three sizes small, medium (default) and large.
DisabledbooleanTo show the disabled state of the label.
RequiredbooleanIndicates if it is requiered to select an option.
OptionalbooleanIndicates if it is optional to select an option.
InfobooleanTo show a info icon with tooltip after the label.
TextvalueTo insert the text of the label.

Select box

Sizemd lgThe select box come in two sizes; medium (default) and large
Variantdefault valid invalidIndicates the variant of the select box
Stateidle hover active disabledIndicates the state of the select box
Filledempty filled placeholderTo indicate the select is filled or shows a placeholder text
Default valuevalueTo insert the default text of the placeholder
Menu openbooleanDisplays the dropdown panel
Positiontop bottomIndicates the position of the dropdown panel
Sizemd lgDescription
Pre selected itemdefault 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15Indicates the pre selected item from the list


HintbooleanTo display the hint.
Sizesm md lgThe hint come in three sizes small, medium (default) and large.
Statedefault disabled invalidTo indicate the state of the hint.
IconbooleanDisplays an icon in front of the hint.
TextvalueTo insert the text of the hint.

Focus ring

Focus ringbooleanTo display the focus state of the select.
EnglishGermanFrenchSpanishChineseMusicBiologyChemistryPhysicsComputer Science
  <sl-select-option-group heading="Languages">
  <sl-select-option-group heading="Science">

Select option group API

Select option group component provides properties to define the experience in different use cases, and it is a kind of wrapper for multiple select options, can be used optionally to improve readability.


headingheadingstring | undefinedThe heading for the group.


defaultList of `sl-select-option` elements

Select option API

Select option component offers settings for various scenarios, and it is a part of the select component representing each selectable element.


disableddisabledboolean | undefinedWhether the option item is disabled.
selectedselectedboolean | undefinedWhether the option item is selected.
valuevalueT | undefinedThe value for the option item, to be used in forms.

Select API

Select component has a range of properties, attributes etc. to define the experience in different use cases, and it can be used as the replacement of the HTML native select element.


button-SelectButtonThe button in the light DOM.
customValiditycustom-validitystring | undefinedThe error message to display when the control is invalid.
dirty-booleanfalseA control is dirty if the user has changed the value in the UI.
disableddisabledboolean | undefinedWhether the select is disabled; when set no interaction is possible.
form-HTMLFormElement | nullThe form associated with the control.
formValue-unknownThe value used when submitting the form.
labels-`NodeListOf<HTMLLabelElement>` | nullThe labels associated with the control.
listbox-HTMLElementThe listbox element.
namenamestring | undefinedThe name of the form control.
nativeFormValue-FormValueReturns the form value as used in a native `<form>`. This is always a string, File, FormData or null.
offset-number6The default offset of the listbox to the button.
placeholderplaceholderstring | undefinedThe placeholder text to show when no option is chosen.
requiredrequiredboolean | undefinedWhether the select is a required field.
rootMarginTophide-margin-topnumber0The number of pixels from the top of the viewport the select should be hidden on scroll.
Use this when there is a sticky header you don't want dropdowns to fall on top of.
showValidshow-validbooleanfalseWhen set will cause the control to show it is valid after reportValidity is called.
showValidityshow-validity'valid' | 'invalid' | undefinedWhether to show the validity state.
sizesize'md' | 'lg''md'The size of the select.
touched-booleanfalseA control is marked touched once the user has triggered a blur event on it.
valid-booleanReturns whether the form control is valid or not.
validationMessage-stringString representing a localized (by the browser) message that describes the validation
constraints that the control does not satisfy (if any). The string is empty if the control
is not a candidate for constraint validation, or it satisfies its constraints.

For true localization, see `getLocalizedValidationMessage()` instead.
validity-ValidityStateReturns the validity state the control is in.
validityState-'valid' | 'invalid' | 'pending'Returns the current validity state.
valuevalueunknown | undefinedThe value for the select, to be used in forms.
viewportMargin-number8The default margin between the tooltip and the viewport.


reportValiditybooleanReturns whether the control is valid. If the control is invalid, calling this will
also cause an `invalid` event to be dispatched. After calling this, the control
will also report the validity to the user.
getLocalizedValidationMessagestringThis returns a localized validation message. It does not support all `ValidityState` properties,
since some require more context than we have here. If you need to support more, you can override
this method in your own form control.
setCustomValiditymessage: string | Promise<string>voidSets a custom validation message for the form control. If the message
is not an empty string, that will make the control invalid. By setting it to
an empty string again, you can make the control valid again.


NameEvent typeDescription
sl-blurSlBlurEventEmits when the focus leaves the component.
sl-changeSlChangeEvent<T | undefined>Emits when the value changes.
sl-focusSlFocusEventEmits when the component gains focus.
sl-form-controlSlFormControlEventEmits when the form control is added to the DOM.
sl-update-stateSlUpdateStateEventEmits when the UI state (dirty, pristine, touched or untouched) of the form control changes.
sl-update-validitySlUpdateValidityEventEmits when the validity of the form control changes.
sl-validateSlValidateEventEmits when the form control can be validated.


defaultPlace for `sl-select-option` elements

Keyboard interactions

TabWhen focus is outside the select, moves focus to the input container.
Space/EnterOpens/closes the select panel
Arrow KeysOnce you are in the opened select panel you can navigate to the next option by using the right or down arrow key. You can navigate back to the previous option with left or up. The focus indicator loops, so when you are at the last option and press "down" it will focus on the first option.
HomeWhen focus is inside the select panel, moves to the first available option item in the select panel
EndWhen focus is inside the select panel, moves to the last available option item in the select panel


WAI-ARIA Roles, States, and Properties for a select component provide essential information to assistive technologies and screen readers. They convey the select component's role, and additional properties to ensure accessibility and a better user experience for individuals using assistive technology.


AttributeValueDescriptionUser suppliedSpecifies whether the attribute is always set in the component (no) or it needs to be provided by the developer (yes)
role'combobox'Identifies the select-button as a
role'listbox'Identifies the list of options as a
aria-expandedbooleanSet to true if the listbox (list of options) is visible, false if it is
aria-activedescendantstringWhen a select option in the listbox is visually indicated as having keyboard focus, refers to that option (by id) or when it is already
aria-labelstringDefines a string that labels the action that will be performed when the user interacts with the select. Needs to be added when the select is not wrapped with sl-form-field and there is no sl-label.yes
aria-labelledbystringUsed to connect with single header/element that describes the select, when there is no label connected to.yes

Select option group

AttributeValueDescriptionUser supplied
role'group'Identifies the select-option-group as a
aria-labelstringString that labels the select options group. Same as heading string by default. When there is no heading please add your own aria-label
aria-labelledbystringCan be used to connect with single header/element that describes the select group, when there is no label/heading connected to.yes

Select option

AttributeValueDescriptionUser supplied
role'option'Identifies the select-option as an option, which is a part of the listbox/
aria-disabledbooleanAnnounces the select option as disabled with a screen reader when there is a disabled attribute
aria-selectedbooleanSet to true when a select option is
Interactive example