Checkbox Group

Lets the user select multiple options via individual checkboxes.

VegetarianVeganGluten-free

Installation

CLI

npx shadcn@latest add "https://eo-n.vercel.app/r/checkbox-group"

Manual

Copy and paste the following code into your project.

"use client";
 
import * as React from "react";
import { CheckboxGroup as CheckboxGroupPrimitive } from "@base-ui-components/react/checkbox-group";
 
import { cn } from "@/lib/utils";
 
function CheckboxGroup({
  className,
  ...props
}: React.ComponentProps<typeof CheckboxGroupPrimitive>) {
  return (
    <CheckboxGroupPrimitive
      data-slot="checkbox-group"
      className={cn(
        "flex flex-col space-y-2.5 disabled:cursor-not-allowed disabled:opacity-50 has-data-[parent=true]:ml-4",
        className
      )}
      {...props}
    />
  );
}
 
export { CheckboxGroup };

Update the import paths to match your project setup.

Import all parts and piece them together.

import { CheckboxGroup } from "@components/ui/checkbox-group";

<CheckboxGroup>
  <Checkbox />
</CheckboxGroup>

Examples

Parent Checkbox

Applesfujigalagranny-smith

Nested Parent Checkbox

Checkbox

Collapsible