Toggle Group

group x multi

Multi-select toggle group with highlighted active items. From Bundui.

togglegroupmultibundui

Code

toggle-group.tsx

"use client";
import { useState } from "react";

export function ToggleGroup({ items }: { items: string[] }) {
  const [selected, setSelected] = useState<number[]>([]);
  function toggle(i: number) {
    setSelected(p => p.includes(i) ? p.filter(x => x !== i) : [...p, i]);
  }
  return (
    <div className="inline-flex rounded-lg border border-border p-1">
      {items.map((label, i) => (
        <button key={label} onClick={() => toggle(i)}
          className={`rounded-md px-4 py-1.5 text-sm font-medium transition-colors ${selected.includes(i) ? "bg-muted text-foreground" : "text-muted-foreground"}`}>
          {label}
        </button>
      ))}
    </div>
  );
}

Use it in another build

Paste the code into a component file, keep your project tokens (background, brand, radius) and it themes itself. Or tell Claude Code: “add the Toggle Group component and wire it to my accent.”