"use client";

import * as React from "react";

import { cn } from "@/lib/utils";

export interface ToggleGroupOption {
  label: string;
  value: string;
  icon?: React.ReactNode;
  disabled?: boolean;
}

export interface ToggleGroupProps
  extends React.HTMLAttributes<HTMLDivElement> {
  options: ToggleGroupOption[];
  multiple?: boolean;
  value?: string;
  defaultValue?: string;
  values?: string[];
  defaultValues?: string[];
  orientation?: "horizontal" | "vertical";
  allowDeselect?: boolean;
  onValueChange?: (value: string) => void;
  onValuesChange?: (values: string[]) => void;
}

export function ToggleGroup({
  options,
  multiple = false,
  value,
  defaultValue,
  values,
  defaultValues,
  orientation = "horizontal",
  allowDeselect = false,
  className,
  onValueChange,
  onValuesChange,
  ...props
}: ToggleGroupProps) {
  const [internalValue, setInternalValue] = React.useState(defaultValue ?? "");
  const [internalValues, setInternalValues] = React.useState(
    defaultValues ?? []
  );

  const selectedValue = value ?? internalValue;
  const selectedValues = values ?? internalValues;

  const handleSelect = (optionValue: string) => {
    if (multiple) {
      const nextValues = selectedValues.includes(optionValue)
        ? selectedValues.filter((item) => item !== optionValue)
        : [...selectedValues, optionValue];
      if (values === undefined) {
        setInternalValues(nextValues);
      }
      onValuesChange?.(nextValues);
      return;
    }

    const shouldClear = allowDeselect && optionValue === selectedValue;
    const nextValue = shouldClear ? "" : optionValue;
    if (value === undefined) {
      setInternalValue(nextValue);
    }
    onValueChange?.(nextValue);
  };

  return (
    <div
      className={cn(
        "flex gap-2",
        orientation === "vertical" ? "flex-col" : "flex-row",
        className
      )}
      role="group"
      {...props}
    >
      {options.map((option) => {
        const isSelected = multiple
          ? selectedValues.includes(option.value)
          : selectedValue === option.value;
        const isDisabled = option.disabled;

        return (
          <button
            key={option.value}
            type="button"
            onClick={() => handleSelect(option.value)}
            disabled={isDisabled}
            aria-pressed={isSelected}
            className={cn(
              "inline-flex items-center justify-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium transition",
              "focus-visible:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border",
              "disabled:cursor-not-allowed disabled:opacity-50",
              isSelected ? "bg-muted text-foreground" : "bg-card text-foreground"
            )}
          >
            {option.icon ? (
              <span className="flex h-4 w-4 items-center justify-center text-foreground">
                {option.icon}
              </span>
            ) : null}
            <span>{option.label}</span>
          </button>
        );
      })}
    </div>
  );
}
Toggle Group

Dependencies

Files

Installation
