Onay kutusu

"use client"

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

Onay kutusu, ikili seçimlerin standart denetimidir — işaretli, işaretsiz ya da kısmi seçimler için belirsiz (indeterminate). Base UI Checkbox primitifi üzerine kuruludur ve neobrütalist reçeteye göre biçimlendirilmiştir: kalın kenarlıklar, sert gölgeler ve koyu tipografi.

Şu durumlarda tercih edin:

• Koşullar ve onay — kayıt ve ödeme akışlarındaki, formla birlikte gönderilen “Kabul ediyorum” kutusu.
• Çoklu seçim filtreleri — her kombinasyonun geçerli olduğu bir kenar çubuğunda kategoriler, etiketler veya fiyat aralıkları.
• Tablolarda toplu seçim — satır başına onay kutuları artı üstbilgide belirsiz durumlu bir tümünü-seç kutusu.

Kurulum#

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
Kopyala

pnpmnpmyarnbun
pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react
Kopyala

"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 }

Kullanım#

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

Kopyala<Checkbox />

İşaretli Durum#

Kontrolsüz onay kutuları için defaultChecked, durumu kontrol etmek için ise checked ve onCheckedChange kullanın.

Kopyalaimport * as React from "react"
 
export function Example() {
  const [checked, setChecked] = React.useState(false)
 
  return <Checkbox checked={checked} onCheckedChange={setChecked} />
}

Geçersiz Durum#

Geçersiz stilleri göstermek için onay kutusuna aria-invalid ve alan sarmalayıcısına data-invalid ayarlayın.

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

Örnekler#

Temel#

Doğru düzen ve etiketleme için onay kutusunu Field ve FieldLabel ile birlikte kullanın.

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

Açıklama#

Yardımcı metin için FieldContent ve FieldDescription kullanın.

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

Devre Dışı#

Etkileşimi önlemek için disabled prop'unu kullanın ve devre dışı stilleri için <Field> bileşenine data-disabled özniteliğini ekleyin.

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

Grup#

Bir onay kutusu listesi oluşturmak için birden fazla alan kullanın.

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

Tablo#

"use client"

import * as React from "react"

RTL#

Neobrutalism'de RTL desteğini etkinleştirmek için RTL yapılandırma kılavuzuna bakın.

"use client"

import * as React from "react"

Erişilebilirlik#

Onay kutusu, WAI-ARIA Checkbox desenini izler: primitif, aria-checked (belirsiz durum için "mixed" dâhil) taşıyan bir role="checkbox" öğesi işler ve değerin formlarla gönderilebilmesi için gizli bir doğal input'u eşitler.

Klavye etkileşimleri:

Enter onay kutusunu değiştirmez — bu bir hata değil, ARIA deseninin gereğidir.

API Referansı#

Daha fazla bilgi için Base UI belgelerine bakın.