import { Story, Meta, html } from '@open-wc/demoing-storybook';
import { Required, Validator, loadDefaultFeedbackMessages } from '@lion/validate';
import '@lion/checkbox/lion-checkbox.js';
import '../lion-checkbox-group.js';
# Checkbox Group
`lion-checkbox-group` component enhances the functionality of the native `` element.
Its purpose is to provide a way for users to check **multiple** options amongst a set of choices, or to function as a single toggle.
> You should use `` elements as the children of the ``.
{html`
`}
```html
```
> Make sure that the checkbox-group also has a name attribute, this is necessary for the [lion-form](?path=/docs/forms-form)'s serialization result.
## Features
Since it extends from [lion-fieldset](?path=/docs/forms-fieldset), it has all the features a fieldset has.
## How to use
### Installation
```sh
npm i --save @lion/checkbox @lion/checkbox-group
```
```js
import '@lion/checkbox/lion-checkbox.js';
import '@lion/checkbox-group/lion-checkbox-group.js';
```
## Pre-select
You can pre-select options by targeting the `modelValue` object of the option and setting the `checked` property to `true`.
{html`
`}
```html
```
## Disabled
You can disable the entire group by setting the `disabled` attribute on the ``.
{html`
`}
```html
```
## Validation
You can apply validation to the ``, similar to how you would do so in any fieldset.
The interaction states of the `` are evaluated in order to hide or show feedback messages.
{() => {
loadDefaultFeedbackMessages();
const validate = () => {
const checkboxGroup = document.querySelector('#scientistsGroup');
checkboxGroup.submitted = !checkboxGroup.submitted;
};
return html`
`;
}}
```js
import { Required, loadDefaultFeedbackMessages } from '@lion/validate';
loadDefaultFeedbackMessages();
const validate = () => {
const checkboxGroup = document.querySelector('#scientistsGroup');
checkboxGroup.submitted = !checkboxGroup.submitted;
};
```
```html
```
## Validation advanced
Below is a more advanced validator on the group that evaluates the children checkboxes' checked states.
{() => {
loadDefaultFeedbackMessages();
class HasMinTwoChecked extends Validator {
constructor(...args) {
super(...args);
this.name = 'HasMinTwoChecked';
}
execute(value) {
let hasError = false;
const selectedValues = value['scientists[]'].filter(v => v.checked === true);
if (!(selectedValues.length >= 2)) {
hasError = true;
}
return hasError;
}
static async getMessage() {
return 'You need to select at least 2 values.';
}
}
const validate = () => {
const checkboxGroup = document.querySelector('#scientistsGroup2');
checkboxGroup.submitted = !checkboxGroup.submitted;
};
return html`
`;
}}
```js
import { Required, Validator, loadDefaultFeedbackMessages } from '@lion/validate';
loadDefaultFeedbackMessages();
class HasMinTwoChecked extends Validator {
constructor(...args) {
super(...args);
this.name = 'HasMinTwoChecked';
}
execute(value) {
let hasError = false;
const selectedValues = value['scientists[]'].filter(v => v.checked === true);
if (!(selectedValues.length >= 2)) {
hasError = true;
}
return hasError;
}
static async getMessage() {
return 'You need to select at least 2 values.';
}
}
const validate = () => {
const checkboxGroup = document.querySelector('#scientistsGroup');
checkboxGroup.submitted = !checkboxGroup.submitted;
};
```
```html
```