Components
Loading preview...
This is checkbox group component
npx shadcn@latest add https://21st.dev/r/lyanchouss/the-checkbox-group"use client";
import { useState } from "react";
import {
CheckboxGroup,
type CheckboxGroupOption,
} from "@/components/ui/checkbox-group";
const options: CheckboxGroupOption[] = [
{
group: "Pressing",
label: "High press",
value: "press",
description: "Close the alley when they receive on the turn",
},
{
group: "Pressing",
label: "Hold the half-spaces",
value: "halfspaces",
description: "Narrow tens, full-backs hold the width",
},
{
group: "Pressing",
label: "Back-three rehearsal",
value: "backthree",
description: "Not on the teamsheet for Saturday",
disabled: true,
disabledReason: "Available after the squad list is published.",
},
{
group: "Set pieces",
label: "Near-post corner trap",
value: "corner-trap",
description: "Front zone clear, weak-side winger seals the rebound lane",
},
{
group: "Set pieces",
label: "Late-run overload",
value: "late-run",
description: "Delay the extra runner until the second movement starts",
},
];
export function CheckboxGroupPreview() {
const [value, setValue] = useState<string[]>(["press"]);
return (
<div className="flex min-h-screen items-center justify-center p-4">
<CheckboxGroup
className="max-w-md"
onChange={setValue}
options={options}
value={value}
/>
</div>
);
}
export default CheckboxGroupPreview;