Прапорець

"use client"

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

Чекбокс — стандартний контроль для бінарного вибору: позначено, не позначено або indeterminate для часткового вибору. Побудований на примітиві Base UI Checkbox і оформлений за рецептом необруталізму: товсті рамки, різкі тіні та масивний шрифт.

Коли це стане в пригоді:

• Умови та згода — прапорець «Я погоджуюсь» у реєстрації та оформленні замовлення, що відправляється з формою.
• Фільтри з множинним вибором — категорії, теги чи діапазони цін у бічній панелі, де допустима будь-яка комбінація.
• Масовий вибір у таблицях — чекбокси в рядках плюс 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,

Вимкнено#

Використовуйте проп 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" для indeterminate) і синхронізує приховане нативне поле, щоб значення відправлялося з формою.

Клавіатурні взаємодії:

Enter чекбокс не перемикає — так задумано в ARIA-патерні, це не помилка.

Довідник API#

Докладніше див. у документації Base UI.