مربع اختيار

"use client"

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

مربع الاختيار هو عنصر التحكم القياسي للخيارات الثنائية — محدد، غير محدد، أو غير محدد في حالة الاختيارات الجزئية. وهو مبني على العنصر الأساسي Base UI Checkbox ومصمم وفقًا لأسلوب «النيوبروتاليةي»: حدود سميكة، وظلال حادة، وخط عريض.

استخدمه عندما:

• الشروط والموافقة — مربع «أوافق» في عمليات التسجيل والدفع، والذي يتم إرساله مع النموذج.
• مرشحات التحديد المتعدد — الفئات أو العلامات أو نطاقات الأسعار في الشريط الجانبي حيث تكون أي تركيبة صالحة.
• التحديد الجماعي في الجداول — مربعات الاختيار لكل صف بالإضافة إلى خيار «تحديد الكل» غير المحدد في الرأس.

التثبيت#

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 لمنع التفاعل، وأضف السمة 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: يعرض العنصر الأساسي role="checkbox" مع aria-checked (بما فيها "mixed" للحالة غير المحددة بالكامل) ويُزامن مدخلًا أصليًا مخفيًا حتى تُرسل القيمة مع النماذج.

تفاعلات لوحة المفاتيح:

Enter لا يبدّل مربع الاختيار — ذلك وفق نمط ARIA، وليس خللًا.

مرجع API#

لمزيد من المعلومات، راجع وثائق Base UI.