# Checkbox Group >> Use Cases ||20 ```js script import { html } from '@mdjs/mdjs-preview'; import '@lion/checkbox-group/define'; ``` ## Model value The `modelValue` of a `lion-checkbox-group` is an array containing the `choiceValues` of the `lion-checkbox` elements that have been checked. Given the scientists example above, say that we were to select the first and last options (Archimedes & Marie Curie). Then the `modelValue` of the `lion-checkbox-group` will look as follows: ```js const groupElement = [parent].querySelector('lion-checkbox-group'); groupElement.modelValue; => ["Archimedes", "Marie Curie"]; ``` ## The `name` attribute The `name` attribute of a `lion-checkbox-group` automatically gets assigned to its `lion-checkbox` children. You can also specify names for the `lion-checkbox` elements, but if this name is different from the name assigned to `lion-checkbox-group`, then an exception will be thrown. Our recommendation would be to set the `name` attribute only on the `lion-checkbox-group` and not on the `lion-checkbox` elements. ## Example ```html

``` ## Pre-select You can pre-select options by targeting the `modelValue` object of the option and setting the `checked` property to `true`. ```js preview-story export const preselect = () => html`

`; ``` ## Disabled You can disable the entire group by setting the `disabled` attribute on the ``. ```js preview-story export const disabled = () => html`

`; ``` ## Label You can use `slot="label"` instead of the `label` attribute for defining more complex labels, such as containing screen reader only text or an anchor. ```js preview-story export const label = () => html`

Archimedes

Francis Bacon

Marie Curie

`; ``` ## Help text You can add help text on each checkbox with `help-text` attribute on the ``. ```js preview-story export const helpText = () => html`

`; ``` ## Event You can listen to the `model-value-changed` event whenever the value of the checkbox group is changed. ```js preview-story export const event = ({ shadowRoot }) => html` (ev.target.parentElement.querySelector('#selectedDinosaur').innerText = JSON.stringify( ev.target.modelValue, null, 4, ))} >

Selected scientists: N/A `; ``` ## Indeterminate A `checkbox-indeterminate`'s value is neither true nor false, but is instead indeterminate, meaning that its state cannot be determined or stated in pure binary terms, based on it's `checkbox` children. ```js preview-story export const indeterminateSiblings = () => html`

`; ``` The `checkbox-indeterminate` can have another `checkbox-indeterminate` as a child. ```js preview-story export const indeterminateChildren = () => html`

`; ``` You can also use `mixed-state` attribute so your indeterminate checkbox toggles through three states (indeterminate, checked, unchecked), where for indeterminate state the old children states are restored when you toggle back into this. ```js preview-story export const mixedState = () => html`

`; ```