Hộp kiểm

"use client"

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

Checkbox là điều khiển tiêu chuẩn cho các lựa chọn nhị phân — đã chọn, chưa chọn, hoặc trung gian khi chỉ chọn một phần. Được xây dựng trên primitive Base UI Checkbox và tạo kiểu theo công thức neobrutalist: viền dày, bóng đổ đậm và kiểu chữ đậm.

Nên dùng khi:

• Điều khoản và đồng ý — ô “Tôi đồng ý” trong luồng đăng ký và thanh toán, được gửi cùng form.
• Bộ lọc chọn nhiều — danh mục, thẻ hoặc khoảng giá trong sidebar, nơi mọi tổ hợp đều hợp lệ.
• Chọn hàng loạt trong bảng — checkbox trên từng dòng cộng thêm ô chọn tất cả ở trạng thái trung gian trên header.

Cài đặt#

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
Sao chép

pnpmnpmyarnbun
pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react
Sao chép

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

Cách dùng#

Sao chépimport { Checkbox } from "@/components/ui/checkbox"

Sao chép<Checkbox />

Trạng thái đã chọn#

Dùng defaultChecked cho các checkbox không kiểm soát, hoặc checked và onCheckedChange để kiểm soát trạng thái.

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

Trạng thái không hợp lệ#

Đặt aria-invalid trên checkbox và data-invalid trên wrapper của trường để hiển thị các kiểu không hợp lệ.

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

Ví dụ#

Cơ bản#

Kết hợp checkbox với Field và FieldLabel để có bố cục và nhãn phù hợp.

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

Mô tả#

Dùng FieldContent và FieldDescription cho văn bản trợ giúp.

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

Vô hiệu hóa#

Dùng prop disabled để ngăn tương tác và thêm thuộc tính data-disabled vào thành phần <Field> cho các kiểu vô hiệu hóa.

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

Nhóm#

Dùng nhiều trường để tạo một danh sách checkbox.

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

Bảng#

"use client"

import * as React from "react"

RTL#

Để bật hỗ trợ RTL trong Neobrutalism, hãy xem hướng dẫn cấu hình RTL.

"use client"

import * as React from "react"

Khả năng truy cập#

Checkbox tuân theo mẫu Checkbox của WAI-ARIA: primitive render một phần tử role="checkbox" kèm aria-checked (bao gồm "mixed" cho trạng thái trung gian) và đồng bộ với một input native ẩn để giá trị được gửi cùng form.

Tương tác bàn phím:

Enter không đổi trạng thái checkbox — đó là đúng theo mẫu ARIA, không phải lỗi.

Tham chiếu API#

Xem tài liệu Base UI để biết thêm thông tin.