RadioButtonGroup

Button-styled radio group for single selection with visual button appearance. Each option is rendered as a Button within a ButtonGroup.

Shared option API

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

Import

import { RadioButtonGroup } from 'vuiii'

Props

Prop	Type	Default	Description
modelValue	any	-	Selected value (v-model)
options	any[] | Record<string, any>	-	Options to render as 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 for the button's title
optionIcon	string | ((item) => any)	-	Key or function to extract the prefix icon name
valueParser	ValueParser<string>	-	Custom parser for option values
type	'string' | 'number' | 'boolean' | 'date'	'string'	Built-in value type parsing
variant	'filled' | 'outlined'	'filled'	Render style of the active button
size	'small' | 'normal' | 'large'	'normal'	Button size
disabled	boolean	false	Disables the whole group
required	boolean	false	Marks the group as required
invalid	boolean	false	Renders the validation error state

Events

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

Basic Usage

View in Storybook

<RadioButtonGroup v-model="view" :options="['List', 'Grid', 'Table']" />

Variants

The colors are fixed: the active button uses the accent color and inactive buttons use secondary. Use the variant prop to control the render style of the active button. Available variants: filled (default) and outlined.

View in Storybook

<RadioButtonGroup v-model="view" :options="['List', 'Grid', 'Table']" variant="filled" />
<RadioButtonGroup v-model="view" :options="['List', 'Grid', 'Table']" variant="outlined" />

Sizes

Use the size prop to control the button size. Available sizes: small, normal, large.

View in Storybook

<RadioButtonGroup v-model="view" :options="options" size="small" />
<RadioButtonGroup v-model="view" :options="options" size="normal" />
<RadioButtonGroup v-model="view" :options="options" size="large" />

Disabled

Use the disabled prop to disable the entire group.

<RadioButtonGroup v-model="view" :options="options" disabled />

Object Options

Use option-value and option-label props to extract values from object arrays.

View in Storybook

<RadioButtonGroup
  v-model="status"
  :options="[
    { id: 'active', name: 'Active' },
    { id: 'inactive', name: 'Inactive' },
  ]"
  option-value="id"
  option-label="name"
/>

With Icons

Use the option-icon extractor to display prefix icons on each button.

View in Storybook

<RadioButtonGroup
  v-model="view"
  :options="[
    { value: 'asc', label: 'Ascending', icon: 'arrow-narrow-up' },
    { value: 'desc', label: 'Descending', icon: 'arrow-narrow-down' },
  ]"
  option-value="value"
  option-label="label"
  option-icon="icon"
/>

With Descriptions

Use the option-description extractor to add tooltip text (shown via the title attribute) to each button.

<RadioButtonGroup
  v-model="selected"
  :options="options"
  option-value="value"
  option-label="label"
  option-description="description"
/>

Value Types

Options are normalized to strings internally, so by default the model receives a string. Use type to have the picked value parsed back, exactly as in Select, RadioGroup and CheckboxGroup. Supported types: string (default), number, boolean and date.

<RadioButtonGroup v-model="rating" :options="[1, 2, 3]" type="number" />
<!-- rating === 3, not '3' -->

For anything else, pass a value-parser with your own stringify / parse pair:

<RadioButtonGroup
  v-model="startsOn"
  :options="dates"
  :value-parser="{ stringify: (d) => d.toISOString(), parse: (v) => new Date(v) }"
/>

Storybook

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