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 CheckboxGroupHorizontal() {
return (
<div className="max-w-2xl 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="Notifications"
helpText="Select at least one channel"
horizontal
error
>
<label className="flex items-center gap-2">
<input type="checkbox" className="h-4 w-4 accent-indigo-600" />
<span>Email</span>
</label>
<label className="flex items-center gap-2">
<input type="checkbox" className="h-4 w-4 accent-indigo-600" defaultChecked />
<span>Push</span>
</label>
<label className="flex items-center gap-2">
<input type="checkbox" className="h-4 w-4 accent-indigo-600" />
<span>SMS</span>
</label>
</Component>
</div>
);
}