# V checkbox group 15

> Food preference picker with independent cuisine and dietary checkbox groups

A shadcn/ui block from the [@cnippet](https://ui.cnippet.dev/) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/cnippet/v-checkbox-group-15).

- Page, with a live preview: https://shadcn.exchange/r/cnippet/v-checkbox-group-15
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/cnippet/v-checkbox-group-15-light-c94d4d763d316df1.png
- Registry item: https://ui.cnippet.dev/r/v-checkbox-group-15.json
- Categories: checkbox group
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ui.cnippet.dev/r/v-checkbox-group-15.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `@cnippet/checkbox-group`

## Files

### `registry/default/variants/v-checkbox-group-15.tsx`

```tsx
"use client";

import { useState } from "react";
import { Checkbox } from "@/registry/default/ui/checkbox";
import { CheckboxGroup } from "@/registry/default/ui/checkbox-group";
import { Label } from "@/registry/default/ui/label";

const CUISINES = [
  { id: "italian", label: "Italian" },
  { id: "japanese", label: "Japanese" },
  { id: "mexican", label: "Mexican" },
  { id: "indian", label: "Indian" },
  { id: "thai", label: "Thai" },
  { id: "american", label: "American" },
];

const DIETARY = [
  { id: "vegetarian", label: "Vegetarian" },
  { id: "vegan", label: "Vegan" },
  { id: "gluten-free", label: "Gluten-free" },
  { id: "halal", label: "Halal" },
];

export function Pattern() {
  const [cuisines, setCuisines] = useState<string[]>([]);
  const [dietary, setDietary] = useState<string[]>([]);

  return (
    <div className="w-full max-w-xs space-y-5">
      <p className="font-semibold text-sm">Food preferences</p>
      <div className="space-y-2">
        <p className="font-medium text-muted-foreground text-xs uppercase tracking-wide">
          Cuisines
        </p>
        <CheckboxGroup
          allValues={CUISINES.map((c) => c.id)}
          onValueChange={setCuisines}
          value={cuisines}
        >
          <Label className="mb-1 text-muted-foreground text-sm">
            <Checkbox parent />
            All cuisines
          </Label>
          <div className="ms-5 grid grid-cols-2 gap-x-4 gap-y-1">
            {CUISINES.map((c) => (
              <Label className="text-sm" key={c.id}>
                <Checkbox value={c.id} />
                {c.label}
              </Label>
            ))}
          </div>
        </CheckboxGroup>
      </div>
      <div className="space-y-2">
        <p className="font-medium text-muted-foreground text-xs uppercase tracking-wide">
          Dietary
        </p>
        <CheckboxGroup
          allValues={DIETARY.map((d) => d.id)}
          onValueChange={setDietary}
          value={dietary}
        >
          <Label className="mb-1 text-muted-foreground text-sm">
            <Checkbox parent />
            All dietary options
          </Label>
          <div className="ms-5 grid grid-cols-2 gap-x-4 gap-y-1">
            {DIETARY.map((d) => (
              <Label className="text-sm" key={d.id}>
                <Checkbox value={d.id} />
                {d.label}
              </Label>
            ))}
          </div>
        </CheckboxGroup>
      </div>
      {(cuisines.length > 0 || dietary.length > 0) && (
        <p className="text-muted-foreground text-xs">
          {[...cuisines, ...dietary].join(", ")}
        </p>
      )}
    </div>
  );
}
```