# V checkbox group 12

> Recurring schedule picker with weekday and weekend sub-groups and day count badge

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

- Page, with a live preview: https://shadcn.exchange/r/cnippet/v-checkbox-group-12
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/cnippet/v-checkbox-group-12-light-f2f7d02125417e7d.png
- Registry item: https://ui.cnippet.dev/r/v-checkbox-group-12.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-12.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-12.tsx`

```tsx
"use client";

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

const DAYS = [
  { id: "mon", label: "Mon" },
  { id: "tue", label: "Tue" },
  { id: "wed", label: "Wed" },
  { id: "thu", label: "Thu" },
  { id: "fri", label: "Fri" },
  { id: "sat", label: "Sat" },
  { id: "sun", label: "Sun" },
];

const WEEKDAYS = DAYS.slice(0, 5).map((d) => d.id);
const WEEKEND = DAYS.slice(5).map((d) => d.id);

export function Pattern() {
  const [value, setValue] = useState<string[]>(WEEKDAYS);

  const weekdayValues = value.filter((v) => WEEKDAYS.includes(v));
  const weekendValues = value.filter((v) => WEEKEND.includes(v));

  function updateSubValues(subIds: string[], newSubValues: string[]) {
    setValue((prev) => [
      ...prev.filter((v) => !subIds.includes(v)),
      ...newSubValues,
    ]);
  }

  return (
    <div className="w-full max-w-xs space-y-4">
      <div className="flex items-center justify-between">
        <p className="font-semibold text-sm">Recurring schedule</p>
        <Badge size="sm" variant="secondary">
          {value.length} days/wk
        </Badge>
      </div>
      <CheckboxGroup
        allValues={DAYS.map((d) => d.id)}
        onValueChange={setValue}
        value={value}
      >
        <Label className="font-medium text-muted-foreground text-sm">
          <Checkbox parent />
          Select all
        </Label>
        <div className="mt-1 ml-1 space-y-1 border-l pl-4">
          <CheckboxGroup
            allValues={WEEKDAYS}
            onValueChange={(v) => updateSubValues(WEEKDAYS, v)}
            value={weekdayValues}
          >
            <Label className="font-medium text-muted-foreground text-xs uppercase tracking-wide">
              <Checkbox parent />
              Weekdays
            </Label>
            {DAYS.slice(0, 5).map((d) => (
              <Label className="ms-5 text-sm" key={d.id}>
                <Checkbox value={d.id} />
                {d.label}
              </Label>
            ))}
          </CheckboxGroup>
          <CheckboxGroup
            allValues={WEEKEND}
            onValueChange={(v) => updateSubValues(WEEKEND, v)}
            value={weekendValues}
          >
            <Label className="mt-2 font-medium text-muted-foreground text-xs uppercase tracking-wide">
              <Checkbox parent />
              Weekend
            </Label>
            {DAYS.slice(5).map((d) => (
              <Label className="ms-5 text-sm" key={d.id}>
                <Checkbox value={d.id} />
                {d.label}
              </Label>
            ))}
          </CheckboxGroup>
        </div>
      </CheckboxGroup>
    </div>
  );
}
```