Checkbox Group

PreviousNext

A checkbox group allows a user to select multiple items from a list of options.

Docs API Reference
NotificationsSelect which notifications you'd like to receive.
"use client"

import { Checkbox, CheckboxGroup } from "@/components/ui/checkbox"

export function CheckboxGroupDemo() {
  return (
    <div className="flex flex-col gap-8">
      <CheckboxGroup
        label="Notifications"
        description="Select which notifications you'd like to receive."
      >
        <Checkbox value="email">Email notifications</Checkbox>
        <Checkbox value="push">Push notifications</Checkbox>
        <Checkbox value="sms">SMS notifications</Checkbox>
      </CheckboxGroup>
    </div>
  )
}

Installation

pnpm dlx shadcn@latest add checkbox

Usage

import { Checkbox } from "@/components/ui/checkbox"
<Checkbox />