# Select [component-header:sl-select] ```html preview Option 1 Option 2 Option 3 Option 4 Option 5 Option 6 ``` ```jsx react import { SlOption, 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 { SlOption, 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 { SlOption, 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 { SlOption, 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. The clear button only appears when an option is selected. ```html preview Option 1 Option 2 Option 3 ``` ```jsx react import { SlOption, 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 { SlOption, 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 { SlOption, 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 { SlOption, 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. ```html preview Option 1 Option 2 Option 3 ``` ```jsx react import { SlDivider, SlOption, 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. ```html preview
Option 1 Option 2 Option 3
Set 1 Set 2 Set 3
``` ```jsx react import { useState } from 'react'; import { SlButton, SlOption, 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 TODO ### Grouping Options TODO ### 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 { SlOption, 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 { SlOption, SlSelect } from '@shoelace-style/shoelace/dist/react'; const App = () => ( Option 1 Option 2 Option 3 ); ``` ### Prefix Icons Use the `prefix` slot to add an icon. ```html preview Option 1 Option 2 Option 3
Option 1 Option 2 Option 3
Option 1 Option 2 Option 3 ``` ```jsx react import { SlIcon, SlOption, 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]