396deb2e3b
Co-authored-by: Alex Ghiu <alex.ghiu@ing.com> Co-authored-by: Gerjan van Geest <Gerjan.van.Geest@ing.com> Co-authored-by: Thijs Louisse <Thijs.Louisse@ing.com> Co-authored-by: Joren Broekema <joren.broekema@ing.com> Co-authored-by: Erik Kroes <erik.kroes@ing.com>
1 KiB
1 KiB
LionOption
lion-option is a selectable within a lion-select-rich
Features
- has checked state
- has a modelValue
- can be disabled
- fully accessible
How to use
Installation
npm i --save @lion/select-rich
import '@lion/select-rich/lion-select-rich.js';
import '@lion/select-rich/lion-options.js';
import '@lion/option/lion-option.js';
// validator import example
import { Required } from '@lion/validate';
Example
<lion-select-rich
name="favoriteColor"
label="Favorite color"
.validators=${[new Required()]}
>
<lion-options slot="input">
<lion-option .choiceValue=${'red'}>Red</lion-option>
<lion-option .choiceValue=${'hotpink'} checked>Hotpink</lion-option>
</lion-options>
</lion-select-rich>
You can also set the full modelValue for each option.
<lion-option .modelValue=${{ value: 'red', checked: false }}>Red</lion-option>
For more details please see lion-select-rich.