BundyUI

Selection

Label

Radio

A single radio button with label and description, for use inside `RadioGroup`.

vue
<UiRadio />

Options

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

Model value

modelValue controls whether this radio is the selected option in its group.

Selecting a Radio only ever sets it to checked — clicking an already-checked Radio does nothing, and nothing un-checks it except another Radio in the same group becoming checked. RadioGroup handles that coordination for you; a lone Radio won't uncheck itself.

Label

label is the text beside the radio, clickable along with it.

Description

description is secondary text under the label — what picking this option actually means, when the label alone is too short to say.

Disabled

disabled disables interaction with the Radio.

Color

color is the indicator's color when selected.

Variant

variant sets how much surface the option carries. list is a plain row with no box; card wraps it in a tinted surface that fills in when selected, which is better when the options are substantial enough to compare.

Highlight

highlight fills the selected card with its color instead of the neutral fill — the same card, only the colour changes. Unselected cards stay neutral, and it does nothing to a list radio.

Indicator

indicator sets which side the dot sits on, or hidden to drop it — for card options where the fill 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
modelValue
boolean
false
Whether this Radio is the selected option in its group.
label
string
—
The label displayed next to the Radio.
description
string
—
Secondary text displayed below the label.
disabled
boolean
false
Disables interaction with the Radio.
color
"neutral" | "primary" | "secondary" | "success" | "error" | "warning" | "info" | "pending"
'primary'
The color of the indicator when selected.
variant
"list" | "card"
'list'
Displays as a plain list item or a tinted card that fills in when selected.
highlight
boolean
false
Fills a selected card with `color` instead of the neutral fill — the same card, only its colour changes, like a highlighted `PricingPlan`. Only affects `variant="card"`.
indicator
"start" | "end" | "hidden"
'start'
Position of the indicator relative to the label, or 'hidden' to omit it entirely.

Slots

Slot
default

Emits

Event
Payload
Description
update:modelValue
[value: boolean]
—