Widgets
Radio Group
An exclusive-choice group (one selection at a time).
An exclusive-choice group (one selection at a time).
Usage
import { ui } from "@rezi-ui/core";
ui.radioGroup({
id: "color",
value: state.color,
options: [
{ value: "red", label: "Red" },
{ value: "blue", label: "Blue" },
],
onChange: (value) => app.update((s) => ({ ...s, color: value })),
direction: "vertical",
});Props
| Prop | Type | Default | Description |
|---|---|---|---|
id | string | required | Unique identifier for focus and event routing |
value | string | required | Currently selected value |
options | { value: string; label: string }[] | required | Available options |
onChange | (value: string) => void | - | Called when selection changes |
direction | "horizontal" | "vertical" | "vertical" | Layout direction |
disabled | boolean | false | Disable focus and interaction |
key | string | - | Reconciliation key |
Behavior
- Focusable when enabled.
- Mouse click focuses the radio group.
- Navigate choices with ArrowUp/ArrowDown (or left/right in horizontal layouts).
- Confirm with Enter.
- Tab / Shift+Tab moves focus in/out.
Examples
1) Horizontal layout
import { ui } from "@rezi-ui/core";
ui.radioGroup({
id: "plan",
value: state.plan,
direction: "horizontal",
options: [
{ value: "free", label: "Free" },
{ value: "pro", label: "Pro" },
],
onChange: (v) => app.update((s) => ({ ...s, plan: v })),
});2) Disabled
import { ui } from "@rezi-ui/core";
ui.radioGroup({
id: "size",
value: "m",
options: [{ value: "m", label: "Medium" }],
disabled: true,
});Related
- Select - Dropdown single-choice input
- Checkbox - Boolean toggle
- Input & Focus - Focus navigation rules