# V checkbox 8

> Issue Label Picker

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

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

## Install

```bash
npx shadcn@latest add https://ui.cnippet.dev/r/v-checkbox-8.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`

## Files

### `registry/default/variants/v-checkbox-8.tsx`

```tsx
"use client";

import { useState } from "react";

import { Checkbox } from "@/registry/default/ui/checkbox";
import { Separator } from "@/registry/default/ui/separator";

const labels = [
  { color: "bg-red-500", id: "bug", name: "bug" },
  { color: "bg-blue-500", id: "feature", name: "feature" },
  { color: "bg-yellow-500", id: "improvement", name: "improvement" },
  { color: "bg-green-500", id: "documentation", name: "documentation" },
  { color: "bg-purple-500", id: "design", name: "design" },
  { color: "bg-orange-500", id: "performance", name: "performance" },
  { color: "bg-pink-500", id: "security", name: "security" },
  { color: "bg-cyan-500", id: "testing", name: "testing" },
];

export function Pattern() {
  const [selected, setSelected] = useState<Set<string>>(
    new Set(["bug", "feature"]),
  );

  const toggle = (id: string) =>
    setSelected((prev) => {
      const next = new Set(prev);
      next.has(id) ? next.delete(id) : next.add(id);
      return next;
    });

  return (
    <div className="w-full max-w-xs space-y-3">
      <div className="flex items-center justify-between">
        <p className="font-semibold text-sm">Labels</p>
        <span className="text-muted-foreground text-xs">
          {selected.size} selected
        </span>
      </div>
      <Separator />
      <div className="space-y-0.5">
        {labels.map((label) => (
          <label
            className="flex cursor-pointer items-center gap-2.5 rounded-md px-2 py-1.5 hover:bg-accent"
            htmlFor={label.id}
            key={label.id}
          >
            <Checkbox
              checked={selected.has(label.id)}
              id={label.id}
              onCheckedChange={() => toggle(label.id)}
            />
            <span className={`size-2.5 shrink-0 rounded-full ${label.color}`} />
            <span className="text-sm">{label.name}</span>
          </label>
        ))}
      </div>
    </div>
  );
}
```