RadioGroup

Radio button group for single selection from a list of options. Normalizes various option formats and supports custom value parsing.

Shared option API

Accepts the shared option formats — primitive arrays, object arrays with extractors and key-value objects. See Option Extractors.

Import

import { RadioGroup } from 'vuiii'

Basic Usage

Red

Green

Blue

View in Storybook

<RadioGroup v-model="color" :options="['Red', 'Green', 'Blue']" />

Props

Prop	Type	Default	Description
modelValue	any	-	Selected value (v-model)
options	any[] | Record<string, any>	-	Options to render as radio buttons
optionLabel	string | ((item) => any)	-	Key or function to extract the display label
optionValue	string | ((item) => any)	-	Key or function to extract the option value
optionDisabled	string | ((item) => any)	-	Key or function to mark an option as disabled
optionDescription	string | ((item) => any)	-	Key or function to extract description text
valueParser	ValueParser<string>	-	Custom parser for option values
disabled	boolean	false	Disables all radio options
readonly	boolean	false	Shows the selection, but blocks changing it
required	boolean	false	Marks the group as required
invalid	boolean	false	Renders the validation error state
inline	boolean	false	Renders radio options horizontally
size	'small' | 'normal' | 'large'	'normal'	Radio size
type	'string' | 'number' | 'boolean' | 'date'	'string'	Type used to parse option values

Slots

Slot	Description
default	Custom option content. Props: { option }
symbol	Custom radio symbol. Props: { checked, disabled, invalid }

Events

The RadioGroup exposes the selected value through v-model (update:modelValue). It emits no other custom events.

With Descriptions

option-description renders a second line under each label — the reason to pick a radio group over a select when the choices need explaining.

Free

0$/month

Pro

10$/month

Enterprise

Contact us

<script setup>
const plans = [
  { id: 'free', name: 'Free', info: '0$/month' },
  { id: 'pro', name: 'Pro', info: '10$/month' },
  { id: 'enterprise', name: 'Enterprise', info: 'Contact us' },
]
</script>

<template>
  <RadioGroup
    v-model="selectedPlan"
    :options="plans"
    option-value="id"
    option-label="name"
    option-description="info"
  />
</template>

Inline Layout

Small

Medium

Large

<RadioGroup v-model="size" :options="['Small', 'Medium', 'Large']" inline />

Typed Values

1

2

3

4

5

<!-- quantity is a number, not '2' -->
<RadioGroup v-model="quantity" :options="[1, 2, 3, 4, 5]" type="number" />

Disabled Options

option-disabled marks individual options; the disabled prop covers the whole group.

Available

Sold out

<RadioGroup
  v-model="choice"
  :options="options"
  option-value="id"
  option-label="name"
  option-disabled="soldOut"
/>

As a Button Group

For the same single choice rendered as a row of buttons, see RadioButtonGroup — same option API, different presentation.

Storybook

For interactive examples with all variants, see RadioGroup in Storybook.