Kotak centang

"use client"

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

Checkbox adalah kontrol standar untuk pilihan biner — tercentang, tidak tercentang, atau indeterminate untuk seleksi parsial. Dibangun di atas primitif Base UI Checkbox dan ditata dengan resep neobrutalis: garis tepi tebal, bayangan keras, dan tipografi tebal.

Gunakan saat:

• Persetujuan dan ketentuan — kotak "Saya setuju" pada alur pendaftaran dan checkout, dikirim bersama formulir.
• Filter multi-pilih — kategori, tag, atau rentang harga di sidebar tempat kombinasi apa pun valid.
• Seleksi massal di tabel — checkbox per baris plus select-all indeterminate di header.

Instalasi#

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
Salin

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

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

Penggunaan#

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

Salin<Checkbox />

Status Tercentang#

Gunakan defaultChecked untuk checkbox tak terkontrol, atau checked dan onCheckedChange untuk mengontrol status.

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

Status Tidak Valid#

Setel aria-invalid pada checkbox dan data-invalid pada wrapper field untuk menampilkan gaya tidak valid.

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

Contoh#

Dasar#

Pasangkan checkbox dengan Field dan FieldLabel untuk tata letak dan pelabelan yang tepat.

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

Deskripsi#

Gunakan FieldContent dan FieldDescription untuk teks bantuan.

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

Nonaktif#

Gunakan prop disabled untuk mencegah interaksi dan tambahkan atribut data-disabled ke komponen <Field> untuk gaya nonaktif.

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

Grup#

Gunakan beberapa field untuk membuat daftar checkbox.

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

Tabel#

"use client"

import * as React from "react"

RTL#

Untuk mengaktifkan dukungan RTL di Neobrutalism, lihat panduan konfigurasi RTL.

"use client"

import * as React from "react"

Aksesibilitas#

Checkbox mengikuti pola Checkbox WAI-ARIA: primitifnya merender elemen role="checkbox" dengan aria-checked (termasuk "mixed" untuk status indeterminate) dan menyinkronkan input natif tersembunyi agar nilainya ikut terkirim bersama formulir.

Interaksi keyboard:

Enter tidak mengubah status checkbox — itu memang sesuai pola ARIA, bukan bug.

Referensi API#

Lihat dokumentasi Base UI untuk informasi lebih lanjut.