radioGroup

Luau builder for a single-select radio group composed of focusable per-row canvases inside a panel. Each row draws its own background highlight + circle glyph + label; click commits the selection, arrow-keys cycle it. Wraps the rows in a panel with role="radiogroup" so assistive tech reads it as a group.

Exports

• radioGroup(id: string, options: { any }?, selected: number?, opts: RadioGroupOpts?) -> any — build a radio-group widget. The module returns this function directly.

Types:

• RadioGroupOpts = { style: { [string]: any }?, classes: (string | { string })?, rowWidth: number?, rowHeight: number?, onChange: string?, app: any?, ariaLabel: string?, label: string? }

Usage

local radioGroup = require("@builtin::modules.zui.widget.radioGroup")
radioGroup("difficulty", { "Easy", "Normal", "Hard" }, state.diff, {
    onChange = "ui:diff:change",
})

Notes

• Single-select; selected is a 1-based index. The first call seeds ui.widgetState(id, "selected") from the caller's arg; subsequent ticks read state back from there.
• Keyboard nav (per-row canvas onKey): ArrowDown / ArrowRight next, ArrowUp / ArrowLeft previous, Home -> 1, End -> #options. Tab / Shift+Tab walk the per-row canvases via egui's focus chain. Click also commits selection.
• opts.onChange is dispatched as a callback id on the surrounding Z.app router with data.value set to the new 1-based index. Without an app in scope, only ui.widgetState updates.
• Handlers are registered once per group id (deduped via app._radioGroupHandlers); option-count and onChange swaps land without re-registering.