ToggleGroup

A segmented control that looks like a ButtonGroup but tracks which item(s) are pressed. By default it is single-select (like a radio group); add multiple to let several items be pressed at once. Built on reka-ui's ToggleGroup.

Examples

Single select

v-model holds the pressed value (a string). Clicking the active item again clears the selection.

Interval

Selected: weekly

<script setup>
import { ref } from "vue";
const interval = ref("weekly");
</script>

<ToggleGroup
  v-model="interval"
  label="Interval"
  :options="[
    { value: 'daily', label: 'Daily' },
    { value: 'weekly', label: 'Weekly' },
    { value: 'monthly', label: 'Monthly' },
  ]"
/>

Multiple select

With multiple, v-model is a string[] and any number of items can be pressed at once.

Active days

Selected: mon, wed

<script setup>
import { ref } from "vue";
const days = ref(["mon", "wed"]);
</script>

<ToggleGroup
  v-model="days"
  multiple
  label="Active days"
  :options="[
    { value: 'mon', label: 'Mon' },
    { value: 'tue', label: 'Tue' },
    { value: 'wed', label: 'Wed' },
    { value: 'thu', label: 'Thu' },
    { value: 'fri', label: 'Fri' },
  ]"
/>

Vertical and disabled options

Set orientation="vertical" to stack the items, and mark individual options disabled.

<ToggleGroup
  v-model="view"
  orientation="vertical"
  aria-label="View"
  :options="[
    { value: 'map', label: 'Map' },
    { value: 'chart', label: 'Chart' },
    { value: 'table', label: 'Table', disabled: true },
  ]"
/>

Model

Name	Type
v-model	string | string[]

Props

Prop	Type	Required	Default
label	string	No	—
hideLabel	boolean	No	—
ariaLabel	string	No	—
hint	string	No	—
options	ToggleGroupOption[]	Yes	—
multiple	boolean	No	—
disabled	boolean	No	—
orientation	"horizontal" | "vertical"	No	"horizontal"

ToggleGroupOption

interface ToggleGroupOption {
  value: string;
  label: string;
  disabled?: boolean;
}