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.
sh
$ npm add reka-uiAnatomy
Import the component.
vue
<script setup>
import { ToggleGroupItem, ToggleGroupRoot } from 'reka-ui'
</script>
<template>
<ToggleGroupRoot>
<ToggleGroupItem />
</ToggleGroupRoot>
</template>API Reference
Root
Contains all the parts of a toggle group.
| Data Attribute | Value |
|---|---|
[data-orientation] | "vertical" | "horizontal" |
Item
An item in the group.
| Data Attribute | Value |
|---|---|
[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 { ToggleGroupItem, ToggleGroupRoot } from 'reka-ui'
import { ref } from 'vue'
const value = ref('left')
</script>
<template>
<ToggleGroupRoot
:model-value="value"
@update:model-value="(val) => {
if (val) value = val
}"
>
<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
| Key | Description |
|---|---|
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. |