Preview
Switch between light and dark to inspect the embedded Storybook preview.
Installation
pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/toggle-group.jsonStorybook
Explore all variants, controls, and accessibility checks in the interactive Storybook playground.
View in StorybookCode
"use client";
import { createContext, forwardRef, useContext, useMemo } from "react";
import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
import type { VariantProps } from "class-variance-authority";
import { cn } from "../../lib/utils";
import { toggleVariants } from "../toggle/toggle";
const ToggleGroupContext = createContext<VariantProps<typeof toggleVariants>>({
size: "default",
variant: "default",
});
const ToggleGroup = forwardRef<
React.ComponentRef<typeof ToggleGroupPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
VariantProps<typeof toggleVariants>
>(({ children, className, size, variant, ...props }, ref) => {
const contextValue = useMemo(() => ({ size, variant }), [size, variant]);
return (
<ToggleGroupPrimitive.Root
className={cn("flex items-center justify-center gap-1", className)}
ref={ref}
{...props}
>
<ToggleGroupContext.Provider value={contextValue}>
{children}
</ToggleGroupContext.Provider>
</ToggleGroupPrimitive.Root>
);
});
ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
const ToggleGroupItem = forwardRef<
React.ComponentRef<typeof ToggleGroupPrimitive.Item>,
React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
VariantProps<typeof toggleVariants>
>(({ children, className, size, variant, ...props }, ref) => {
const context = useContext(ToggleGroupContext);
return (
<ToggleGroupPrimitive.Item
className={cn(
toggleVariants({
size: context.size ?? size,
variant: context.variant ?? variant,
}),
className,
)}
ref={ref}
{...props}
>
{children}
</ToggleGroupPrimitive.Item>
);
});
ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
export { ToggleGroup, ToggleGroupItem };