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, RadioGroupItem } from "@plexui/vue/components/RadioGroup";Examples
Overview
With Checkbox
direction
description
Descriptions
Direction
direction
Orientation
orientation
Group disabled
Item disabled
With description
With Field
With Field error
Choice card
orientation
Card selection
Grouped sections
API
RadioGroup (root)
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | Selected value. Bind with v-model:value; leave unset for an uncontrolled group |
default-value | string | — | Initial selected value (uncontrolled) |
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 |
class | string | — | Extra classes on the group element |
default slot | VNode[] | — | RadioGroupItem children |
@update:value | (value: string) => void | — | Emitted when the selected option changes; powers v-model:value |
@change | (value: string) => void | — | Emitted with update:value, named after the React onChange prop |
RadioGroupItem
| 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 | string | — | Second line below the option's label, linked via aria-describedby (or the description slot) |
class | string | — | Extra classes on the label element |
default slot | VNode[] | — | Label content (text or rich content) |
Other attributes on RadioGroup, such as the id, aria-describedby and aria-invalid a Field passes, land on the group element. Other attributes on RadioGroupItem land on its wrapper <div>. The arrow keys move focus and check the focused option; Home and End move focus only (roving focus from Reka UI). 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))