Checkbox

Ready

Multi-selection checkbox inputs for forms and lists

Basic Checkbox

Simple checkbox with label

Controlled Checkbox

Manage checkbox state in your component

Checkbox is unchecked

Checkbox List

Multiple checkboxes with "select all" option

Checkbox with Description

Checkboxes with additional context

Receive emails about new products, features, and more.

Get notified about important security updates and patches.

Disabled State

Checkboxes can be disabled

Installation

Install the required dependencies

npm install @radix-ui/react-checkbox

Usage

Basic implementation example

import { Checkbox } from '@/components/ui/checkbox'
import { Label } from '@/components/ui/label'

export default function Example() {
  return (
    <div className="flex items-center space-x-2">
      <Checkbox id="terms" />
      <Label htmlFor="terms">
        Accept terms and conditions
      </Label>
    </div>
  )
}

Props

Checkbox component props

PropTypeDefaultDescription
checkedboolean | 'indeterminate'-Controlled checked state
defaultCheckedbooleanfalseDefault checked state (uncontrolled)
onCheckedChange(checked: boolean | 'indeterminate') => void-Callback when state changes
disabledbooleanfalseDisable the checkbox
requiredbooleanfalseMark as required in forms

Features

Built-in functionality

  • Keyboard accessible - Space to toggle
  • Indeterminate state - For partial selections
  • Controlled & uncontrolled - Flexible state management
  • Smooth transitions - 200ms color transitions
  • Focus ring - Clear focus indicator
  • 2px border radius - Subtle rounded corners