# Select [component-header:sl-select] ```html preview Option 1 Option 2 Option 3 Option 4 Option 5 Option 6 ``` ```jsx react import { SlDivider, SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react'; const App = () => ( Option 1 Option 2 Option 3 Option 4 Option 5 Option 6 ); ``` ?> This component works with standard `
` elements. Please refer to the section on [form controls](/getting-started/form-controls) to learn more about form submission and client-side validation. ## Examples ### Labels Use the `label` attribute to give the select an accessible label. For labels that contain HTML, use the `label` slot instead. ```html preview Option 1 Option 2 Option 3 ``` ```jsx react import { SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react'; const App = () => ( Option 1 Option 2 Option 3 ); ``` ### Help Text Add descriptive help text to a select with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead. ```html preview Novice Intermediate Advanced ``` ```jsx react import { SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react'; const App = () => ( Novice Intermediate Advanced ); ``` ### Placeholders Use the `placeholder` attribute to add a placeholder. ```html preview Option 1 Option 2 Option 3 ``` ```jsx react import { SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react'; const App = () => ( Option 1 Option 2 Option 3 ); ``` ### Clearable Use the `clearable` attribute to make the control clearable. ```html preview Option 1 Option 2 Option 3 ``` ```jsx react import { SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react'; const App = () => ( Option 1 Option 2 Option 3 ); ``` ### Filled Selects Add the `filled` attribute to draw a filled select. ```html preview Option 1 Option 2 Option 3 ``` ```jsx react import { SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react'; const App = () => ( Option 1 Option 2 Option 3 ); ``` ### Pill Use the `pill` attribute to give selects rounded edges. ```html preview Option 1 Option 2 Option 3 ``` ```jsx react import { SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react'; const App = () => ( Option 1 Option 2 Option 3 ); ``` ### Disabled Use the `disabled` attribute to disable a select. ```html preview Option 1 Option 2 Option 3 ``` ```jsx react import { SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react'; const App = () => ( Option 1 Option 2 Option 3 ); ``` ### Setting the Selection Use the `value` attribute to set the current selection. When users interact with the control, its `value` will update to reflect the newly selected menu item's value. Note that the value must be an array when using the [`multiple`](#multiple) option. ```html preview Option 1 Option 2 Option 3 ``` ```jsx react import { SlDivider, SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react'; const App = () => ( Option 1 Option 2 Option 3 ); ``` ### Setting the Selection Imperatively To programmatically set the selection, update the `value` property as shown below. Note that the value must be an array when using the [`multiple`](#multiple) option. ```html preview
Option 1 Option 2 Option 3
Set 1 Set 2 Set 3
``` ```jsx react import { useState } from 'react'; import { SlButton, SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react'; const App = () => { const [value, setValue] = useState('option-1'); return ( <> setValue(event.target.value)}> Option 1 Option 2 Option 3
setValue('option-1')}>Set 1 setValue('option-2')}>Set 2 setValue('option-3')}>Set 3 ); }; ``` ### Multiple To allow multiple options to be selected, use the `multiple` attribute. With this option, `value` will be an array of strings instead of a string. It's a good practice to use `clearable` when this option is enabled. ```html preview Option 1 Option 2 Option 3 Option 4 Option 5 Option 6 ``` ```jsx react import { SlDivider, SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react'; const App = () => ( Option 1 Option 2 Option 3 Option 4 Option 5 Option 6 ); ``` ?> When using the `multiple` option, the value will be an array instead of a string. You may need to [set the selection imperatively](#setting-the-selection-imperatively) unless you're using a framework that supports binding properties declaratively. ### Grouping Options Options can be grouped visually using menu labels and dividers. ```html preview Group 1 Option 1 Option 2 Option 3 Group 2 Option 4 Option 5 Option 6 ``` ```jsx react import { SlDivider, SlMenuItem, SlMenuLabel, SlSelect } from '@shoelace-style/shoelace/dist/react'; const App = () => ( Group 1 Option 1 Option 2 Option 3 Group 2 Option 4 Option 5 Option 6 ); ``` ### Sizes Use the `size` attribute to change a select's size. ```html preview Option 1 Option 2 Option 3
Option 1 Option 2 Option 3
Option 1 Option 2 Option 3 ``` ```jsx react import { SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react'; const App = () => ( <> Option 1 Option 2 Option 3
Option 1 Option 2 Option 3
Option 1 Option 2 Option 3 ); ``` ### Placement The preferred placement of the select's menu can be set with the `placement` attribute. Note that the actual position may vary to ensure the panel remains in the viewport. Valid placements are `top` and `bottom`. ```html preview Option 1 Option 2 Option 3 ``` ```jsx react import { SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react'; const App = () => ( Option 1 Option 2 Option 3 ); ``` ### Prefix & Suffix Icons Use the `prefix` and `suffix` slots to add icons. ```html preview Option 1 Option 2 Option 3
Option 1 Option 2 Option 3
Option 1 Option 2 Option 3 ``` ```jsx react import { SlIcon, SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react'; const App = () => ( <> Option 1 Option 2 Option 3
Option 1 Option 2 Option 3
Option 1 Option 2 Option 3 ); ``` [component-metadata:sl-select]