Exclusive native radio group with optional heading and per-item labels.
Also known as: radio buttons, option radios
Install with the CLI, or copy the component source into your project.
Add radio-group (npm)
1npx --yes -p @default-file/ui df-ui add radio-group
Group heading with per-item labels. One option is selected.
Supporting text under the group heading and under each item label.
Vertical stack by default. Horizontal wraps items in a row.
Group size sm and md. Items inherit the group size.
Disable the whole group, or disable a single item. Group disabled sets aria-disabled.
Invalid group chrome with aria-invalid on the radiogroup.
Exclusive choice group built on native radios. Compose RadioGroup with RadioItem children.
| Prop | Type | Default | Notes |
|---|---|---|---|
| value | string | null | - | Controlled selected value. |
| defaultValue | string | null | null | Uncontrolled initial value. |
| onValueChange | (value: string) => void | - | Called with the newly selected value. |
| name | string | - | Shared native name for the radios. Generated when omitted. |
| label | ReactNode | - | Group heading. Wired as aria-labelledby on the radiogroup. |
| description | ReactNode | - | Supporting text under the heading. Wired as aria-describedby. |
| orientation | "vertical" | "horizontal" | "vertical" | Layout of the items. |
| size | "sm" | "md" | "md" | Default size for items. |
| disabled | boolean | false | Disables every item and sets aria-disabled on the group. |
| invalid | boolean | false | Marks the group invalid and sets aria-invalid. |
| children | ReactNode | - | RadioItem children. |
| className | string | - | Additional styles on the group root. |
| Prop | Type | Default | Notes |
|---|---|---|---|
| value | string | - | Item value (required). |
| label | ReactNode | - | Visible label. When set (or description is set), wraps in a label element. |
| description | ReactNode | - | Supporting text. Wired as aria-describedby on the radio input. |
| size | "sm" | "md" | - | Override the group size for this item. |
| disabled | boolean | - | Disable this item. |
| id | string | - | Input id. Generated when omitted. |
| className | string | - | Additional styles on the field wrapper when labeled, otherwise on the control root. |
Group name (label or aria-label): Pass label for a visible group name, or aria-label / aria-labelledby on RadioGroup when there is no visible heading.