Checkbox group

Groups checkboxes to select one or more options.

Email updatesSelect the messages you want to receive.

Product updates

Security alerts

Events

checkbox-group-demo.tsx

"use client";import { Checkbox } from "@/components/vip-ui/checkbox";import { CheckboxGroup } from "@/components/vip-ui/checkbox-group";export function CheckboxGroupDemo() {  return (    <CheckboxGroup      label="Email updates"      description="Select the messages you want to receive."      defaultValue={["security"]}      className="w-full max-w-sm"    >      <Checkbox value="product">Product updates</Checkbox>      <Checkbox value="security">Security alerts</Checkbox>      <Checkbox value="events">Events</Checkbox>    </CheckboxGroup>  );}

Installation

CLI

Manual

The CLI adds the files, packages, theme variables, and Tailwind plugin that this component uses. Before you run it, set up your project.

npm

yarn

pnpm

bun

pnpm dlx shadcn@latest add https://vip-ui.dev/r/vip-checkbox-group.json

Composition

CheckboxGroup
Owns the selected values. Lays out its children in a column.
- CheckboxGroupLabel
- CheckboxGroupDescription
- CheckboxGroupItemsOptional
  Changes the layout of the choices.
  - CheckboxRepeats
- CheckboxGroupError

Horizontal

checkbox-group-horizontal-demo.tsx

"use client";import { Checkbox } from "@/components/vip-ui/checkbox";import { CheckboxGroup } from "@/components/vip-ui/checkbox-group";const days = [  { id: "mon", label: "Mon" },  { id: "tue", label: "Tue" },  { id: "wed", label: "Wed" },  { id: "thu", label: "Thu" },  { id: "fri", label: "Fri" },];export function CheckboxGroupHorizontalDemo() {  return (    <CheckboxGroup      label="Backup days"      orientation="horizontal"      defaultValue={["mon", "wed", "fri"]}      className="w-full max-w-sm"    >      {days.map((day) => (        <Checkbox key={day.id} value={day.id}>          {day.label}        </Checkbox>      ))}    </CheckboxGroup>  );}

Card grid

Put CheckboxGroupItems between the label and the error to lay out the options.

Add-ons

Daily backups30 days of snapshots.

Priority supportReplies in 1 hour.

Single sign-onSAML and OIDC.

Audit logExport every event.

checkbox-group-layout-demo.tsx

"use client";import { Checkbox } from "@/components/vip-ui/checkbox";import {  CheckboxGroup,  CheckboxGroupError,  CheckboxGroupItems,  CheckboxGroupLabel,} from "@/components/vip-ui/checkbox-group";const addOns = [  {    id: "backups",    label: "Daily backups",    description: "30 days of snapshots.",  },  {    id: "support",    label: "Priority support",    description: "Replies in 1 hour.",  },  { id: "sso", label: "Single sign-on", description: "SAML and OIDC." },  { id: "audit", label: "Audit log", description: "Export every event." },];export function CheckboxGroupLayoutDemo() {  return (    <CheckboxGroup defaultValue={["backups"]} className="w-full max-w-md">      <CheckboxGroupLabel>Add-ons</CheckboxGroupLabel>      <CheckboxGroupItems className="grid gap-2 sm:grid-cols-2">        {addOns.map((addOn) => (          <Checkbox            key={addOn.id}            value={addOn.id}            variant="card"            description={addOn.description}          >            {addOn.label}          </Checkbox>        ))}      </CheckboxGroupItems>      <CheckboxGroupError />    </CheckboxGroup>  );}

Disabled

Alert channels

SMS

checkbox-group-disabled-demo.tsx

"use client";import { Checkbox } from "@/components/vip-ui/checkbox";import { CheckboxGroup } from "@/components/vip-ui/checkbox-group";export function CheckboxGroupDisabledDemo() {  return (    <CheckboxGroup      label="Alert channels"      defaultValue={["email"]}      isDisabled      className="w-full max-w-sm"    >      <Checkbox value="email">Email</Checkbox>      <Checkbox value="sms">SMS</Checkbox>    </CheckboxGroup>  );}

Required

Asks for at least one option. The error shows after the first submit. Also install Form and Button.

checkbox-group-required-demo.tsx

"use client";import { Button } from "@/components/vip-ui/button";import { Checkbox } from "@/components/vip-ui/checkbox";import { CheckboxGroup } from "@/components/vip-ui/checkbox-group";import { Form } from "@/components/vip-ui/form";export function CheckboxGroupRequiredDemo() {  return (    <Form      className="w-full max-w-sm"      onSubmit={(event) => {        event.preventDefault();      }}    >      <CheckboxGroup        label="Notification channels"        name="channels"        isRequired        errorMessage="Select at least one channel."      >        <Checkbox value="email">Email</Checkbox>        <Checkbox value="push">Push</Checkbox>      </CheckboxGroup>      <Button type="submit">Save</Button>    </Form>  );}

API reference

vip/ui adds or changes the props below. For all other props, see React Aria CheckboxGroup (opens in a new tab).

label: ReactNode: The label of the group. Without it, pass aria-label or compose CheckboxGroupLabel.
description: ReactNode: Help text for the group, below the label.
errorMessage: string | ((validation: ValidationResult) => string): Shown below the options when the group is invalid. Without it, the browser validation message shows. With label, description, or errorMessage, the group adds CheckboxGroupError for you.
orientation: "horizontal" | "vertical" = "vertical": Lays out the options in a column or a wrapping row.