Checkbox

Selects or clears one independent option.

Email me product updates

checkbox-basic-demo.tsx

"use client";import { Checkbox } from "@/components/vip-ui/checkbox";export function CheckboxBasicDemo() {  return <Checkbox defaultSelected>Email me product updates</Checkbox>;}

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.json

Composition

CheckboxField
Owns the checked state and validation.
- CheckboxButton
  Its text becomes the accessible name.
  - CheckboxIndicator
  - CheckboxLabel
- CheckboxDescription
- CheckboxError

Checkbox Renders all of these parts from children, description, and errorMessage. Use the parts only for a custom layout.

Description

Weekly digestA short summary of your projects every Friday.

checkbox-description-demo.tsx

"use client";import { Checkbox } from "@/components/vip-ui/checkbox";export function CheckboxDescriptionDemo() {  return (    <Checkbox      description="A short summary of your projects every Friday."      className="max-w-sm"    >      Weekly digest    </Checkbox>  );}

Required

The error shows after the first submit. Also install Form and Button.

checkbox-required-demo.tsx

"use client";import { Button } from "@/components/vip-ui/button";import { Checkbox } from "@/components/vip-ui/checkbox";import { Form } from "@/components/vip-ui/form";export function CheckboxRequiredDemo() {  return (    <Form      className="w-full max-w-sm"      onSubmit={(event) => {        event.preventDefault();      }}    >      <Checkbox        name="terms"        isRequired        errorMessage="Accept the terms to continue."      >        I accept the terms of service      </Checkbox>      <Button type="submit">Create account</Button>    </Form>  );}

Indeterminate

Point aria-controls at the child options.

All email

Product updates

Weekly digest

Events

checkbox-demo.tsx

"use client";import { useId, useState } from "react";import { Checkbox } from "@/components/vip-ui/checkbox";import { CheckboxGroup } from "@/components/vip-ui/checkbox-group";const topics = [  { id: "product", label: "Product updates" },  { id: "digest", label: "Weekly digest" },  { id: "events", label: "Events" },];export function CheckboxDemo() {  const topicsId = useId();  const [selected, setSelected] = useState(["product"]);  const allSelected = selected.length === topics.length;  return (    <div className="grid w-full max-w-sm">      <Checkbox        aria-controls={topicsId}        isSelected={allSelected}        isIndeterminate={selected.length > 0 && !allSelected}        onChange={(isSelected) =>          setSelected(isSelected ? topics.map((topic) => topic.id) : [])        }      >        All email      </Checkbox>      <CheckboxGroup        id={topicsId}        aria-label="Email topics"        value={selected}        onChange={setSelected}        className="ps-8"      >        {topics.map((topic) => (          <Checkbox key={topic.id} value={topic.id}>            {topic.label}          </Checkbox>        ))}      </CheckboxGroup>    </div>  );}

Card

The whole card toggles the checkbox.

Daily backupsKeep 30 days of snapshots.

checkbox-card-demo.tsx

"use client";import { Checkbox } from "@/components/vip-ui/checkbox";export function CheckboxCardDemo() {  return (    <Checkbox      variant="card"      defaultSelected      description="Keep 30 days of snapshots."      className="w-full max-w-sm"    >      Daily backups    </Checkbox>  );}

Disabled

Security alerts

Beta features

checkbox-disabled-demo.tsx

"use client";import { Checkbox } from "@/components/vip-ui/checkbox";export function CheckboxDisabledDemo() {  return (    <div className="grid">      <Checkbox isDisabled defaultSelected>        Security alerts      </Checkbox>      <Checkbox isDisabled>Beta features</Checkbox>    </div>  );}

API reference

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

children: ReactNode: The label. Without it, pass aria-label so the checkbox has a name.
description: ReactNode: Help text below the label. Linked with aria-describedby, so it is not part of the name.
errorMessage: string | ((validation: ValidationResult) => string): Shown below the label when isRequired, validate, or isInvalid makes the checkbox invalid. Without it, the browser validation message shows.
checked: boolean | "indeterminate": Alias for isSelected. "indeterminate" sets isIndeterminate.
defaultChecked: boolean | "indeterminate": Alias for defaultSelected. "indeterminate" shows the indeterminate state until the first change.
onCheckedChange: (checked: boolean) => void: Alias for onChange. Both run when both are set.
variant: "default" | "card" = "default": Selects the plain or card appearance. A card toggles the checkbox from anywhere inside it. CheckboxField takes the same prop.