# Radio List Item

## Usage

Individual radio item with label, description, and content slots.

```ts
import { RadioListItem } from '@astryx-vue/core/RadioList'
```

One row of a [Radio List](/en/components/radio-list). The row carries a `value` and nothing else: the parent list holds the single selected value, and one row is always selected once the list has one. Choosing a row replaces the previous choice instead of adding to it.

## Examples

Common configurations, variations, and states.

### Basic

Radio items with labels and descriptions inside a controlled RadioList. Use for single-choice option groups like shipping methods.

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

const value = shallowRef('standard')
</script>

<template>
  <RadioList v-model="value" label="Shipping method">
    <RadioListItem label="Standard" value="standard" description="5–7 business days" />
    <RadioListItem label="Express" value="express" description="2–3 business days" />
    <RadioListItem label="Overnight" value="overnight" description="Next business day" />
  </RadioList>
</template>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `RadioValue` (`string \| number`) | — | The value this row reports when it becomes the selected one. Required. |
| `label` | `string` | — | Primary text for the row, and the radio's accessible name. Required. |
| `description` | `string` | — | Secondary text below the label, read after the name. |
| `isDisabled` | `boolean` | `false` | Disables this row. It keeps its place in the group and stays unselected. |
| `isReadOnly` | `boolean` | `false` | Read-only. The selection can be read and submitted but not changed, and the row does not dim. |

## Slots

- `end`: content after the label and description, aligned to the trailing edge.