Components
Loading preview...
Here is Checkbox Group component
@SubframeApp
npx shadcn@latest add https://21st.dev/r/SubframeApp/checkbox-group-1import Component from "@/components/ui/checkbox-group-1";
export default function CheckboxGroupBasic() {
return (
<div className="max-w-md rounded-lg p-4 ring-1 bg-white text-gray-900 ring-gray-200 dark:bg-gray-800 dark:text-gray-100 dark:ring-gray-700">
<Component label="Preferences" helpText="Choose all that apply">
<label className="flex items-center gap-2">
<input type="checkbox" className="h-4 w-4 accent-indigo-600" defaultChecked />
<span>Email notifications</span>
</label>
<label className="flex items-center gap-2">
<input type="checkbox" className="h-4 w-4 accent-indigo-600" />
<span>Product updates</span>
</label>
<label className="flex items-center gap-2">
<input type="checkbox" className="h-4 w-4 accent-indigo-600" />
<span>Weekly summary</span>
</label>
</Component>
</div>
);
}