import { SlOption, SlSelect } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlSelect>
<SlOptionvalue="option-1">Option 1</SlOption>
<SlOptionvalue="option-2">Option 2</SlOption>
<SlOptionvalue="option-3">Option 3</SlOption>
<SlOptionvalue="option-4">Option 4</SlOption>
<SlOptionvalue="option-5">Option 5</SlOption>
<SlOptionvalue="option-6">Option 6</SlOption>
</SlSelect>
);
```
?> This component works with standard `<form>` 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
<sl-selectlabel="Select one">
<sl-optionvalue="option-1">Option 1</sl-option>
<sl-optionvalue="option-2">Option 2</sl-option>
<sl-optionvalue="option-3">Option 3</sl-option>
</sl-select>
```
```jsx react
import { SlOption, SlSelect } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlSelectlabel="Select one">
<SlOptionvalue="option-1">Option 1</SlOption>
<SlOptionvalue="option-2">Option 2</SlOption>
<SlOptionvalue="option-3">Option 3</SlOption>
</SlSelect>
);
```
### 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
<sl-selectlabel="Experience"help-text="Please tell us your skill level.">
<sl-optionvalue="1">Novice</sl-option>
<sl-optionvalue="2">Intermediate</sl-option>
<sl-optionvalue="3">Advanced</sl-option>
</sl-select>
```
```jsx react
import { SlOption, SlSelect } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlSelectlabel="Experience"help-text="Please tell us your skill level.">
<SlOptionvalue="1">Novice</SlOption>
<SlOptionvalue="2">Intermediate</SlOption>
<SlOptionvalue="3">Advanced</SlOption>
</SlSelect>
);
```
### Placeholders
Use the `placeholder` attribute to add a placeholder.
```html preview
<sl-selectplaceholder="Select one">
<sl-optionvalue="option-1">Option 1</sl-option>
<sl-optionvalue="option-2">Option 2</sl-option>
<sl-optionvalue="option-3">Option 3</sl-option>
</sl-select>
```
```jsx react
import { SlOption, SlSelect } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlSelectplaceholder="Select one">
<SlOptionvalue="option-1">Option 1</SlOption>
<SlOptionvalue="option-2">Option 2</SlOption>
<SlOptionvalue="option-3">Option 3</SlOption>
</SlSelect>
);
```
### Clearable
Use the `clearable` attribute to make the control clearable. The clear button only appears when an option is selected.
```html preview
<sl-selectclearablevalue="option-1">
<sl-optionvalue="option-1">Option 1</sl-option>
<sl-optionvalue="option-2">Option 2</sl-option>
<sl-optionvalue="option-3">Option 3</sl-option>
</sl-select>
```
```jsx react
import { SlOption, SlSelect } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlSelectplaceholder="Clearable"clearable>
<SlOptionvalue="option-1">Option 1</SlOption>
<SlOptionvalue="option-2">Option 2</SlOption>
<SlOptionvalue="option-3">Option 3</SlOption>
</SlSelect>
);
```
### Filled Selects
Add the `filled` attribute to draw a filled select.
```html preview
<sl-selectfilled>
<sl-optionvalue="option-1">Option 1</sl-option>
<sl-optionvalue="option-2">Option 2</sl-option>
<sl-optionvalue="option-3">Option 3</sl-option>
</sl-select>
```
```jsx react
import { SlOption, SlSelect } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlSelectfilled>
<SlOptionvalue="option-1">Option 1</SlOption>
<SlOptionvalue="option-2">Option 2</SlOption>
<SlOptionvalue="option-3">Option 3</SlOption>
</SlSelect>
);
```
### Pill
Use the `pill` attribute to give selects rounded edges.
```html preview
<sl-selectpill>
<sl-optionvalue="option-1">Option 1</sl-option>
<sl-optionvalue="option-2">Option 2</sl-option>
<sl-optionvalue="option-3">Option 3</sl-option>
</sl-select>
```
```jsx react
import { SlOption, SlSelect } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlSelectpill>
<SlOptionvalue="option-1">Option 1</SlOption>
<SlOptionvalue="option-2">Option 2</SlOption>
<SlOptionvalue="option-3">Option 3</SlOption>
</SlSelect>
);
```
### Disabled
Use the `disabled` attribute to disable a select.
```html preview
<sl-selectplaceholder="Disabled"disabled>
<sl-optionvalue="option-1">Option 1</sl-option>
<sl-optionvalue="option-2">Option 2</sl-option>
<sl-optionvalue="option-3">Option 3</sl-option>
</sl-select>
```
```jsx react
import { SlOption, SlSelect } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlSelectplaceholder="Disabled"disabled>
<SlOptionvalue="option-1">Option 1</SlOption>
<SlOptionvalue="option-2">Option 2</SlOption>
<SlOptionvalue="option-3">Option 3</SlOption>
</SlSelect>
);
```
### 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. To set multiple values at once, set `value` to a space-delimited list of values.
```html preview
<sl-selectlabel="Select a Few"value="option-1 option-2 option-3"multipleclearable>
<sl-optionvalue="option-1">Option 1</sl-option>
<sl-optionvalue="option-2">Option 2</sl-option>
<sl-optionvalue="option-3">Option 3</sl-option>
<sl-optionvalue="option-4">Option 4</sl-option>
<sl-optionvalue="option-5">Option 5</sl-option>
<sl-optionvalue="option-6">Option 6</sl-option>
</sl-select>
```
```jsx react
import { SlOption, SlSelect } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlSelectlabel="Select a Few"value="option-1 option-2 option-3"multipleclearable>
<SlOptionvalue="option-1">Option 1</SlOption>
<SlOptionvalue="option-2">Option 2</SlOption>
<SlOptionvalue="option-3">Option 3</SlOption>
<SlOptionvalue="option-4">Option 4</SlOption>
<SlOptionvalue="option-5">Option 5</SlOption>
<SlOptionvalue="option-6">Option 6</SlOption>
</SlSelect>
);
```
?> Note that multi-select options may wrap, causing the control to expand vertically. You can use the `max-options-visible` attribute to control the maximum number of selected options to show at once.
### Setting Initial Values
Use the `value` attribute to set the initial selection. When using `multiple`, use space-delimited values to select more than one option.
Use `<sl-divider>` to group listbox items visually. You can also use `<small>` to provide labels, but they won't be announced by most assistive devices.
```html preview
<sl-select>
<small>Section 1</small>
<sl-optionvalue="option-1">Option 1</sl-option>
<sl-optionvalue="option-2">Option 2</sl-option>
<sl-optionvalue="option-3">Option 3</sl-option>
<sl-divider></sl-divider>
<small>Section 2</small>
<sl-optionvalue="option-4">Option 4</sl-option>
<sl-optionvalue="option-5">Option 5</sl-option>
<sl-optionvalue="option-6">Option 6</sl-option>
</sl-select>
```
```jsx react
import { SlOption, SlSelect } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlSelect>
<SlOptionvalue="option-1">Option 1</SlOption>
<SlOptionvalue="option-2">Option 2</SlOption>
<SlOptionvalue="option-3">Option 3</SlOption>
<SlOptionvalue="option-4">Option 4</SlOption>
<SlOptionvalue="option-5">Option 5</SlOption>
<SlOptionvalue="option-6">Option 6</SlOption>
</SlSelect>
);
```
### Sizes
Use the `size` attribute to change a select's size. Note that size does not apply to listbox options.
```html preview
<sl-selectplaceholder="Small"size="small">
<sl-optionvalue="option-1">Option 1</sl-option>
<sl-optionvalue="option-2">Option 2</sl-option>
<sl-optionvalue="option-3">Option 3</sl-option>
</sl-select>
<br/>
<sl-selectplaceholder="Medium"size="medium">
<sl-optionvalue="option-1">Option 1</sl-option>
<sl-optionvalue="option-2">Option 2</sl-option>
<sl-optionvalue="option-3">Option 3</sl-option>
</sl-select>
<br/>
<sl-selectplaceholder="Large"size="large">
<sl-optionvalue="option-1">Option 1</sl-option>
<sl-optionvalue="option-2">Option 2</sl-option>
<sl-optionvalue="option-3">Option 3</sl-option>
</sl-select>
```
```jsx react
import { SlOption, SlSelect } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<>
<SlSelectplaceholder="Small"size="small">
<SlOptionvalue="option-1">Option 1</SlOption>
<SlOptionvalue="option-2">Option 2</SlOption>
<SlOptionvalue="option-3">Option 3</SlOption>
</SlSelect>
<br/>
<SlSelectplaceholder="Medium"size="medium">
<SlOptionvalue="option-1">Option 1</SlOption>
<SlOptionvalue="option-2">Option 2</SlOption>
<SlOptionvalue="option-3">Option 3</SlOption>
</SlSelect>
<br/>
<SlSelectplaceholder="Large"size="large">
<SlOptionvalue="option-1">Option 1</SlOption>
<SlOptionvalue="option-2">Option 2</SlOption>
<SlOptionvalue="option-3">Option 3</SlOption>
</SlSelect>
</>
);
```
### Placement
The preferred placement of the select's listbox 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`.
