Radio Group
Radio group for single-choice selection with row or column layout, right-aligned indicators, rich item content, and card-style options.
import { RadioGroup } from "@plexui/ui/components/RadioGroup";Examples
Overview
Notification frequency
With Checkbox
direction
description
Choose how you'd like to be notified.
Select the topics you want to follow.
Descriptions
Choose how you'd like to be notified.
Direction
direction
Orientation
orientation
Group disabled
Item disabled
With description
Standard spacing for most use cases.
More space between elements.
Minimal spacing for dense layouts.
With Field
Choose how you want to receive notifications.
With Field error
Select a plan to continue.
Please select a subscription plan.
Choice card
orientation
Card selection
Grouped sections
Control who can see project resources.
How often you receive summary emails.
API
RadioGroup (root)
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | Controlled selected value |
defaultValue | string | — | Initial selected value (uncontrolled) |
onChange | (value: string) => void | — | Called when selected option changes |
direction | "col" | "row" | "row" | Item flow direction |
disabled | boolean | false | Disable the whole group |
name | string | — | Name of the hidden radio inputs submitted with the owning form |
required | boolean | false | Marks the group and every hidden radio input as required |
aria-label | string | — | Accessible group label |
className | string | — | Extra classes on the group element |
Other props, such as the id, aria-describedby and aria-invalid a Field passes, land on the group element.
RadioGroup.Item
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | Item value |
disabled | boolean | false | Disable this item only |
required | boolean | — | Marks this item as required |
block | boolean | false | Stretch item to fill available width |
orientation | "left" | "right" | "left" | Position of the radio indicator relative to the label |
description | ReactNode | — | Second line below the option's label, linked via aria-describedby |
className | string | — | Extra classes on the label element |
Other props on RadioGroup.Item land on its wrapper <div>. The arrow keys move focus and check the focused option; Home and End move focus only (roving focus from Radix). Inside a <form>, hidden native radios mirror the selection so the value is submitted with the form.
Styling
Radio Group reads these component tokens. Override them at any scope to restyle it:
--radio-group-col-gap: col gap (defaultspacing(2.5))--radio-group-indicator-background-color: indicator background color (defaultvar(--color-background-primary-solid))--radio-group-indicator-border-color: indicator border color (defaultvar(--color-border-primary-outline))--radio-group-indicator-border-color-hover: indicator border color hover (defaultvar(--alpha-25))--radio-group-indicator-hole-background-color: indicator hole background color (defaultvar(--color-text-primary-solid))--radio-group-indicator-hole-size: indicator hole size (default0.375rem)--radio-group-indicator-size: indicator size (defaultvar(--font-text-lg-size))--radio-group-item-font-size: item font size (defaultvar(--font-text-sm-size))--radio-group-item-gap: item gap (defaultspacing(1.5))--radio-group-item-line-height: item line height (defaultvar(--font-text-sm-line-height))--radio-group-row-gap: row gap (defaultspacing(5))