组件 · 表单 · 原生 HTML 与 React
单选 Radio
一组里只能选一个,选项 2–5 个、要同时看到时用它;更多用选择。
演示
<fieldset class="xxd-choices">
<legend>写入方式</legend>
<label class="xxd-choice"><input type="radio" class="xxd-radio" name="w" checked>只写这一篇</label>
<label class="xxd-choice"><input type="radio" class="xxd-radio" name="w">全部写入</label>
</fieldset>export function RadioDemo() {
const [value, setValue] = useState("one");
return (
<Radio.Group legend="写入方式" value={value} onValueChange={(v) => setValue(v as string)}>
<Radio.Item label="只写这一篇" value="one" />
<Radio.Item label="全部写入" value="all" />
</Radio.Group>
);
}状态
同一个元素的各种状态并排。悬停、聚焦、按下用的是组件 CSS 里真实的规则(构建时复制成强制状态),不是手画的。
默认
悬停
键盘聚焦
选中
禁用
属性与类名
| 属性 / 类名 | 说明 |
|---|---|
| 类名 | xxd-radio xxd-choice xxd-choices |
键盘与读屏
- 放在 <fieldset> + <legend> 里,读屏先读组名
- 同一组同一个 name:↑ ↓ 切换并选中,Tab 只停一次
规则
- 单选是语义上的圆,永远是圆
- 一组选项是一个列表,不是一叠盒子