Toggle Group
A set of two-state buttons that can be toggled on or off.
Loading…
import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react";import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";export default function ToggleGroupDemo() { return ( <ToggleGroup type="multiple" variant="outline"> <ToggleGroupItem value="bold" aria-label="Toggle bold"> <BoldIcon /> </ToggleGroupItem> <ToggleGroupItem value="italic" aria-label="Toggle italic"> <ItalicIcon /> </ToggleGroupItem> <ToggleGroupItem value="underline" aria-label="Toggle underline"> <UnderlineIcon /> </ToggleGroupItem> </ToggleGroup> );}Installation
npx shadcn@latest add @cortexcn/toggle-groupInstall the following dependencies:
npm install radix-uiCopy and paste the following code into your project.
"use client";import * as React from "react";import { type VariantProps } from "class-variance-authority";import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui";import { cn } from "@/lib/utils";import { toggleVariants } from "@/components/ui/toggle";const ToggleGroupContext = React.createContext< VariantProps<typeof toggleVariants> & { spacing?: number; }>({ size: "default", variant: "default", spacing: 0,});function ToggleGroup({ className, variant, size, spacing = 0, children, ...props}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants> & { spacing?: number; }) { return ( <ToggleGroupPrimitive.Root data-slot="toggle-group" data-variant={variant} data-size={size} data-spacing={spacing} style={{ "--gap": spacing } as React.CSSProperties} className={cn( "group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs", className, )} {...props} > <ToggleGroupContext.Provider value={{ variant, size, spacing }}> {children} </ToggleGroupContext.Provider> </ToggleGroupPrimitive.Root> );}function ToggleGroupItem({ className, children, variant, size, ...props}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>) { const context = React.useContext(ToggleGroupContext); return ( <ToggleGroupPrimitive.Item data-slot="toggle-group-item" data-variant={context.variant || variant} data-size={context.size || size} data-spacing={context.spacing} className={cn( toggleVariants({ variant: context.variant || variant, size: context.size || size, }), "w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10", "data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l", className, )} {...props} > {children} </ToggleGroupPrimitive.Item> );}export { ToggleGroup, ToggleGroupItem };Usage
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";<ToggleGroup type="single">
<ToggleGroupItem value="a">A</ToggleGroupItem>
<ToggleGroupItem value="b">B</ToggleGroupItem>
</ToggleGroup>Examples
Single
Use type="single" to allow only one item selected at a time.
Loading…
import { AlignCenterIcon, AlignLeftIcon, AlignRightIcon } from "lucide-react";import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";export default function ToggleGroupSingle() { return ( <ToggleGroup type="single" defaultValue="left"> <ToggleGroupItem value="left" aria-label="Align left"> <AlignLeftIcon /> </ToggleGroupItem> <ToggleGroupItem value="center" aria-label="Align center"> <AlignCenterIcon /> </ToggleGroupItem> <ToggleGroupItem value="right" aria-label="Align right"> <AlignRightIcon /> </ToggleGroupItem> </ToggleGroup> );}Outline & Sizes
Use variant="outline" and the size prop.
Loading…
import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react";import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";export default function ToggleGroupSizes() { return ( <div className="flex flex-col items-start gap-4"> {(["sm", "default", "lg"] as const).map((size) => ( <ToggleGroup key={size} type="multiple" variant="outline" size={size}> <ToggleGroupItem value="bold" aria-label="Bold"> <BoldIcon /> </ToggleGroupItem> <ToggleGroupItem value="italic" aria-label="Italic"> <ItalicIcon /> </ToggleGroupItem> <ToggleGroupItem value="underline" aria-label="Underline"> <UnderlineIcon /> </ToggleGroupItem> </ToggleGroup> ))} </div> );}