components/switch
액션과 선택 · 03 / 64

Switch

ui.widgets.Switch

즉시 적용되는 설정을 위한 토글.

BEHAVIOR CONTRACT

off, on, disabled를 명확히 구분하고 키보드 및 접근성 시맨틱을 갖춥니다.

RECORDED INTERACTION

harness가 Off 스위치를 전환하면 트랙과 상태 텍스트가 함께 바뀝니다.

examples/storybook/stories.zig:392
pub fn buildSwitch(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, "toggled → (none)", .{ .font_size = 13, .color = light.color.fg_secondary });
    status.meta.ownership.meta.test_id = "story.switch.status";
    try c.appendChild(a, status);
    const story = try cx.bindState(SwitchStory, .{ .status = status });

    const off_switch = try W.Switch(.{
        .label_text = "Off",
        .initial_checked = false,
        .on_change = ui.Cx.boolHandlerFrom(SwitchStory, story, SwitchStory.onChange),
    }).mount(scope, cx);
    off_switch.meta.ownership.meta.test_id = "story.switch.off";
    try c.appendChild(a, off_switch);
    try c.appendChild(a, try W.Switch(.{ .label_text = "On", .initial_checked = true }).mount(scope, cx));
    try c.appendChild(a, try W.Switch(.{ .label_text = "Disabled", .disabled = true }).mount(scope, cx));
    return c;
}
GitHub에서 소스 보기examples/storybook/stories.zig:392

Storybook에 있는 이 story의 원본 코드입니다(zenit 5f9add5+wip 2026-09-30). W는 ui.widgets이며, col / row / label은 Storybook 내부의 작은 레이아웃 헬퍼입니다.

zenit · 이중 라이선스오픈 소스 프로젝트는 GPL-3.0-only로 무료 사용할 수 있으며, 비공개 소스나 상용 제품에는 상용 라이선스가 필요합니다.작성자 연락처: zongyi.xzy#gmail.com (#을 @로 바꾸세요)zenit 5f9add5+wip 2026-09-30