Checkbox Group

Renders a group of checkboxes with parent/indeterminate support and animated checkmarks. Handles value changes and disabled states. Displays labels and supports select-all functionality. Use for selecting multiple options with visual feedback and controlled interactions.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/checkbox-group

npx layro-cli add @educlopez/checkbox-group

npx layro-cli add @educlopez/checkbox-group

bunx layro-cli add @educlopez/checkbox-group

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Dependencies

Demo

"use client";

import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
import { CheckboxGroup as CheckboxGroupPrimitive } from "@base-ui/react/checkbox-group";
import { cn } from "@/lib/utils";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { type ComponentProps, type ReactNode, useId } from "react";
import { SPRING_DEFAULT } from "@/components/smoothui/lib/animation";

export interface CheckboxGroupProps {
  /** All child values — required when using a parent item */
  allValues?: string[];
  /** Accessible name when there is no visible label */
  "aria-label"?: string;