Skip to content
aq-ui
Back to ComponentsComponent

Toggle Group

Open-code aq-ui accessible component family for Toggle Group.

Preview

This is a live example. Interact with the available controls and use the keyboard to inspect the component's states and behavior.

Loading interactive preview…

Installation

pnpm dlx aq-ui@alpha add toggle-group

API reference

Client module

Import the parts you need, then jump to an export for its contract.

View full source

Quick start

"use client"

import { ToggleGroup } from "@/components/ui/toggle-group"

<ToggleGroup />

ToggleGroup

constSource L23

Open-code aq-ui accessible component family for Toggle Group.

const ToggleGroup = React.forwardRef<React.ComponentRef<typeof ToggleGroupPrimitive>, ToggleGroupPrimitive.Props & VariantProps<typeof toggleVariants> & { spacing?: number orientation?: "horizontal" | "vertical" }>(…)
Props type
ToggleGroupPrimitive.Props & VariantProps<typeof toggleVariants> & { spacing?: number orientation?: "horizontal" | "vertical" }

Props

NameTypeDefault
spacing?number2
orientation?"horizontal" | "vertical""horizontal"
<ToggleGroup />

ToggleGroupItem

constSource L67

Item export for composing Toggle Group.

const ToggleGroupItem = React.forwardRef<React.ComponentRef<typeof TogglePrimitive>, TogglePrimitive.Props & VariantProps<typeof toggleVariants>>(…)
Props type
TogglePrimitive.Props & VariantProps<typeof toggleVariants>
<ToggleGroupItem />

Registry dependencies

toggle, utils

Package dependencies

@base-ui/react@^1.7.0, class-variance-authority@^0.7.1

Files

  • components/ui/toggle-group.tsx

Source