Components / Actions

ToggleGroup

Coordinates a roving set of single- or multiple-selection toggle buttons.

Preview

Install

Run in your project

npx @getweini/cli@latest add toggle-group

Use cases

One-of-many view

Use single mode for mutually exclusive display choices.

Multiple filters

Use multiple mode when several options can be active together.

Usage example

Vue

<script setup lang="ts">
import { ref } from 'vue'
import ToggleGroup from './components/ui/toggle-group/ToggleGroup.vue'
import ToggleGroupItem from './components/ui/toggle-group/ToggleGroupItem.vue'
const alignment = ref<string>()
</script>

<template>
  <ToggleGroup v-model="alignment" aria-label="Text alignment">
    <ToggleGroupItem value="left">Left</ToggleGroupItem>
    <ToggleGroupItem value="center">Center</ToggleGroupItem>
    <ToggleGroupItem value="right">Right</ToggleGroupItem>
  </ToggleGroup>
</template>

More examples

Choose density

Single mode stores one selected value.

Choose density

<script setup lang="ts">
import { ref } from 'vue'
import ToggleGroup from './components/ui/toggle-group/ToggleGroup.vue'
import ToggleGroupItem from './components/ui/toggle-group/ToggleGroupItem.vue'
const density = ref<string>()
</script>
<template>
  <ToggleGroup v-model="density" type="single" aria-label="List density">
    <ToggleGroupItem value="compact">Compact</ToggleGroupItem>
    <ToggleGroupItem value="comfortable">Comfortable</ToggleGroupItem>
  </ToggleGroup>
</template>

Select visible layers

Multiple mode stores an array of active values.

Select visible layers

<script setup lang="ts">
import { ref } from 'vue'
import ToggleGroup from './components/ui/toggle-group/ToggleGroup.vue'
import ToggleGroupItem from './components/ui/toggle-group/ToggleGroupItem.vue'
const layers = ref<string[]>(['roads'])
</script>
<template>
  <ToggleGroup v-model="layers" type="multiple" aria-label="Map layers">
    <ToggleGroupItem value="roads">Roads</ToggleGroupItem>
    <ToggleGroupItem value="transit">Transit</ToggleGroupItem>
    <ToggleGroupItem value="terrain">Terrain</ToggleGroupItem>
  </ToggleGroup>
</template>

Key API

The most useful props, models, slots, events, and methods for this component.

Key API for ToggleGroup
Name	Type	Default or requirement
`v-model`	string \| undefined \| string[]	undefined / []
`type`	single \| multiple	single
`orientation`	horizontal \| vertical	horizontal
`disabled`	boolean	false
`loop`	boolean	true
`ToggleGroupItem value`	string	required
`ToggleGroupItem disabled`	boolean	false

Name the root with aria-label or aria-labelledby. Arrow keys follow orientation and text direction, Home and End move to the edges, and disabled items are skipped.

Implementation notes

Each item requires a unique string value.
Arrow keys move the roving focus; Home and End jump to the first and last enabled item.

Accessibility and localization

Name the root with aria-label or aria-labelledby.
Arrow direction follows orientation and text direction, including RTL.