# Dropdown Menu Radio Item

## Usage

`DropdownMenuRadioItem` is one option in a [Dropdown Menu Radio Group](/en/components/dropdown-menu-radio-group). Its role is `menuitemradio`. It has to sit inside that group. The group's value matches this option's `value` to decide which row is checked.

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

const sort = ref('option-1')
</script>

<template>
  <DropdownMenu :button="{ label: 'Sort' }">
    <DropdownMenuRadioGroup v-model="sort" label="Radio group">
      <DropdownMenuRadioItem value="option-1" label="Option 1" />
    </DropdownMenuRadioGroup>
  </DropdownMenu>
</template>
```

The radio dot is decorative. The whole row is the control. A disabled option stays in the group and cannot be selected.

## Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `string` | - | The value this option represents. The item must sit inside a radio group; otherwise it throws while it is set up. |
| `label` | `string \| number` | - | Primary text. |
| `description` | `string \| number` | - | Secondary line under the label. |
| `icon` | `string \| Component` | - | Icon before the label. Use the `icon` slot for anything else. |
| `isDisabled` | `boolean` | `false` | Disables this option. It stays in the group and cannot be selected. |

The row's role is `menuitemradio`. Whether it closes the menu is decided by the group. Trailing content goes in the `endContent` slot.