चेकबॉक्स

"use client"

import { Checkbox } from "@/components/ui/checkbox"

चेकबॉक्स बाइनरी विकल्पों का मानक कंट्रोल है — checked, unchecked, या आंशिक चयन के लिए indeterminate। यह Base UI Checkbox प्रिमिटिव पर बना है और नियोब्रूटलिस्ट रेसिपी के अनुसार स्टाइल किया गया है: मोटे बॉर्डर, कठोर छायाएँ और बोल्ड टाइपोग्राफ़ी।

इसे इन स्थितियों में चुनें:

• टर्म्स और सहमति — साइनअप और चेकआउट में "I agree" बॉक्स, फ़ॉर्म के साथ सबमिट।
• मल्टी-सेलेक्ट फ़िल्टर — साइडबार में कैटेगरी, टैग या क़ीमत रेंज जहाँ कोई भी संयोजन मान्य हो।
• टेबल में बल्क चयन — पंक्ति-वार चेकबॉक्स और हेडर में indeterminate select-all।

इंस्टॉलेशन#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/checkbox.json
npx shadcn@latest add https://neobrutalism.com/r/base/checkbox.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/checkbox.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/checkbox.json
कॉपी करें

pnpmnpmyarnbun
pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react
कॉपी करें

"use client"

import * as React from "react"
import { CheckIcon } from "lucide-react"
import { Checkbox as CheckboxPrimitive } from "radix-ui"

import { cn } from "@/lib/utils"

function Checkbox({
  className,
  ...props
}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
  return (
    <CheckboxPrimitive.Root
      data-slot="checkbox"
      className={cn(
        "peer relative flex size-5 shrink-0 items-center justify-center rounded border-2 bg-input shadow-sm transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive data-checked:border-border data-checked:bg-primary data-checked:text-primary-foreground",
        className
      )}
      {...props}
    >
      <CheckboxPrimitive.Indicator
        data-slot="checkbox-indicator"
        className="grid place-content-center text-current transition-none [&>svg]:size-3.5"
      >
        <CheckIcon />
      </CheckboxPrimitive.Indicator>
    </CheckboxPrimitive.Root>
  )
}

export { Checkbox }

उपयोग#

कॉपी करेंimport { Checkbox } from "@/components/ui/checkbox"

कॉपी करें<Checkbox />

चेक्ड स्टेट#

अनकंट्रोल्ड चेकबॉक्स के लिए defaultChecked का उपयोग करें, या स्टेट को कंट्रोल करने के लिए checked और onCheckedChange का उपयोग करें.

कॉपी करेंimport * as React from "react"
 
export function Example() {
  const [checked, setChecked] = React.useState(false)
 
  return <Checkbox checked={checked} onCheckedChange={setChecked} />
}

अमान्य स्टेट#

अमान्य स्टाइल दिखाने के लिए चेकबॉक्स पर aria-invalid और फ़ील्ड रैपर पर data-invalid सेट करें.

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

उदाहरण#

बुनियादी#

उचित लेआउट और लेबलिंग के लिए चेकबॉक्स को Field और FieldLabel के साथ जोड़ें.

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

विवरण#

हेल्पर टेक्स्ट के लिए FieldContent और FieldDescription का उपयोग करें.

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

अक्षम#

इंटरैक्शन रोकने के लिए disabled प्रॉप का उपयोग करें और अक्षम स्टाइल के लिए <Field> कंपोनेंट में data-disabled एट्रिब्यूट जोड़ें.

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

समूह#

चेकबॉक्स सूची बनाने के लिए कई फ़ील्ड का उपयोग करें.

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

तालिका#

"use client"

import * as React from "react"

RTL#

Neobrutalism में RTL सपोर्ट सक्षम करने के लिए, RTL कॉन्फ़िगरेशन गाइड देखें.

"use client"

import * as React from "react"

एक्सेसिबिलिटी#

चेकबॉक्स WAI-ARIA Checkbox पैटर्न का पालन करता है: प्रिमिटिव role="checkbox" एलिमेंट रेंडर करता है, aria-checked के साथ (indeterminate के लिए "mixed" सहित), और छिपा नेटिव इनपुट सिंक करता है ताकि वैल्यू फ़ॉर्म के साथ सबमिट हो।

कीबोर्ड इंटरैक्शन:

Enter चेकबॉक्स नहीं टॉगल करता — यह ARIA पैटर्न के अनुसार है, बग नहीं।

API रेफ़रेंस#

अधिक जानकारी के लिए Base UI डॉक्युमेंटेशन देखें.