# Dropdown Menu Checkbox Item

## Usage

`DropdownMenuCheckboxItem` is one checkable row inside a [Dropdown Menu](/en/components/dropdown-menu). Its role is `menuitemcheckbox`. It toggles its own boolean and leaves the menu open, so several settings can change in one visit. A one-of-N choice belongs in a [Dropdown Menu Radio Group](/en/components/dropdown-menu-radio-group).

```vue
<script setup lang="ts">
import { DropdownMenu, DropdownMenuCheckboxItem } from '@astryx-vue/core/DropdownMenu'
import { ref } from 'vue'

const archived = ref(false)
</script>

<template>
  <DropdownMenu :button="{ label: 'View' }">
    <DropdownMenuCheckboxItem v-model="archived" label="Show archived" />
  </DropdownMenu>
</template>
```

The mark is decorative. The whole row is the control, and the checked state is `aria-checked`. A disabled row stays in the menu, the arrow keys skip it, and a click does not toggle it.

## Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `modelValue` | `boolean` | - | Whether the row is checked. Pair it with `v-model`. The data array uses `checked` instead. |
| `label` | `string \| number` | - | Primary text. Use the `label` slot for rich content. |
| `description` | `string \| number` | - | Secondary line under the label. |
| `icon` | `string \| Component` | - | Icon before the label: a CSS icon class, or a component that draws one. Use the `icon` slot for anything else. |
| `isDisabled` | `boolean` | `false` | Disables the row. It stays in the accessibility tree, the arrows skip it, and a click does not toggle it. |
| `hasCloseOnSelect` | `boolean` | `false` | Whether toggling closes the menu. Checkbox rows stay open. |

The row's role is `menuitemcheckbox`, and the checked state is `aria-checked`. The mark is decorative and does not take the click. Trailing content such as a shortcut hint goes in the `endContent` slot.