From e73e32fb7145987b0c9d78684a664c0f3cd5a42e Mon Sep 17 00:00:00 2001 From: Alexander Krolick <104371843+ak-beam@users.noreply.github.com> Date: Mon, 14 Aug 2023 07:21:52 -0700 Subject: [PATCH] Add docs on setting multiple values in select (#1508) --- docs/pages/components/select.md | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/docs/pages/components/select.md b/docs/pages/components/select.md index 90d537b137..e830a74719 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';