components/radio
Actions · 04 / 64

Radio

ui.widgets.RadioGroup

Choisir exactement une valeur parmi des options mutuellement exclusives.

BEHAVIOR CONTRACT

La sélection du groupe, value, name, le déplacement aux flèches et l'ordre de focus sont gérés par le groupe.

RECORDED INTERACTION

Le harness sélectionne Option Y ; le reste du groupe se désélectionne.

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;
}
Voir le code sur GitHubexamples/storybook/stories.zig:433

Le code source tel quel de la story dans le Storybook (zenit 5f9add5+wip 2026-09-30). W désigne ui.widgets ; col / row / label sont de petits helpers de mise en page du Storybook.

zenit · Double licenceGratuit pour les projets open source sous GPL-3.0-only ; les produits propriétaires ou commerciaux nécessitent une licence commerciale.Contacter l’auteur : zongyi.xzy#gmail.com (remplacez # par @)zenit 5f9add5+wip 2026-09-30