Checkbox
ui.widgets.CheckboxUn booleano independiente con estados sin marcar, marcado e indeterminado.
BEHAVIOR CONTRACT
El estado, el foco, el área de clic del label y on_change comparten un único límite de interacción.
RECORDED INTERACTION
El harness pulsa el checkbox real; el estado pasa a changed → checked.
pub fn buildCheckbox(scope: *ui.Scope, cx: *ui.Cx) anyerror!*ui.Node {
const a = cx.allocator;
const c = try col(cx, 12);
const status = try ui.text(cx, "changed → (none)", .{ .font_size = 13, .color = light.color.fg_secondary });
status.meta.ownership.meta.test_id = "story.checkbox.status";
const story = try cx.bindState(CheckboxStory, .{ .status = status });
const unchecked = try ui.widgets.Checkbox(.{
.label_text = "Unchecked",
.initial_checked = false,
.on_change = ui.Cx.boolHandlerFrom(CheckboxStory, story, CheckboxStory.onChange),
}).mount(scope, cx);
unchecked.meta.ownership.meta.test_id = "story.checkbox.box";
try c.appendChild(a, unchecked);
try c.appendChild(a, try ui.widgets.Checkbox(.{ .label_text = "Checked", .initial_checked = true }).mount(scope, cx));
try c.appendChild(a, try ui.widgets.Checkbox(.{ .label_text = "Indeterminate", .indeterminate = true }).mount(scope, cx));
try c.appendChild(a, try ui.widgets.Checkbox(.{ .label_text = "Disabled", .disabled = true }).mount(scope, cx));
try c.appendChild(a, status);
return c;
}El código literal de la story en el Storybook (zenit 5f9add5+wip 2026-09-30). W es ui.widgets; col / row / label son pequeños helpers de layout del Storybook.
CheckboxProps
ui.widgets.Checkboxfn Checkbox(props: CheckboxProps) CheckboxBuilderCampo
Tipo
Predeterminado
Descripción
initial_checkedboolfalse选中状态 初始勾选态。**只在 mount 时读取一次**,之后改无效(组件持有 自己的 CheckboxState)。需要外部驱动请用 mountResult 拿 state 后 调 setChecked,或用 ui.Show 重建。
indeterminateboolfalse不确定状态
label_text?[]const u8null标签
disabledboolfalse禁用
on_change?core.HandlerRefnull变化回调。2026-07-31 并轨为 `?core.HandlerRef`。 需要拿到新值用 `cx.boolHandlerFrom(State, ptr, method)` 构造; 只关心"变了"用 `cx.handlerFrom(...)`。
state_id?u64null状态 ID (用于 StateStore)
check_icon_asset?svg_assets.AssetnullCheck icon SVG 资产
*Node
ui.widgets.Checkboxmount devuelve *Node directamente: añádelo a un nodo padre.