js/shoelace
1
0
Fork 0
mirror of https://github.com/shoelace-style/shoelace.git synced 2026-01-12 11:09:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add docs on setting multiple values in select (#1508)

Browse Source
This commit is contained in:
Alexander Krolick
2023-08-14 07:21:52 -07:00
committed by GitHub
parent b09a48bec4
commit e73e32fb71
1 changed files with 10 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
docs/pages/components/select.md
View File

@@ -250,7 +250,11 @@ Note that multi-select options may wrap, causing the control to expand verticall
### 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 the `value` attribute to set the initial selection.
When using `multiple`, the `value` _attribute_ uses space-delimited values to select more than one option.
Note that `sl-option` values cannot contain spaces for this reason. If accessing or setting the `value` _property_
through Javascript, `value` is an array.
```html:preview
<sl-select value="option-1 option-2" multiple clearable>
@@ -261,6 +265,11 @@ Use the `value` attribute to set the initial selection. When using `multiple`, u
</sl-select>
```
```js
const select = document.querySelector('sl-select[multiple]');
select.value = ['option-1', 'option-2']
```
```jsx:react
import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
import SlOption from '@shoelace-style/shoelace/dist/react/option';