Radio Group

bo-radio-group provides one selected value to its bo-radio-group-item children. The group handles arrow-key movement and forwards its name to each native radio input.

Usage

StandardFor personal projects.TeamFor small teams.

Plan: standard

<bo-radio-group v-model="plan" aria-label="Plan">
  <bo-radio-group-item value="standard" label="Standard" description="For personal projects." />
  <bo-radio-group-item value="team" label="Team" description="For small teams." />
</bo-radio-group>

Orientation and States

Use orientation="horizontal" for inline choices. disabled on the group disables every item; an individual item can also be disabled.

LightDark

<bo-radio-group v-model="plan" orientation="horizontal" aria-label="Theme">
  <bo-radio-group-item value="light" label="Light" />
  <bo-radio-group-item value="dark" label="Dark" />
</bo-radio-group>

API

Component / prop / event / slot	Type	Default	Description
BoRadioGroup	component	-	Group context and selected model.
id / dataTestId	string	autogenerated	Group attributes.
modelValue	string | number	-	Selected value used by v-model.
orientation	horizontal | vertical	vertical	Item layout and arrow-key direction.
disabled / required	boolean	false	Group state.
name	string	group id	Shared native radio name.
role / ariaLabel / ariaLabelledBy	native accessibility types	-	Group semantics.
update:modelValue	(value: string | number) event	-	Emitted when the selection changes.
default	slot	-	BoRadioGroupItem children.
BoRadioGroupItem	component	-	Native radio item.
id / dataTestId	string	autogenerated	Item attributes.
value	string | number	required	Value represented by the item.
label / description	string	-	Visible item text.
disabled	boolean	false	Disables this item.
role / ariaLabel / ariaDescribedBy	native accessibility types	-	Item semantics.
default	slot	-	Additional content beside the label and description.