תיבת סימון

"use client"

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

ה-checkbox הוא הבקרה הסטנדרטית לבחירות בינאריות — מסומן, לא מסומן, או indeterminate לבחירות חלקיות. נבנה על גבי הפרימיטיב Base UI Checkbox ומעוצב לפי המתכון הנאו-ברוטליסטי: מסגרות עבות, צללים חדים וטיפוגרפיה מודגשת.

השתמשו בו כש:

• תנאים והסכמה — תיבת "אני מסכים" בזרימות הרשמה ותשלום, שנשלחת עם הטופס.
• מסננים מרובי-בחירה — קטגוריות, תגיות או טווחי מחיר בסרגל צד שבהם כל שילוב תקף.
• בחירה מרובה בטבלאות — checkboxes לשורה ועוד select-all במצב indeterminate בכותרת.

התקנה#

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,

מושבת#

השתמשו ב-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"

נגישות#

ה-checkbox עוקב אחרי דפוס Checkbox של WAI-ARIA: הפרימיטיב מרנדר אלמנט role="checkbox" עם aria-checked (כולל "mixed" למצב indeterminate) ומסנכרן input מקורי מוסתר כך שהערך נשלח עם טפסים.

אינטראקציות מקלדת:

Enter לא מחליף checkbox — זה לפי דפוס ARIA, לא באג.

תיעוד ה-API#

למידע נוסף, עיינו בתיעוד של Base UI.