UI ComponentsForms
Radio Group
Choose one option from a labelled group.
Import
import { RadioGroup, Radio } from "@puzzle-ui/ui";Selection and orientation
Render Radio inside RadioGroup; every option needs a unique value. name enables native form submission and required validation.
API
RadioGroup
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | Required | Radio options. |
value | string | null | - | Controlled selection; null is empty. |
defaultValue | string | - | Initial uncontrolled selection. |
onValueChange | (value: string) => void | - | Selected option value. |
label, description | ReactNode | - | Group legend and supporting text. |
error | ReactNode | boolean | - | Validation message. |
invalid | boolean | Error-derived | Explicit invalid state. |
name | string | - | Shared native input name. |
required, disabled | boolean | false | Group state. |
orientation | "horizontal" | "vertical" | "vertical" | Layout direction. |
size | "sm" | "md" | "lg" | "md" | Option size. |
dir | "ltr" | "rtl" | - | Keyboard text direction. |
loop | boolean | true | Wrap keyboard navigation. |
Radio
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | Required | Unique option identifier. |
label, children | ReactNode | - | Option label; label wins. |
description | ReactNode | - | Option supporting text. |
disabled | boolean | false | Disables this option. |
Group props extend native fieldset attributes. Radio forwards supported input props and refs; className/style target its label. Arrow keys select enabled options; Home/End reach the boundaries.