Toggle Group

import * as ToggleGroup from '@components/caprice-ui/toggle-group';
import { BookmarkIcon, HeartIcon, StarIcon } from 'lucide-react';

export default function ToggleGroupDemo() {
  return (
    <ToggleGroup.Root multiple size="sm" spacing={2} variant="outline">
      <ToggleGroup.Item
        aria-label="Toggle star"
        className="data-pressed:bg-transparent data-pressed:*:[svg]:fill-yellow-500 data-pressed:*:[svg]:stroke-yellow-500"
        value="star"
      >
        <StarIcon />
        Star
      </ToggleGroup.Item>
      <ToggleGroup.Item
        aria-label="Toggle heart"
        className="data-pressed:bg-transparent data-pressed:*:[svg]:fill-red-500 data-pressed:*:[svg]:stroke-red-500"
        value="heart"
      >
        <HeartIcon />
        Heart
      </ToggleGroup.Item>
      <ToggleGroup.Item
        aria-label="Toggle bookmark"
        className="data-pressed:bg-transparent data-pressed:*:[svg]:fill-blue-500 data-pressed:*:[svg]:stroke-blue-500"
        value="bookmark"
      >
        <BookmarkIcon />
        Bookmark
      </ToggleGroup.Item>
    </ToggleGroup.Root>
  );
}

Installation

npx shadcn@latest add @caprice/toggle-group

npx shadcn@latest add @caprice/toggle-group

npm install @caprice-ui/react

npm install @caprice-ui/react

Install the following dependencies:

npm install @base-ui/react lucide-react

npm install @base-ui/react lucide-react

Add a cn helper

import { defineConfig, type VariantProps } from 'cva';
import { twMerge } from 'tailwind-merge';

export const {
  compose,
  cva,
  cx: cn,
} = defineConfig({
  hooks: {
    onComplete: (className: string) => twMerge(className),
  },
});

export type { VariantProps };

import { defineConfig, type VariantProps } from 'cva';import { twMerge } from 'tailwind-merge';export const {  compose,  cva,  cx: cn,} = defineConfig({  hooks: {    onComplete: (className: string) => twMerge(className),  },});export type { VariantProps };

Copy and paste the following code into your project.

'use client';

import { ToggleGroup as ToggleGroupPrimitive } from '@base-ui/react/toggle-group';
import * as React from 'react';
import { Toggle as ToggleComponent, type toggleVariants } from '@/components/caprice-ui/toggle';
import { cn, type VariantProps } from '@/lib/utils';

type ToggleGroupVariants = VariantProps<typeof toggleVariants> & {
  /**
   * The spacing between the toggle buttons.
   * @default 0
   */
  spacing?: number;
};

const ToggleGroupContext = React.createContext<ToggleGroupVariants>({
  size: 'md',
  variant: 'transparent',
  spacing: 0,
});

/**
 * Provides a shared state to a series of toggle buttons.
 *
 * Documentation: [Caprice UI Toggle Group](https://caprice-ui.com/docs/components/toggle-group)
 *
 * API Reference: [Base UI Toggle Group](https://base-ui.com/react/components/toggle-group)
 */
export namespace Root {
  export type State = ToggleGroupPrimitive.State;
  export type Variants = ToggleGroupVariants;
  export type Props = React.ComponentProps<typeof ToggleGroupPrimitive> & Root.Variants;
  export type ChangeEventDetails = ToggleGroupPrimitive.ChangeEventDetails;
  export type ChangeEventReason = ToggleGroupPrimitive.ChangeEventReason;
}

export function Root({ className, variant, size, spacing = 0, children, ...props }: Root.Props) {
  return (
    <ToggleGroupPrimitive
      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
      )}
      data-size={size}
      data-slot="toggle-group"
      data-spacing={spacing}
      data-variant={variant}
      style={{ '--gap': spacing } as React.CSSProperties}
      {...props}
    >
      <ToggleGroupContext.Provider value={{ size, variant, spacing }}>
        {children}
      </ToggleGroupContext.Provider>
    </ToggleGroupPrimitive>
  );
}

/**
 * A toggle button that can be used within a toggle group.
 * Renders a `<button>` element.
 *
 * Documentation: [Caprice UI Toggle Group](https://caprice-ui.com/docs/components/toggle-group)
 *
 * API Reference: [Base UI Toggle Group](https://base-ui.com/react/components/toggle)
 */
export function Item({
  className,
  children,
  variant,
  size,
  ...props
}: React.ComponentProps<typeof ToggleComponent> & VariantProps<typeof toggleVariants>) {
  const context = React.useContext(ToggleGroupContext);

  return (
    <ToggleComponent
      className={cn(
        'w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10',
        'data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:first:border-l data-[spacing=0]:first:rounded-l-md',
        className
      )}
      data-size={context.size || size}
      data-slot="toggle-group-item"
      data-spacing={context.spacing}
      data-variant={context.variant || variant}
      size={context.size || size}
      variant={context.variant || variant}
      {...props}
    >
      {children}
    </ToggleComponent>
  );
}

'use client';import { ToggleGroup as ToggleGroupPrimitive } from '@base-ui/react/toggle-group';import * as React from 'react';import { Toggle as ToggleComponent, type toggleVariants } from '@/components/caprice-ui/toggle';import { cn, type VariantProps } from '@/lib/utils';type ToggleGroupVariants = VariantProps<typeof toggleVariants> & {  /**   * The spacing between the toggle buttons.   * @default 0   */  spacing?: number;};const ToggleGroupContext = React.createContext<ToggleGroupVariants>({  size: 'md',  variant: 'transparent',  spacing: 0,});/** * Provides a shared state to a series of toggle buttons. * * Documentation: [Caprice UI Toggle Group](https://caprice-ui.com/docs/components/toggle-group) * * API Reference: [Base UI Toggle Group](https://base-ui.com/react/components/toggle-group) */export namespace Root {  export type State = ToggleGroupPrimitive.State;  export type Variants = ToggleGroupVariants;  export type Props = React.ComponentProps<typeof ToggleGroupPrimitive> & Root.Variants;  export type ChangeEventDetails = ToggleGroupPrimitive.ChangeEventDetails;  export type ChangeEventReason = ToggleGroupPrimitive.ChangeEventReason;}export function Root({ className, variant, size, spacing = 0, children, ...props }: Root.Props) {  return (    <ToggleGroupPrimitive      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      )}      data-size={size}      data-slot="toggle-group"      data-spacing={spacing}      data-variant={variant}      style={{ '--gap': spacing } as React.CSSProperties}      {...props}    >      <ToggleGroupContext.Provider value={{ size, variant, spacing }}>        {children}      </ToggleGroupContext.Provider>    </ToggleGroupPrimitive>  );}/** * A toggle button that can be used within a toggle group. * Renders a `<button>` element. * * Documentation: [Caprice UI Toggle Group](https://caprice-ui.com/docs/components/toggle-group) * * API Reference: [Base UI Toggle Group](https://base-ui.com/react/components/toggle) */export function Item({  className,  children,  variant,  size,  ...props}: React.ComponentProps<typeof ToggleComponent> & VariantProps<typeof toggleVariants>) {  const context = React.useContext(ToggleGroupContext);  return (    <ToggleComponent      className={cn(        'w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10',        'data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:first:border-l data-[spacing=0]:first:rounded-l-md',        className      )}      data-size={context.size || size}      data-slot="toggle-group-item"      data-spacing={context.spacing}      data-variant={context.variant || variant}      size={context.size || size}      variant={context.variant || variant}      {...props}    >      {children}    </ToggleComponent>  );}

Update the import paths to match your project setup.

Usage

import * as ToggleGroup from "@/components/caprice-ui/togglegroup"

import * as ToggleGroup from "@/components/caprice-ui/togglegroup"

import * as ToggleGroup from "@caprice-ui/react/togglegroup"

import * as ToggleGroup from "@caprice-ui/react/togglegroup"

<ToggleGroup.Root>
  <ToggleGroup.Item value="a">A</ToggleGroup.Item>
  <ToggleGroup.Item value="b">B</ToggleGroup.Item>
  <ToggleGroup.Item value="c">C</ToggleGroup.Item>
</ToggleGroup.Root>

Examples

Outline

import * as ToggleGroup from '@components/caprice-ui/toggle-group';
import { Bold, Italic, Underline } from 'lucide-react';

export default function ToggleGroupOutline() {
  return (
    <ToggleGroup.Root variant="outline">
      <ToggleGroup.Item aria-label="Toggle bold" value="bold">
        <Bold className="size-4" />
      </ToggleGroup.Item>
      <ToggleGroup.Item aria-label="Toggle italic" value="italic">
        <Italic className="size-4" />
      </ToggleGroup.Item>
      <ToggleGroup.Item aria-label="Toggle strikethrough" value="strikethrough">
        <Underline className="size-4" />
      </ToggleGroup.Item>
    </ToggleGroup.Root>
  );
}

By default, only one item in the group can be pressed. If any item in the group becomes pressed, the others will become unpressed. You can use the multiple prop to allow multiple items to be pressed.

import * as ToggleGroup from '@components/caprice-ui/toggle-group';
import { Bold, Italic, Underline } from 'lucide-react';

export default function ToggleGroupMultiple() {
  return (
    <ToggleGroup.Root multiple>
      <ToggleGroup.Item aria-label="Toggle bold" value="bold">
        <Bold className="size-4" />
      </ToggleGroup.Item>
      <ToggleGroup.Item aria-label="Toggle italic" value="italic">
        <Italic className="size-4" />
      </ToggleGroup.Item>
      <ToggleGroup.Item aria-label="Toggle strikethrough" value="strikethrough">
        <Underline className="size-4" />
      </ToggleGroup.Item>
    </ToggleGroup.Root>
  );
}

Small

import * as ToggleGroup from '@components/caprice-ui/toggle-group';
import { Bold, Italic, Underline } from 'lucide-react';

export default function ToggleGroupSmall() {
  return (
    <ToggleGroup.Root size="sm">
      <ToggleGroup.Item aria-label="Toggle bold" value="bold">
        <Bold className="size-4" />
      </ToggleGroup.Item>
      <ToggleGroup.Item aria-label="Toggle italic" value="italic">
        <Italic className="size-4" />
      </ToggleGroup.Item>
      <ToggleGroup.Item aria-label="Toggle strikethrough" value="strikethrough">
        <Underline className="size-4" />
      </ToggleGroup.Item>
    </ToggleGroup.Root>
  );
}

Large

import * as ToggleGroup from '@components/caprice-ui/toggle-group';
import { Bold, Italic, Underline } from 'lucide-react';

export default function ToggleGroupLarge() {
  return (
    <ToggleGroup.Root size="lg">
      <ToggleGroup.Item aria-label="Toggle bold" value="bold">
        <Bold className="size-4" />
      </ToggleGroup.Item>
      <ToggleGroup.Item aria-label="Toggle italic" value="italic">
        <Italic className="size-4" />
      </ToggleGroup.Item>
      <ToggleGroup.Item aria-label="Toggle strikethrough" value="strikethrough">
        <Underline className="size-4" />
      </ToggleGroup.Item>
    </ToggleGroup.Root>
  );
}

Disabled

import * as ToggleGroup from '@components/caprice-ui/toggle-group';
import { Bold, Italic, Underline } from 'lucide-react';

export default function ToggleGroupDisabled() {
  return (
    <ToggleGroup.Root disabled>
      <ToggleGroup.Item aria-label="Toggle bold" value="bold">
        <Bold className="size-4" />
      </ToggleGroup.Item>
      <ToggleGroup.Item aria-label="Toggle italic" value="italic">
        <Italic className="size-4" />
      </ToggleGroup.Item>
      <ToggleGroup.Item aria-label="Toggle strikethrough" value="strikethrough">
        <Underline className="size-4" />
      </ToggleGroup.Item>
    </ToggleGroup.Root>
  );
}

Spacing

import * as ToggleGroup from '@components/caprice-ui/toggle-group';
import { BookmarkIcon, HeartIcon, StarIcon } from 'lucide-react';

export default function ToggleGroupSpacing() {
  return (
    <ToggleGroup.Root multiple size="sm" spacing={4} variant="outline">
      <ToggleGroup.Item
        aria-label="Toggle star"
        className="data-pressed:bg-transparent data-pressed:*:[svg]:fill-yellow-500 data-pressed:*:[svg]:stroke-yellow-500"
        value="star"
      >
        <StarIcon />
        Star
      </ToggleGroup.Item>
      <ToggleGroup.Item
        aria-label="Toggle heart"
        className="data-pressed:bg-transparent data-pressed:*:[svg]:fill-red-500 data-pressed:*:[svg]:stroke-red-500"
        value="heart"
      >
        <HeartIcon />
        Heart
      </ToggleGroup.Item>
      <ToggleGroup.Item
        aria-label="Toggle bookmark"
        className="data-pressed:bg-transparent data-pressed:*:[svg]:fill-blue-500 data-pressed:*:[svg]:stroke-blue-500"
        value="bookmark"
      >
        <BookmarkIcon />
        Bookmark
      </ToggleGroup.Item>
    </ToggleGroup.Root>
  );
}