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.
"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>
);
}