Checkbox

A checkbox is a form control that allows users to select zero or more options from a set of choices. Built on top of Radix UI's Checkbox primitive, it provides a consistent and accessible experience.

Installation

pnpm add @helgadigitals/vera-ui

npm install @helgadigitals/vera-ui

yarn add @helgadigitals/vera-ui

Usage

Accept terms and conditions

components/form-components-examples/checkbox-examples.tsx→CheckboxExample()✓ Auto-extracted

import { useState } from "react"
import { Checkbox, Button  } from "@helgadigitals/vera-ui"
import { useForm, Controller } from "react-hook-form"
function CheckboxExample() {
  return (
    <div className="flex items-center space-x-2">
      <Checkbox id="terms" />
      <label htmlFor="terms">Accept terms and conditions</label>
    </div>
  )
}

import { useState } from "react"import { Checkbox, Button  } from "@helgadigitals/vera-ui"import { useForm, Controller } from "react-hook-form"function CheckboxExample() {  return (    <div className="flex items-center space-x-2">      <Checkbox id="terms" />      <label htmlFor="terms">Accept terms and conditions</label>    </div>  )}

Examples

Basic Checkbox

Example checkbox

components/form-components-examples/checkbox-examples.tsx→BasicCheckboxExample()✓ Auto-extracted

import { useState } from "react"
import { Checkbox, Button  } from "@helgadigitals/vera-ui"
import { useForm, Controller } from "react-hook-form"
function BasicCheckboxExample() {
  return (
    <div className="flex items-center space-x-2">
      <Checkbox id="example" />
      <label htmlFor="example">Example checkbox</label>
    </div>
  )
}

import { useState } from "react"import { Checkbox, Button  } from "@helgadigitals/vera-ui"import { useForm, Controller } from "react-hook-form"function BasicCheckboxExample() {  return (    <div className="flex items-center space-x-2">      <Checkbox id="example" />      <label htmlFor="example">Example checkbox</label>    </div>  )}

Disabled State

Disabled unchecked

Disabled checked

components/form-components-examples/checkbox-examples.tsx→DisabledExample()✓ Auto-extracted

import { useState } from "react"
import { Checkbox, Button  } from "@helgadigitals/vera-ui"
import { useForm, Controller } from "react-hook-form"
function DisabledExample() {
  return (
    <div className="space-y-2">
      <div className="flex items-center space-x-2">
        <Checkbox id="disabled-unchecked" disabled />
        <label htmlFor="disabled-unchecked">Disabled unchecked</label>
      </div>
      <div className="flex items-center space-x-2">
        <Checkbox id="disabled-checked" disabled checked />
        <label htmlFor="disabled-checked">Disabled checked</label>
      </div>
    </div>
  )
}

import { useState } from "react"import { Checkbox, Button  } from "@helgadigitals/vera-ui"import { useForm, Controller } from "react-hook-form"function DisabledExample() {  return (    <div className="space-y-2">      <div className="flex items-center space-x-2">        <Checkbox id="disabled-unchecked" disabled />        <label htmlFor="disabled-unchecked">Disabled unchecked</label>      </div>      <div className="flex items-center space-x-2">        <Checkbox id="disabled-checked" disabled checked />        <label htmlFor="disabled-checked">Disabled checked</label>      </div>    </div>  )}

With Form Integration

components/form-components-examples/checkbox-examples.tsx→CheckboxFormExample()✓ Auto-extracted

import { useState } from "react"
import { Checkbox, Button  } from "@helgadigitals/vera-ui"
import { useForm, Controller } from "react-hook-form"
function CheckboxFormExample() {
  const { control, handleSubmit } = useForm()

  const onSubmit = (data: Record<string, unknown>) => {
    console.log(data)
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
      <Controller
        name="newsletter"
        control={control}
        render={({ field }) => (
          <div className="flex items-center space-x-2">
            <Checkbox
              id="newsletter"
              checked={field.value}
              onCheckedChange={field.onChange}
            />
            <label htmlFor="newsletter">Subscribe to newsletter</label>
          </div>
        )}
      />
      <Button type="submit">Submit</Button>
    </form>
  )
}

import { useState } from "react"import { Checkbox, Button  } from "@helgadigitals/vera-ui"import { useForm, Controller } from "react-hook-form"function CheckboxFormExample() {  const { control, handleSubmit } = useForm()  const onSubmit = (data: Record<string, unknown>) => {    console.log(data)  }  return (    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">      <Controller        name="newsletter"        control={control}        render={({ field }) => (          <div className="flex items-center space-x-2">            <Checkbox              id="newsletter"              checked={field.value}              onCheckedChange={field.onChange}            />            <label htmlFor="newsletter">Subscribe to newsletter</label>          </div>        )}      />      <Button type="submit">Submit</Button>    </form>  )}

Indeterminate State

Select all

Item 1

Item 2

Item 3

components/form-components-examples/checkbox-examples.tsx→CheckboxIndeterminateExample()✓ Auto-extracted

import { useState } from "react"
import { Checkbox, Button  } from "@helgadigitals/vera-ui"
import { useForm, Controller } from "react-hook-form"
function CheckboxIndeterminateExample() {
  const [items, setItems] = useState([
    { id: 1, checked: false, label: "Item 1" },
    { id: 2, checked: true, label: "Item 2" },
    { id: 3, checked: false, label: "Item 3" },
  ])

  const allChecked = items.every((item) => item.checked)
  const someChecked = items.some((item) => item.checked) && !allChecked

  const handleSelectAll = (checked: boolean | string) => {
    setItems(items.map((item) => ({ ...item, checked: checked === true })))
  }

  const handleItemChange = (id: number, checked: boolean | string) => {
    setItems(items.map((item) => 
      item.id === id ? { ...item, checked: checked === true } : item
    ))
  }

  return (
    <div className="space-y-2">
    <div className="flex items-center space-x-2">
      <Checkbox 
        id="select-all"
        checked={someChecked ? "indeterminate" : allChecked}
        onCheckedChange={handleSelectAll}
      />
      <label htmlFor="select-all">Select all</label>
    </div>
    <div className="ml-6 space-y-2">
      {items.map((item) => (
        <div key={item.id} className="flex items-center space-x-2">
          <Checkbox 
            id={`item-${item.id}`}
            checked={item.checked}
            onCheckedChange={(checked) => handleItemChange(item.id, checked)}
          />
          <label htmlFor={`item-${item.id}`}>{item.label}</label>
        </div>
      ))}
    </div>
  </div>
  )
}

import { useState } from "react"import { Checkbox, Button  } from "@helgadigitals/vera-ui"import { useForm, Controller } from "react-hook-form"function CheckboxIndeterminateExample() {  const [items, setItems] = useState([    { id: 1, checked: false, label: "Item 1" },    { id: 2, checked: true, label: "Item 2" },    { id: 3, checked: false, label: "Item 3" },  ])  const allChecked = items.every((item) => item.checked)  const someChecked = items.some((item) => item.checked) && !allChecked  const handleSelectAll = (checked: boolean | string) => {    setItems(items.map((item) => ({ ...item, checked: checked === true })))  }  const handleItemChange = (id: number, checked: boolean | string) => {    setItems(items.map((item) =>       item.id === id ? { ...item, checked: checked === true } : item    ))  }  return (    <div className="space-y-2">    <div className="flex items-center space-x-2">      <Checkbox         id="select-all"        checked={someChecked ? "indeterminate" : allChecked}        onCheckedChange={handleSelectAll}      />      <label htmlFor="select-all">Select all</label>    </div>    <div className="ml-6 space-y-2">      {items.map((item) => (        <div key={item.id} className="flex items-center space-x-2">          <Checkbox             id={`item-${item.id}`}            checked={item.checked}            onCheckedChange={(checked) => handleItemChange(item.id, checked)}          />          <label htmlFor={`item-${item.id}`}>{item.label}</label>        </div>      ))}    </div>  </div>  )}

API Reference

Props

The Checkbox component accepts all props from Radix UI's Checkbox component:

Prop

Type

Data Attributes

The following data attributes are automatically applied and can be used for styling:

Attribute	Values	Description
`data-state`	`"checked" \| "unchecked" \| "indeterminate"`	The checkbox state
`data-disabled`	Present when disabled	Applied when the checkbox is disabled

Accessibility

The Checkbox component follows WAI-ARIA guidelines:

Keyboard Navigation: Space key toggles the checkbox state
Screen Readers: Proper ARIA attributes and semantic checkbox element
Focus Management: Clear focus indicators with keyboard navigation
Labeling: Use proper label elements with htmlFor attribute or aria-label

Labeling: Always provide a clear, descriptive label for checkboxes. Use the label element with the htmlFor attribute pointing to the checkbox's id.

// Good: Properly labeled checkbox
<div className="flex items-center space-x-2">
  <Checkbox id="terms" />
  <label htmlFor="terms">I accept the terms and conditions</label>
</div>

// Also good: Using aria-label for compact layouts
<Checkbox aria-label="Select item" />

Styling

The Checkbox component uses CSS variables for theming and supports both light and dark modes. You can customize its appearance using Tailwind CSS classes:

<Checkbox className="h-5 w-5 border-2 border-blue-500" />

Integration with Form Libraries

React Hook Form

import { useForm, Controller } from "react-hook-form"
import { Checkbox } from "@helgadigitals/vera-ui"

function MyForm() {
  const { control } = useForm()

  return (
    <Controller
      name="agreement"
      control={control}
      render={({ field }) => (
        <Checkbox
          checked={field.value}
          onCheckedChange={field.onChange}
        />
      )}
    />
  )
}

Formik

import { Formik, Field } from "formik"
import { Checkbox } from "@helgadigitals/vera-ui"

function MyForm() {
  return (
    <Formik initialValues={{ terms: false }} onSubmit={() => {}}>
      <Field name="terms">
        {({ field, form }) => (
          <Checkbox
            checked={field.value}
            onCheckedChange={(value) => form.setFieldValue(field.name, value)}
          />
        )}
      </Field>
    </Formik>
  )
}

Checkbox

On this page