d7:T5d19,

"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 "cn"

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",
  style,
  children,
  ...props
}: ToggleGroupPrimitive.Props &
  VariantProps<typeof toggleVariants> & {
    spacing?: number
    orientation?: "horizontal" | "vertical"
  }) {
  const gap = { "--gap": spacing } as React.CSSProperties
  return (
    <ToggleGroupPrimitive
      data-slot="toggle-group"
      data-variant={variant}
      data-size={size}
      data-spacing={spacing}
      orientation={orientation}
      data-orientation={orientation}
      style={
        typeof style === "function"
          ? (state) => ({ ...gap, ...style(state) })
          : { ...gap, ...style }
      }
      className={cn(
        "group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-[spacing=0]:data-[variant=outline]:data-horizontal:rounded-full data-vertical:flex-col data-vertical:items-stretch data-[spacing=0]:data-[variant=outline]:data-vertical:rounded-2xl",
        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 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:shadow-none focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-full group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-2xl group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-full group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-2xl group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:not-last:border-r-transparent group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:not-last:border-b-transparent",
        toggleVariants({
          variant: context.variant || variant,
          size: context.size || size,
        }),
        className
      )}
      {...props}
    >
      {children}
    </TogglePrimitive>
  )
}

export { ToggleGroup, ToggleGroupItem }

d5:["$","div",null,{"data-slot":"code-block-body","data-line-numbers":"","style":{"--w-line-digits":"2ch"},"className":"overflow-x-auto py-2.75 pr-12 pl-3.75 font-mono text-xs leading-6 text-w-foreground [&_pre]:m-0 [&_pre]:bg-transparent","dangerouslySetInnerHTML":{"__html":"$d7"}}] d8:T55e,import { ChartLineIcon, TableIcon } from "lucide-react" import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group" const ranges = ["Week", "Month", "Year"] const sizes = [ { size: "sm", range: "Week", view: "chart" }, { size: "default", range: "Month", view: "table" }, { size: "lg", range: "Year", view: "chart" }, ] as const export default function ToggleGroupSizesDemo() { return (

{sizes.map(({ size, range, view }) => (

{ranges.map((item) => ( {item} ))}

))}

) }d9:T36ae,

import { ChartLineIcon, TableIcon } from "lucide-react"

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

const ranges = ["Week", "Month", "Year"]

const sizes = [
  { size: "sm", range: "Week", view: "chart" },
  { size: "default", range: "Month", view: "table" },
  { size: "lg", range: "Year", view: "chart" },
] as const

export default function ToggleGroupSizesDemo() {
  return (
    <div className="flex flex-col gap-5">
      {sizes.map(({ size, range, view }) => (
        <div key={size} className="flex items-center gap-6">
          <ToggleGroup
            variant="outline"
            size={size}
            defaultValue={[range]}
            aria-label="Range"
          >
            {ranges.map((item) => (
              <ToggleGroupItem key={item} value={item}>
                {item}
              </ToggleGroupItem>
            ))}
          </ToggleGroup>
          <ToggleGroup
            variant="outline"
            size={size}
            defaultValue={[view]}
            aria-label="View"
          >
            <ToggleGroupItem value="chart" aria-label="Chart">
              <ChartLineIcon />
            </ToggleGroupItem>
            <ToggleGroupItem value="table" aria-label="Table">
              <TableIcon />
            </ToggleGroupItem>
          </ToggleGroup>
        </div>
      ))}
    </div>
  )
}

c7:["$","div",null,{"data-slot":"code-block","className":"flex flex-col","children":["$","div",null,{"data-slot":"code-block-card","className":"relative min-h-0 flex-1 overflow-hidden rounded-w-xl border border-w-border bg-w-card shadow-w-2xs","children":[["$","$Ld1",null,{"value":"$d8","data-copy":"","className":"absolute top-2.25 right-2.25 z-10"}],["$","div",null,{"data-slot":"code-block-body","data-line-numbers":"","style":{"--w-line-digits":"2ch"},"className":"overflow-x-auto py-2.75 pr-12 pl-3.75 font-mono text-xs leading-6 text-w-foreground [&_pre]:m-0 [&_pre]:bg-transparent","dangerouslySetInnerHTML":{"__html":"$d9"}}]]}]}] da:T1c30,

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

const ranges = ["Week", "Month", "Year"]

export default function ToggleGroupSpacingDemo() {
  return (
    <div className="flex flex-col items-center gap-5">
      {[2, 1, 0].map((spacing) => (
        <ToggleGroup
          key={spacing}
          variant="outline"
          spacing={spacing}
          defaultValue={["Month"]}
          aria-label="Range"
        >
          {ranges.map((range) => (
            <ToggleGroupItem key={range} value={range}>
              {range}
            </ToggleGroupItem>
          ))}
        </ToggleGroup>
      ))}
    </div>
  )
}

cc:["$","div",null,{"data-slot":"code-block","className":"flex flex-col","children":["$","div",null,{"data-slot":"code-block-card","className":"relative min-h-0 flex-1 overflow-hidden rounded-w-xl border border-w-border bg-w-card shadow-w-2xs","children":[["$","$Ld1",null,{"value":"import { ToggleGroup, ToggleGroupItem } from \"@/components/ui/toggle-group\"\n\nconst ranges = [\"Week\", \"Month\", \"Year\"]\n\nexport default function ToggleGroupSpacingDemo() {\n return (\n

\n {[2, 1, 0].map((spacing) => (\n \n {ranges.map((range) => (\n \n {range}\n \n ))}\n \n ))}\n

\n )\n}","data-copy":"","className":"absolute top-2.25 right-2.25 z-10"}],["$","div",null,{"data-slot":"code-block-body","data-line-numbers":"","style":{"--w-line-digits":"2ch"},"className":"overflow-x-auto py-2.75 pr-12 pl-3.75 font-mono text-xs leading-6 text-w-foreground [&_pre]:m-0 [&_pre]:bg-transparent","dangerouslySetInnerHTML":{"__html":"$da"}}]]}]}] db:T2459,

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

export default function ToggleGroupDisabledDemo() {
  return (
    <div className="flex flex-col gap-5">
      <ToggleGroup
        variant="outline"
        defaultValue={["css"]}
        disabled
        aria-label="Export format"
      >
        <ToggleGroupItem value="css">CSS</ToggleGroupItem>
        <ToggleGroupItem value="json">JSON</ToggleGroupItem>
        <ToggleGroupItem value="swift">Swift</ToggleGroupItem>
      </ToggleGroup>
      <ToggleGroup variant="outline" defaultValue={["ios"]} aria-label="Platform">
        <ToggleGroupItem value="web">Web</ToggleGroupItem>
        <ToggleGroupItem value="ios">iOS</ToggleGroupItem>
        <ToggleGroupItem value="android">Android</ToggleGroupItem>
        <ToggleGroupItem value="linux" disabled>
          Linux
        </ToggleGroupItem>
      </ToggleGroup>
    </div>
  )
}

cd:["$","div",null,{"data-slot":"code-block","className":"flex flex-col","children":["$","div",null,{"data-slot":"code-block-card","className":"relative min-h-0 flex-1 overflow-hidden rounded-w-xl border border-w-border bg-w-card shadow-w-2xs","children":[["$","$Ld1",null,{"value":"import { ToggleGroup, ToggleGroupItem } from \"@/components/ui/toggle-group\"\n\nexport default function ToggleGroupDisabledDemo() {\n return (\n

\n \n CSS\n JSON\n Swift\n \n \n Web\n iOS\n Android\n \n Linux\n \n \n

import { MonitorIcon, SmartphoneIcon, TabletIcon } from "lucide-react"

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

const devices = [
  { value: "mobile", label: "Mobile", icon: SmartphoneIcon },
  { value: "tablet", label: "Tablet", icon: TabletIcon },
  { value: "desktop", label: "Desktop", icon: MonitorIcon },
]

export default function ToggleGroupOrientationDemo() {
  return (
    <ToggleGroup
      variant="outline"
      orientation="vertical"
      spacing={0}
      className="w-35"
      aria-label="Preview device"
    >
      {devices.map((device) => (
        <ToggleGroupItem
          key={device.value}
          value={device.value}
          className="justify-start"
        >
          <device.icon />
          {device.label}
        </ToggleGroupItem>
      ))}
    </ToggleGroup>
  )
}

ce:["$","div",null,{"data-slot":"code-block","className":"flex flex-col","children":["$","div",null,{"data-slot":"code-block-card","className":"relative min-h-0 flex-1 overflow-hidden rounded-w-xl border border-w-border bg-w-card shadow-w-2xs","children":[["$","$Ld1",null,{"value":"import { MonitorIcon, SmartphoneIcon, TabletIcon } from \"lucide-react\"\n\nimport { ToggleGroup, ToggleGroupItem } from \"@/components/ui/toggle-group\"\n\nconst devices = [\n { value: \"mobile\", label: \"Mobile\", icon: SmartphoneIcon },\n { value: \"tablet\", label: \"Tablet\", icon: TabletIcon },\n { value: \"desktop\", label: \"Desktop\", icon: MonitorIcon },\n]\n\nexport default function ToggleGroupOrientationDemo() {\n return (\n \n {devices.map((device) => (\n \n \n {device.label}\n \n ))}\n \n )\n}","data-copy":"","className":"absolute top-2.25 right-2.25 z-10"}],["$","div",null,{"data-slot":"code-block-body","data-line-numbers":"","style":{"--w-line-digits":"2ch"},"className":"overflow-x-auto py-2.75 pr-12 pl-3.75 font-mono text-xs leading-6 text-w-foreground [&_pre]:m-0 [&_pre]:bg-transparent","dangerouslySetInnerHTML":{"__html":"$dc"}}]]}]}]

Installation

Usage

Examples

Variants

Sizes

Spacing

Disabled

Orientation

Custom

Ship your next project this week