Checkbox Group

Forms 3

About

A multi-select option list where each row toggles with a spring-animated tick, supporting descriptions, grouping, disabled options and a collapsible show-more list.

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

Code

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

Usage.tsx

"use client";

import * as React from "react";
import { CheckboxGroup } from "@/components/ui/checkbox-group";

const options = [
  {
    label: "Push notifications",
    value: "push",
    description: "Get instant alerts on your devices",
  },
  {
    label: "Email digest",
    value: "email",
    description: "A weekly summary in your inbox",
  },
  {
    label: "SMS alerts",
    value: "sms",
    description: "Text messages for critical updates",
  },
  {
    label: "Slack integration",
    value: "slack",
    description: "Coming soon",
    disabled: true,
    disabledReason: "Available on the Team plan",
  },
];

export default function CheckboxGroupDemo() {
  const [value, setValue] = React.useState<string[]>(["push"]);

  return (
    <div className="flex w-full max-w-sm items-center justify-center p-6">
      <CheckboxGroup options={options} value={value} onChange={setValue} />
    </div>
  );
}