输入与选择 / COMPONENT ATLAS

单选框Radio

从一组互斥选项中选择一项。相同 name 连接同组控件,并保留原生键盘行为。

亲手试一试。

01 / LIVE PREVIEW
● Radio

STATES / 示例状态

未选已选禁用
在左侧预览中体验这枚组件。
INTERACTIVE SPECIMEN · 跟随全站主题

用法

02 / USAGE

下方展示组件的调用方式。

RUST · DIOXUS RSX
let mut visibility = use_signal(|| "public".to_string());
rsx! {
    label {
        Radio {
            name: "visibility",
            value: "public",
            checked: visibility() == "public",
            onchange: move |value| visibility.set(value),
        }
        "公开分享"
    }
}

主要属性

03 / PROPERTIES
属性 / 类型默认值说明
nameString必填同一组单选框共用的名称。
valueString必填当前选项的值。
checkedbool必填是否选中当前选项。
onchangeEventHandler<String>必填返回被选中选项的值。
disabledboolfalse禁止选择此项。

操作方式

04 / INTERACTION
Tab进入选项组↑ ↓ ← →切换选项
YGGDRASIL · 每一个细节,都有回应。src/components/ui.rs
© 2026 Yggdrasil