Components
Loading preview...
Provides shared state for a series of checkboxes. Styled wrapper for CheckboxGroup from Base UI with support for parent checkboxes, indeterminate state, and nested groups.
npx shadcn@latest add https://21st.dev/r/coss.com/checkbox-group"use client";
import { useState } from "react";
import { Checkbox } from "@/components/ui/checkbox";
import { CheckboxGroup } from "@/components/ui/component";
import { Label } from "@/components/ui/label";
const frameworks = [
{ id: "next", name: "Next.js" },
{ id: "vite", name: "Vite" },
{ id: "astro", name: "Astro" },
];
export default function CheckboxGroupParent() {
const [value, setValue] = useState<string[]>([]);
return (
<div className="flex items-center justify-center w-full min-h-screen bg-background">
<CheckboxGroup
allValues={frameworks.map((f) => f.id)}
aria-labelledby="frameworks-caption"
onValueChange={setValue}
value={value}
>
<Label id="frameworks-caption">
<Checkbox name="frameworks" parent />
Frameworks
</Label>
{frameworks.map((framework) => (
<Label className="ms-4" key={framework.id}>
<Checkbox value={framework.id} />
{framework.name}
</Label>
))}
</CheckboxGroup>
</div>
);
}