BundyUI

Selection

RadioLabel

RadioGroup

A set of mutually-exclusive radio options sharing a single `v-model`.

vue
<UiRadioGroup :items="..." />

Options

One block per prop — what it does, and what it looks like set.

Items

required

items are the options, each a label and a value. An item can also carry its own description or a disabled flag.

Model value

modelValue is the selected value, two-way bound. Leave it off and the group tracks its own.

Selected: weekly

modelValue holds a single selected value, not an array — that's the main difference from CheckboxGroup.

Default value

defaultValue sets which option starts selected when uncontrolled.

Legend

legend is the heading above the options — what the whole group is asking, stated once so each label doesn't have to repeat it.

Notification frequency

Required

required adds an asterisk to the legend.

Plan*

Disabled

Disables the whole group. Individual options carry their own disabled flag — the first group below mixes both.

Color

color is the selected indicator's color.

Variant

variant sets the shape of each option. list stacks plain rows; card wraps each one in a tinted surface that fills in when selected, which pairs well with a per-item description.

variant="card" pairs well with per-item description text; plain list variant ignores it visually less prominently.

Highlight

highlight fills the selected card with the group's color instead of the neutral fill. The other cards stay neutral, and it only applies to variant='card'.

Orientation

orientation stacks the options or lays them in a row. Vertical is the safer default — a row only works for two or three short labels, and wraps badly on narrow screens.

vertical (default)
horizontal

Indicator

indicator sets which side the dot sits on, or hidden to drop it — for card options where the highlight already says which one is picked.

Examples

The component in real use: compositions that answer "how do I build X with this", rather than one prop at a time.

Indicator position on cards

Every indicator works on a card too. start is the default; end moves the dot to the right edge, for when the label should lead; hidden drops it, leaving the card's fill to show which one is selected — it stays a real radio underneath, so it's still clickable and announced.

API Reference

Generated from the component's source — props, slots and emits as the component actually declares them.

Props

Prop
Type
Default
Description
itemsrequired
RadioGroupItem[]
—
The list of radio options to render.
modelValue
string | number
—
Controls the selected value. Omit this to let the group manage its own state internally (starting from `defaultValue`); pass it to fully control the selection yourself.
defaultValue
string | number
—
The selected value when uncontrolled.
legend
string
—
Heading text displayed above the group of options.
required
boolean
false
Shows a required asterisk next to the legend.
disabled
boolean
false
Disables the whole group, preventing any selection changes.
color
"neutral" | "primary" | "secondary" | "success" | "error" | "warning" | "info" | "pending"
'primary'
Color of the selected radio indicator.
variant
"list" | "card"
'list'
Visual style of each option; 'card' wraps each option in a tinted card that fills in when selected.
highlight
boolean
false
Fills each selected card with `color` instead of the neutral fill. Only affects `variant="card"`.
orientation
"horizontal" | "vertical"
'vertical'
Layout direction of the options.
indicator
"start" | "end" | "hidden"
'start'
Position of the radio indicator relative to the label; 'hidden' removes it entirely.

Emits

Event
Payload
Description
update:modelValue
[value: string | number]
—

Types

ts
interface RadioGroupItem {
    label?: string;
    description?: string;
    value: string | number;
    disabled?: boolean;
}