ai 2

Group-multi Toggle

Buttons 3

About

A multi-select toggle button group where each option turns on and off independently, available in checked-button, counter-badge, removable-chip, select-all, and mixed icon/label styles.

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

Code

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

Usage.tsx

import {
  MultiToggleGroup,
  CountToggleGroup,
  ChipsToggleGroup,
  AllToggleGroup,
  MixedToggleGroup,
} from "@/components/ui/toggle-group-multi";

export default function ToggleGroupMultiDemo() {
  return (
    <div className="flex flex-col gap-6 p-6">
      <MultiToggleGroup />
      <CountToggleGroup />
      <ChipsToggleGroup />
      <AllToggleGroup />
      <MixedToggleGroup />
    </div>
  );
}

Dependencies

More by ai 2

View all
  • Ripple Buttons

    Ripple Buttons

    31
  • Styled Toggle Switches

    Styled Toggle Switches

    14
  • Styled Progress Bars

    Styled Progress Bars

    14
  • Styled Badges

    Styled Badges

    10
  • OTP Pin Input

    OTP Pin Input

    8
  • Particle Toggles

    Particle Toggles

    7
  • Input Group Glass

    Input Group Glass

    6
  • File Input

    File Input

    6

More in Buttons

View all
  • Button Save

    Button Save

    46
  • Button

    Button

    20
  • Eclipse Button

    Eclipse Button

    5
  • Button

    Button

    32
  • Button

    Button

    6
  • Button

    Button

    14
  • Button Group

    Button Group

    37
  • Split Button

    Split Button

    32