Preview

Installation

npx sigma-ui@latest add toggle-group

Usage

<script setup lang="ts">
import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
</script>

<template>
  <ToggleGroup type="single">
    <ToggleGroupItem value="a">
      A
    </ToggleGroupItem>
    <ToggleGroupItem value="b">
      B
    </ToggleGroupItem>
    <ToggleGroupItem value="c">
      C
    </ToggleGroupItem>
  </ToggleGroup>
</template>

• With type="single", one item can be pressed at a time and v-model is a string.
• With type="multiple", several items can be pressed and v-model is a string[].
• Set variant and size on ToggleGroup to style every item.

Examples

Default

Outline

Single

Small

Large

Disabled

API Reference

ToggleGroup

Props

Prop	Type	Default
rovingFocus When false, navigating through the items using arrow keys will be disabled.	boolean	-
disabled When true, prevents the user from interacting with the toggle group and all its items.	boolean	-
orientation The orientation of the component, which determines how focus moves: horizontal for left/right arrows and vertical for up/down arrows.	DataOrientation	-
dir The reading direction of the combobox when applicable. <br> If omitted, inherits globally from ConfigProvider or assumes LTR (left-to-right) reading mode.	Direction	-
loop When loop and rovingFocus is true, keyboard navigation will loop from last item to first, and vice versa.	boolean	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"
name The name of the field. Submitted with its owning form as part of a name/value pair.	string	-
required When true, indicates that the user must set the value before the owning form can be submitted.	boolean	-
type Determines whether a "single" or "multiple" items can be selected at a time. This prop will overwrite the inferred type from modelValue and defaultValue.	SingleOrMultipleType	-
modelValue The controlled value of the active item(s). Use this when you need to control the state of the items. Can be binded with v-model	AcceptableValue | AcceptableValue[]	-
defaultValue The default active value of the item(s). Use when you do not need to control the state of the item(s).	AcceptableValue | AcceptableValue[]	-
variant Visual style applied to every item in the group.	"default" | "outline" | null	-
size Size applied to every item in the group.	"default" | "sm" | "lg" | null	-

Events

Event	Payload
update:modelValue Event handler called when the value changes.	[payload: AcceptableValue | AcceptableValue[]]

Slots

Slot	Scope
default The content of the component.	-

ToggleGroupItem

Props

Prop	Type	Default
valuerequired A string value for the toggle group item. All items within a toggle group should use a unique value.	AcceptableValue	-
disabled When true, prevents the user from interacting with the toggle.	boolean	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"
variant Visual style of the item; ignored when the parent group sets a variant.	"default" | "outline" | null	-
size Size of the item; ignored when the parent group sets a size.	"default" | "sm" | "lg" | null	-

Slots

Slot	Scope
default The content of the component.	-

Accessibility

Reka UI renders each item as a toggle button with aria-pressed and uses a roving tabindex to move focus between the items.

Key	Description
Tab	Moves focus to the pressed item, or to the first item when none is pressed.
Space	Toggles the focused item.
Enter	Toggles the focused item.
ArrowDown	Moves focus to the next item.
ArrowRight	Moves focus to the next item.
ArrowUp	Moves focus to the previous item.
ArrowLeft	Moves focus to the previous item.
Home	Moves focus to the first item.
End	Moves focus to the last item.