Флажок

"use client"

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

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

Когда это пригодится:

• Согласия и условия — галочка «Я согласен» при регистрации и оформлении заказа, уходит вместе с формой.
• Фильтры с множественным выбором — категории, теги или диапазоны цен в боковой панели, где допустимо любое сочетание.
• Массовое выделение в таблицах — чекбокс в каждой строке плюс неопределённый «выбрать всё» в заголовке.

Установка#

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" для неопределённого состояния) и синхронизирует скрытое нативное поле, чтобы значение уходило вместе с формой.

Управление с клавиатуры:

Enter чекбокс не переключает — так задумано в ARIA-паттерне, это не баг.

Справочник API#

Подробнее см. в документации Base UI.