输入与选择 / COMPONENT ATLAS

复选框Checkbox

在多个选项中自由选择,或确认一项操作。勾选时,以轻巧的描边动画给予回应。

亲手试一试。

01 / LIVE PREVIEW
● Checkbox

PROPERTIES / 调整属性

checked
danger
调整属性,看看细节如何回应。
checked: true  danger: false

用法

02 / USAGE

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

RUST · DIOXUS RSX
let mut checked = use_signal(|| true);

rsx! {
    label {
        Checkbox {
            checked: checked(),
            onchange: move |value| checked.set(value),
        }
        "记住这个小小的选择"
    }
}

主要属性

03 / PROPERTIES
属性 / 类型默认值说明
checkedbool必填当前是否选中,由父组件控制。
onchangeEventHandler<bool>必填选择发生变化时,返回新的布尔值。
dangerboolfalse使用红色强调,适合需要谨慎确认的操作。

操作方式

04 / INTERACTION
Tab移动焦点Space切换选中状态
YGGDRASIL · 每一个细节,都有回应。src/components/ui.rs
© 2026 Yggdrasil