diff --git a/docs/pages/components/select.md b/docs/pages/components/select.md index 90d537b13..e830a7471 100644 --- a/docs/pages/components/select.md +++ b/docs/pages/components/select.md @@ -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 @@ -261,6 +265,11 @@ Use the `value` attribute to set the initial selection. When using `multiple`, u ``` +```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';