Select

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.

UsageCodeAccessibility
BiologyMathematicsEnglishMusicGeographyHistoryPhysicsChemistry
  <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>
    ...
  </sl-select>

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.

Anatomy

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

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.

Label

ItemOptionsDescription
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

ItemOptionsDescription
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
ItemOptionsDescription
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

Hint

ItemOptionsDescription
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

ItemOptionsDescription
Focus ringbooleanTo display the focus state of the select.
Interactive example