# Select
[component-header:sl-select]
Selects allow you to choose one or more items from a dropdown menu.
```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 doesn't work with standard forms. Use [``](/components/form) instead.
## Examples
### 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
);
```
### Multiple
To allow multiple options to be selected, use the `multiple` attribute. It's a good practice to use `clearable` when this option is enabled. When using this option, `value` will be an array instead of a string.
```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
);
```
### 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
);
```
### Selecting Options Programmatically
The `value` property is bound to the current selection. As the selection changes, so will the value. To programmatically manage the selection, update the `value` property.
```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
);
};
```
### 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
);
```
### 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]