Toggle Group

Buttons

About

A multi-select group of toggle buttons for a toolbar (like text-style controls) with roving-tabindex arrow-key navigation and automatic tooltips on icon-only buttons; ported to React from the Sina UI Svelte component library by ebnsina.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Toggle Group to your project and fits it to your theme.

Code

How Toggle Group is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import ToggleGroup from "@/components/ui/toggle-group";
import { useState } from "react";

export default function ToggleGroupLabelsDemo() {
  const [columns, setColumns] = useState<string[]>(["arabic", "latin"]);

  return (
    <div style={{ display: "grid", gap: "1rem", justifyItems: "start" }}>
      <ToggleGroup
        label="Columns to show"
        size="sm"
        value={columns}
        onValueChange={setColumns}
        items={[
          { value: "arabic", label: "Arabic" },
          { value: "latin", label: "Latin" },
          { value: "commentary", label: "Commentary" },
          { value: "facsimile", label: "Facsimile", disabled: true },
        ]}
      />
      <p style={{ margin: 0, color: "var(--ui-muted)", fontSize: "0.875rem" }}>
        Showing: {columns.length ? columns.join(", ") : "nothing"}
      </p>
    </div>
  );
}