Radix Vue

Appearance

ToggleGroup ​

A set of two-state buttons that can be toggled on or off.

Features ​

  • Full keyboard navigation.
  • Supports horizontal/vertical orientation.
  • Support single and multiple pressed buttons.
  • Can be controlled or uncontrolled.

Installation ​

Install the component from your command line.

bash
npm install radix-vue

Anatomy ​

Import the component.

vue
<script setup>
import { ToggleGroupItem, ToggleGroupRoot } from 'radix-vue'
</script>

<template>
  <ToggleGroupRoot>
    <ToggleGroupItem />
  </ToggleGroupRoot>
</template>

API Reference ​

Root ​

Contains all the parts of a toggle group.

PropTypeDefault
type*
enum
modelValue
string | string[]
defaultValue
string | string[]
disabled
boolean
false
rovingFocus
boolean
true
orientation
enum
undefined
dir
enum
loop
boolean
true
asChild
boolean
false
EmitType
@update:modelValue
(payload: string | string[]) => void
Data AttributeValue
[data-orientation]"vertical" | "horizontal"

Item ​

An item in the group.

PropTypeDefault
asChild
boolean
false
value*
string
disabled
boolean
Data AttributeValue
[data-state]"on" | "off"
[data-disabled]Present when disabled
[data-orientation]"vertical" | "horizontal"

Examples ​

Ensuring there is always a value ​

You can control the component to ensure a value.

vue
<script setup>
import { ref } from 'vue'
import { ToggleGroupItem, ToggleGroupRoot } from 'radix-vue'

const value = ref('left')
</script>

<template>
  <ToggleGroupRoot v-model="value" type="single">
    <ToggleGroupItem value="left">
      <TextAlignLeftIcon />
    </ToggleGroupItem>
    <ToggleGroupItem value="center">
      <TextAlignCenterIcon />
    </ToggleGroupItem>
    <ToggleGroupItem value="right">
      <TextAlignRightIcon />
    </ToggleGroupItem>
  </ToggleGroupRoot>
</template>

Accessibility ​

Uses roving tabindex to manage focus movement among items.

Keyboard Interactions ​

KeyDescription
Tab
Moves focus to either the pressed item or the first item in the group.
Space
Activates/deactivates the item.
Enter
Activates/deactivates the item.
ArrowDown
Moves focus to the next item in the group.
ArrowRight
Moves focus to the next item in the group.
ArrowUp
Moves focus to the previous item in the group.
ArrowLeft
Moves focus to the previous item in the group.
Home
Moves focus to the first item.
End
Moves focus to the last item.