diff --git a/docs/components/select.md b/docs/components/select.md index 356aa60e..5101dd26 100644 --- a/docs/components/select.md +++ b/docs/components/select.md @@ -15,3 +15,177 @@ Selects allow you to choose one or more items from a dropdown menu. 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 + +``` + +### Clearable + +Use the `clearable` attribute to make the control clearable. + +```html preview + + Option 1 + Option 2 + Option 3 + +``` + +### Pill + +Use the `pill` prop to give selects rounded edges. + +```html preview + + Option 1 + Option 2 + Option 3 + +``` + +### Disabled + +Use the `disabled` prop to disable a select. + +```html preview + + 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 + +``` + +### Grouping Options + +Options can be grouped visually using menu labels and menu dividers. + +```html preview + + 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 + +``` + +### Selecting Options Programmatically + +The `value` prop 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 +
+ + +``` + +### 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 + +``` + +### 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 + +``` + +[component-metadata:sl-select]