# Checkbox List Item

## Usage

Individual checkbox item with label, description, and end content slot. Works in collection mode (inside a `CheckboxList` with a value array) or standalone mode (inside `List`, or inside a `CheckboxList` without value, such as a select-all item).

```ts
import { CheckboxListItem } from '@astryx-vue/core/CheckboxList'
```

In collection mode the row's `value` is its identity: the parent [Checkbox List](/en/components/checkbox-list) holds the `v-model` array, and the row throws without a `value`. In standalone mode there is no array, so `isChecked` shows the state and `check` reports the next one; that is the shape used inside a [List](/en/components/list) or by a select-all row.

## Examples

Common configurations, variations, and states.

### Basic

Checkbox items with labels and descriptions inside a controlled CheckboxList. Use for multi-select option groups like notification preferences.

```vue
<script setup lang="ts">
import { CheckboxList, CheckboxListItem } from '@astryx-vue/core/CheckboxList'
import { shallowRef } from 'vue'

const value = shallowRef(['updates'])
</script>

<template>
  <CheckboxList v-model="value" label="Email preferences">
    <CheckboxListItem label="Product updates" value="updates" description="New features and improvements" />
    <CheckboxListItem label="Security alerts" value="security" description="Important account security notifications" />
    <CheckboxListItem label="Marketing" value="marketing" description="Tips, offers, and promotions" />
  </CheckboxList>
</template>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label` | `string` | — | Primary text for the row. It also names the checkbox, so no separate accessible name is needed. Required. |
| `value` | `string` | — | Row identity, matched against the parent `CheckboxList` array. Required in collection mode. Leave it out for a standalone row. |
| `description` | `string` | — | Secondary text below the label. It is also the checkbox description, read after the label. |
| `isChecked` | `CheckboxValue` (`boolean \| 'indeterminate'`) | `false` | Checked state of a standalone row. Ignored while the parent `CheckboxList` has a value array. |
| `isDisabled` | `boolean` | `false` | Disables this row. The row stays in place and stays readable; it cannot be toggled. |
| `isLoading` | `boolean` | `false` | Loading for this row. The checkbox shows a spinner and the row cannot be toggled. In collection mode the parent list turns it on while the toggled value's `changeAction` is still running. |

## Events

- `check(checked: boolean)`: fires with the next state of a standalone row. Ignored in collection mode, where the parent list reports the change through its own `change` event.

## Slots

- `end`: content after the label and description, such as a badge or a count.