RadioButtonGroup

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

Import

import { RadioButtonGroup } from 'vuiii'

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: 'list', label: 'List', icon: 'list-bullet' },
    { value: 'grid', label: 'Grid', icon: 'squares-2x2' },
    { value: 'table', label: 'Table', icon: 'table-cells' },
  ]"
  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"
/>

Storybook

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