PersianLabs/ui

Checkbox

A control for selecting one or more options. Built on Base UI's checkbox primitive.

Last updated August 7, 2026

CreditsUnchangedPublished

Copied from shadcn/ui.

Overview

import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"
 
export function CheckboxDemoExample() {
  return (
    <div className="flex items-center gap-2">
      <Checkbox id="checkbox-demo-terms" />
      <Label htmlFor="checkbox-demo-terms">Accept terms and conditions</Label>
    </div>
  )
}

Installation

$ npx shadcn@latest add https://ui.persian-labs.ir/r/checkbox.json

Usage

import { Checkbox } from "@/components/ui/checkbox"
 
export function Example() {
  return <Checkbox />
}

Disabled

import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"
 
export function CheckboxDisabledExample() {
  return (
    <div className="flex items-center gap-2">
      <Checkbox id="checkbox-disabled" disabled />
      <Label htmlFor="checkbox-disabled">Accept terms and conditions</Label>
    </div>
  )
}

RTL

import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"
 
export function CheckboxRtlExample() {
  return (
    <div className="flex items-center gap-2">
      <Checkbox id="checkbox-rtl-terms" defaultChecked />
      <Label htmlFor="checkbox-rtl-terms">قوانین و مقررات را می‌پذیرم</Label>
    </div>
  )
}

API Reference

Checkbox

PropTypeDefaultDescription
checkedbooleanundefinedThe checked state. Use when controlled.
defaultCheckedbooleanfalseThe initial checked state when uncontrolled.
onCheckedChange(checked, details) => void—Called when the checked state changes.
indeterminatebooleanfalseWhether the checkbox is in a mixed/indeterminate state.
disabledbooleanfalsePrevents interaction with the checkbox.
Edit this page on GitHub
PreviousCardNextCity Selector