# 单选列表项

## 使用方法

单选列表里的一行，有名字、说明，还能在末尾再放点东西。

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

它是 [单选列表](/components/radio-list) 里的一行。这一行只带一个 `value`，选中的值存在父组件里，所以一组里永远只有一行是选中的。点另一行会把上一行取消掉，不是叠加。

## 示例

常见的用法和不同的状态。

### 基础

单选列表里的单选项，每行有名字和说明，选中值由外面一个变量控制。适合配送方式这类多选一的场景。

```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>
```

## 属性

| 属性 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `value` | `RadioValue`（`string \| number`） | — | 这一行被选中时报给父组件的值。必填。 |
| `label` | `string` | — | 这一行的名字，也是单选按钮的无障碍名。必填。 |
| `description` | `string` | — | 名字下面的一行小字，读屏会先读名字再读这句。 |
| `isDisabled` | `boolean` | `false` | 把这一行禁用。行还在组里，但选中不了。 |
| `isReadOnly` | `boolean` | `false` | 只读。选中状态还能看到、也会随表单提交，但改不了，行不会变暗。 |

## 插槽

- `end`：名字和说明的后面，靠右侧摆放，比如放个徽章或者价格。