radio-group

Radio Group

Lets the user pick exactly one of a few options; joins the Field around it for its label, description and errors.

States: Default, Focus, Disabled, Invalid

Parts

PartFileDoes
RadioGroupRadioGroup.vueGroups radio items so the user can pick exactly one option.
RadioGroupItemRadioGroupItem.vueLets the user select one option of its radio group.

Anatomy

<RadioGroup>
  <RadioGroupItem />
</RadioGroup>

Styling

PartRecipe
RadioGroupradio-group
RadioGroupItemradio-group-item

Install

Writes 3 files into components/ui/radio-group/. For agents, npx @frontic/ui docs radio-group prints this reference as markdown; the MCP server serves the same.

Installs with it
use-field-control
npm packages
@lucide/vue
@vueuse/core
reka-ui

API reference

RadioGroup RadioGroup.vue

Groups radio items so the user can pick exactly one option.

PropTypeDefault
modelValueAcceptableValue—
defaultValueAcceptableValue—
disabledbooleanfalse
orientationDataOrientation—
dirDirection—
loopbooleantrue
asChildbooleanfalse
asAsTag | Component—
namestring—
requiredbooleanfalse
classClassValue—
EventPayload
update:modelValuepayload: AcceptableValue
SlotSlot props
default{ modelValue: AcceptableValue | undefined; }
Data attributeValues
data-disabled—
Recipe radio-groupSets
base: radio-group 3 properties

RadioGroupItem RadioGroupItem.vue

Example
State