Toggle Group

Installation

CLI

npx shadcn@latest add https://exawizards.com/exabase/design/registry/toggle-group.json

Manual

Copy and paste the following code into your project.

"use client"

import * as React from "react"
import { Toggle as TogglePrimitive } from "@base-ui/react/toggle"
import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group"
import { type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"
import { toggleVariants } from "@/components/ui/toggle"

const ToggleGroupContext = React.createContext<
  VariantProps<typeof toggleVariants> & {
    spacing?: number
    orientation?: "horizontal" | "vertical"
  }
>({
  size: "default",
  variant: "default",
  spacing: 2,
  orientation: "horizontal",
})

function ToggleGroup({
  className,
  variant,
  size,
  spacing = 2,
  orientation = "horizontal",
  children,
  ...props
}: ToggleGroupPrimitive.Props &
  VariantProps<typeof toggleVariants> & {
    spacing?: number
    orientation?: "horizontal" | "vertical"
  }) {
  return (
    <ToggleGroupPrimitive
      data-slot="toggle-group"
      data-variant={variant}
      data-size={size}
      data-spacing={spacing}
      data-orientation={orientation}
      style={{ "--gap": spacing } as React.CSSProperties}
      className={cn(
        "group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-vertical:flex-col data-vertical:items-stretch",
        className
      )}
      {...props}
    >
      <ToggleGroupContext.Provider
        value={{ variant, size, spacing, orientation }}
      >
        {children}
      </ToggleGroupContext.Provider>
    </ToggleGroupPrimitive>
  )
}

function ToggleGroupItem({
  className,
  children,
  variant = "default",
  size = "default",
  ...props
}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {
  const context = React.useContext(ToggleGroupContext)

  return (
    <TogglePrimitive
      data-slot="toggle-group-item"
      data-variant={context.variant || variant}
      data-size={context.size || size}
      data-spacing={context.spacing}
      className={cn(
        "shrink-0",
        "focus:z-10",
        "group-data-horizontal/toggle-group:data-[spacing=0]:not-[:first-child]:-ml-px",
        "group-data-horizontal/toggle-group:data-[spacing=0]:not-[:first-child]:rounded-l-none",
        "group-data-horizontal/toggle-group:data-[spacing=0]:not-[:last-child]:rounded-r-none",
        "group-data-vertical/toggle-group:data-[spacing=0]:not-[:first-child]:-mt-px",
        "group-data-vertical/toggle-group:data-[spacing=0]:not-[:first-child]:rounded-t-none",
        "group-data-vertical/toggle-group:data-[spacing=0]:not-[:last-child]:rounded-b-none",
        toggleVariants({
          variant: context.variant || variant,
          size: context.size || size,
        }),
        className
      )}
      {...props}
    >
      {children}
    </TogglePrimitive>
  )
}

export { ToggleGroup, ToggleGroupItem }

Usage

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

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

Examples

Size

Use size to adjust the size of the toggle group (default is default).

<ToggleGroup size="icon-sm">

Icon

Use icon, icon-xs, icon-sm, icon-lg when displaying only icons on the buttons.

Text

Use xs, sm, default, lg when displaying text on the buttons.

Remember to add the data-icon="inline-start" or data-icon="inline-end" attribute to the icon for the correct spacing.

Mix

You can override the size for each ToggleGroupItem even when the parent ToggleGroup has a size set.

Spacing

Use spacing to add spacing between toggle group items.

Variant

Vertical

Use orientation="vertical" for vertical toggle groups.

Single

Use multiple to allow only one toggle to be selected at a time.

Disabled

API

ToggleGroup

Prop	Type	Default	Description
`variant`	`"default" \| "outline" \| "primary" \| "primary-muted"`	`default`	The variant of the buttons.
`size`	`"default" \| "xs" \| "sm" \| "lg" \| "icon" \| "icon-xs" \| "icon-sm" \| "icon-lg"`	`default`	The size of the buttons.
`spacing`	`number`	`2`	The spacing between toggle group items.
`orientation`	`"horizontal" \| "vertical"`	`horizontal`	The orientation of the toggle group.

See the Base UI documentation for more information.

ToggleGroupItem

Prop	Type	Default	Description
`variant`	`"default" \| "outline" \| "primary" \| "primary-muted"`	`default`	The variant of the button.
`size`	`"default" \| "xs" \| "sm" \| "lg" \| "icon" \| "icon-xs" \| "icon-sm" \| "icon-lg"`	`default`	The size of the button.

See the Base UI documentation for more information.

Toggle Group

On this page