components/radio
액션과 선택 · 04 / 64

Radio

ui.widgets.RadioGroup

상호 배타적인 옵션에서 값 하나를 선택합니다.

BEHAVIOR CONTRACT

그룹 선택, value, name, 방향키 이동, 포커스 순서를 그룹이 관리합니다.

RECORDED INTERACTION

harness가 Option Y를 선택하면 그룹의 나머지 항목은 선택 해제됩니다.

examples/storybook/stories.zig:433
pub fn buildRadio(scope: *ui.Scope, cx: *ui.Cx) anyerror!*ui.Node {
    const a = cx.allocator;
    const c = try col(cx, 16);

    const status = try ui.text(cx, "selected → (none)", .{ .font_size = 13, .color = light.color.fg_secondary });
    status.meta.ownership.meta.test_id = "story.radio.status";
    try c.appendChild(a, status);
    const radio_story = try cx.bindState(RadioStory, .{ .status = status });

    try c.appendChild(a, try label(cx, "Radio"));
    try c.appendChild(a, try W.Radio(.{ .label_text = "Selected", .checked = true, .value = "a", .name = "g" }).mount(scope, cx));
    try c.appendChild(a, try W.Radio(.{ .label_text = "Unselected", .checked = false, .value = "b", .name = "g" }).mount(scope, cx));

    try c.appendChild(a, try label(cx, "RadioGroup"));
    const opts = [_]ui.widgets.checkbox.RadioOption{
        .{ .value = "x", .label_text = "Option X" },
        .{ .value = "y", .label_text = "Option Y" },
        .{ .value = "z", .label_text = "Option Z" },
    };
    const group = try W.RadioGroup(.{
        .options = &opts,
        .value = "x",
        .on_change = ui.Cx.strHandlerFrom(RadioStory, radio_story, RadioStory.onChange),
    }).mount(scope, cx);
    group.meta.ownership.meta.test_id = "story.radio.group";
    try c.appendChild(a, group);
    return c;
}
GitHub에서 소스 보기examples/storybook/stories.zig:433

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