چک‌باکس

"use client"

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

چک‌باکس کنترل استاندارد برای انتخاب‌های دودویی است — checked، unchecked یا indeterminate برای انتخاب جزئی. بر پایهٔ Base UI Checkbox ساخته شده و با دستور پخت نئوبروتالیستی استایل شده: حاشیه‌های ضخیم، سایه‌های سخت و تایپوگرافی پررنگ.

برای این موارد از آن استفاده کنید:

• شرایط و رضایت — کادر «موافقم» در ثبت‌نام و checkout که با فرم submit می‌شود.
• فیلتر چندانتخابی — دسته، تگ یا بازهٔ قیمت در sidebar که هر ترکیبی معتبر است.
• انتخاب گروهی در جدول — چک‌باکس هر ردیف به‌همراه select-allِ indeterminate در header.

نصب#

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 را روی wrapper فیلد تنظیم کنید.

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,

غیرفعال#

برای جلوگیری از تعامل از prop disabled استفاده کنید و برای استایل‌های غیرفعال، ویژگی data-disabled را به کامپوننت <Field> اضافه کنید.

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#

برای فعال‌سازی پشتیبانی RTL در Neobrutalism، راهنمای پیکربندی RTL را ببینید.

"use client"

import * as React from "react"

دسترسی‌پذیری#

چک‌باکس از الگوی WAI-ARIA Checkbox پیروی می‌کند: primitive یک عنصر role="checkbox" با aria-checked (از جمله "mixed" برای وضعیت indeterminate) رندر می‌کند و یک input بومی پنهان را همگام می‌کند تا مقدار با فرم submit شود.

تعاملات صفحه‌کلید:

Enter چک‌باکس را toggle نمی‌کند — این مطابق الگوی ARIA است، نه باگ.

مرجع API#

برای اطلاعات بیشتر، مستندات Base UI را ببینید.