Kickresume UI

Command Palette

Search for a command to run...

Checkbox

A control that allows the user to toggle between checked and not checked.

Loading…
"use client"

import { Checkbox } from "@/components/ui/checkbox"
import {
  Field,
  FieldContent,
  FieldDescription,
  FieldGroup,
  FieldLabel,
  FieldTitle,
} from "@/components/ui/field"
import { Label } from "@/components/ui/label"

export default function CheckboxDemo() {
  return (
    <FieldGroup className="max-w-sm">
      <Field orientation="horizontal">
        <Checkbox id="terms-checkbox" name="terms-checkbox" />
        <Label htmlFor="terms-checkbox">Accept terms and conditions</Label>
      </Field>
      <Field orientation="horizontal">
        <Checkbox
          id="terms-checkbox-2"
          name="terms-checkbox-2"
          defaultChecked
        />
        <FieldContent>
          <FieldLabel htmlFor="terms-checkbox-2">
            Accept terms and conditions
          </FieldLabel>
          <FieldDescription>
            By clicking this checkbox, you agree to the terms.
          </FieldDescription>
        </FieldContent>
      </Field>
      <Field orientation="horizontal" data-disabled>
        <Checkbox id="toggle-checkbox" name="toggle-checkbox" disabled />
        <FieldLabel htmlFor="toggle-checkbox">Enable notifications</FieldLabel>
      </Field>
      <FieldLabel>
        <Field orientation="horizontal">
          <Checkbox id="toggle-checkbox-2" name="toggle-checkbox-2" />
          <FieldContent>
            <FieldTitle>Enable notifications</FieldTitle>
            <FieldDescription>
              You can enable or disable notifications at any time.
            </FieldDescription>
          </FieldContent>
        </Field>
      </FieldLabel>
    </FieldGroup>
  )
}

Installation

pnpm dlx shadcn@latest add @kickresume/checkbox

Usage

import { Checkbox } from "@/components/ui/checkbox"
<FieldGroup className="max-w-sm">
  <Field orientation="horizontal">
    <Checkbox id="terms-checkbox" name="terms-checkbox" />
    <Label htmlFor="terms-checkbox">Accept terms and conditions</Label>
  </Field>
  <Field orientation="horizontal">
    <Checkbox
      id="terms-checkbox-2"
      name="terms-checkbox-2"
      defaultChecked
    />
    <FieldContent>
      <FieldLabel htmlFor="terms-checkbox-2">
        Accept terms and conditions
      </FieldLabel>
      <FieldDescription>
        By clicking this checkbox, you agree to the terms.
      </FieldDescription>
    </FieldContent>
  </Field>
  <Field orientation="horizontal" data-disabled>
    <Checkbox id="toggle-checkbox" name="toggle-checkbox" disabled />
    <FieldLabel htmlFor="toggle-checkbox">Enable notifications</FieldLabel>
  </Field>
  <FieldLabel>
    <Field orientation="horizontal">
      <Checkbox id="toggle-checkbox-2" name="toggle-checkbox-2" />
      <FieldContent>
        <FieldTitle>Enable notifications</FieldTitle>
        <FieldDescription>
          You can enable or disable notifications at any time.
        </FieldDescription>
      </FieldContent>
    </Field>
  </FieldLabel>
</FieldGroup>

Checked State

Use defaultChecked for uncontrolled checkboxes, or checked and onCheckedChange to control the state.

import * as React from "react"

export function Example() {
  const [checked, setChecked] = React.useState(false)

  return <Checkbox checked={checked} onCheckedChange={setChecked} />
}

Invalid State

Set aria-invalid on the checkbox and data-invalid on the field wrapper to show the invalid styles.

Loading…
"use client"

import { Checkbox } from "@/components/ui/checkbox"
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"

export default function CheckboxInvalid() {
  return (
    <FieldGroup className="mx-auto w-56">
      <Field orientation="horizontal" data-invalid>
        <Checkbox
          id="terms-checkbox-invalid"
          name="terms-checkbox-invalid"
          aria-invalid
        />
        <FieldLabel htmlFor="terms-checkbox-invalid">
          Accept terms and conditions
        </FieldLabel>
      </Field>
    </FieldGroup>
  )
}

Examples

Basic

Pair the checkbox with Field and FieldLabel for proper layout and labeling.

Loading…
"use client"

import { Checkbox } from "@/components/ui/checkbox"
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"

export default function CheckboxBasic() {
  return (
    <FieldGroup className="mx-auto w-56">
      <Field orientation="horizontal">
        <Checkbox id="terms-checkbox-basic" name="terms-checkbox-basic" />
        <FieldLabel htmlFor="terms-checkbox-basic">
          Accept terms and conditions
        </FieldLabel>
      </Field>
    </FieldGroup>
  )
}

Description

Use FieldContent and FieldDescription for helper text.

Loading…
"use client"

import { Checkbox } from "@/components/ui/checkbox"
import {
  Field,
  FieldContent,
  FieldDescription,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field"

export default function CheckboxDescription() {
  return (
    <FieldGroup className="mx-auto w-72">
      <Field orientation="horizontal">
        <Checkbox
          id="terms-checkbox-desc"
          name="terms-checkbox-desc"
          defaultChecked
        />
        <FieldContent>
          <FieldLabel htmlFor="terms-checkbox-desc">
            Accept terms and conditions
          </FieldLabel>
          <FieldDescription>
            By clicking this checkbox, you agree to the terms and conditions.
          </FieldDescription>
        </FieldContent>
      </Field>
    </FieldGroup>
  )
}

Disabled

Use the disabled prop to prevent interaction and add the data-disabled attribute to the <Field> component for disabled styles.

Loading…
"use client"

import { Checkbox } from "@/components/ui/checkbox"
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"

export default function CheckboxDisabled() {
  return (
    <FieldGroup className="mx-auto w-56">
      <Field orientation="horizontal" data-disabled>
        <Checkbox
          id="toggle-checkbox-disabled"
          name="toggle-checkbox-disabled"
          disabled
        />
        <FieldLabel htmlFor="toggle-checkbox-disabled">
          Enable notifications
        </FieldLabel>
      </Field>
    </FieldGroup>
  )
}

Group

Use multiple fields to create a checkbox list.

Loading…
"use client"

import { Checkbox } from "@/components/ui/checkbox"
import {
  Field,
  FieldDescription,
  FieldGroup,
  FieldLabel,
  FieldLegend,
  FieldSet,
} from "@/components/ui/field"

export default function CheckboxGroup() {
  return (
    <FieldSet>
      <FieldLegend variant="label">
        Show these items on the desktop:
      </FieldLegend>
      <FieldDescription>
        Select the items you want to show on the desktop.
      </FieldDescription>
      <FieldGroup className="gap-3">
        <Field orientation="horizontal">
          <Checkbox id="hard-disks" name="hard-disks" defaultChecked />
          <FieldLabel htmlFor="hard-disks" className="font-normal">
            Hard disks
          </FieldLabel>
        </Field>
        <Field orientation="horizontal">
          <Checkbox id="external-disks" name="external-disks" defaultChecked />
          <FieldLabel htmlFor="external-disks" className="font-normal">
            External disks
          </FieldLabel>
        </Field>
        <Field orientation="horizontal">
          <Checkbox id="cds-dvds" name="cds-dvds" />
          <FieldLabel htmlFor="cds-dvds" className="font-normal">
            CDs, DVDs, and iPods
          </FieldLabel>
        </Field>
        <Field orientation="horizontal">
          <Checkbox id="connected-servers" name="connected-servers" />
          <FieldLabel htmlFor="connected-servers" className="font-normal">
            Connected servers
          </FieldLabel>
        </Field>
      </FieldGroup>
    </FieldSet>
  )
}

Table

Loading…
"use client"

import * as React from "react"

import { Checkbox } from "@/components/ui/checkbox"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"

const jobApplications = [
  {
    id: "app-linear",
    company: "Linear",
    role: "Senior Frontend Engineer",
    location: "Remote · EU",
    stage: "Interview",
    appliedAt: "Jul 8",
  },
  {
    id: "app-vercel",
    company: "Vercel",
    role: "Developer Advocate",
    location: "Remote",
    stage: "Screening",
    appliedAt: "Jul 5",
  },
  {
    id: "app-figma",
    company: "Figma",
    role: "Product Designer",
    location: "London, UK",
    stage: "Offer",
    appliedAt: "Jun 28",
  },
  {
    id: "app-notion",
    company: "Notion",
    role: "Product Manager",
    location: "New York, US",
    stage: "Applied",
    appliedAt: "Jul 11",
  },
]

export default function CheckboxTable() {
  const [selectedRows, setSelectedRows] = React.useState<Set<string>>(
    new Set([jobApplications[0].id])
  )

  const selectAll = selectedRows.size === jobApplications.length
  const selectSome = selectedRows.size > 0 && !selectAll

  const handleSelectAll = (checked: boolean) => {
    if (checked) {
      setSelectedRows(new Set(jobApplications.map((row) => row.id)))
    } else {
      setSelectedRows(new Set())
    }
  }

  const handleSelectRow = (id: string, checked: boolean) => {
    const newSelected = new Set(selectedRows)
    if (checked) {
      newSelected.add(id)
    } else {
      newSelected.delete(id)
    }
    setSelectedRows(newSelected)
  }

  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead className="w-8">
            <Checkbox
              id="select-all-checkbox"
              name="select-all-checkbox"
              aria-label="Select all applications"
              checked={selectAll}
              indeterminate={selectSome}
              onCheckedChange={handleSelectAll}
            />
          </TableHead>
          <TableHead>Company</TableHead>
          <TableHead>Role</TableHead>
          <TableHead>Location</TableHead>
          <TableHead>Stage</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {jobApplications.map((row) => (
          <TableRow
            key={row.id}
            data-state={selectedRows.has(row.id) ? "selected" : undefined}
          >
            <TableCell>
              <Checkbox
                id={`row-${row.id}-checkbox`}
                name={`row-${row.id}-checkbox`}
                aria-label={`Select ${row.company}`}
                checked={selectedRows.has(row.id)}
                onCheckedChange={(checked) =>
                  handleSelectRow(row.id, checked === true)
                }
              />
            </TableCell>
            <TableCell className="font-medium">{row.company}</TableCell>
            <TableCell>{row.role}</TableCell>
            <TableCell>{row.location}</TableCell>
            <TableCell>{row.stage}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  )
}

API Reference

See the Base UI documentation for more information.