Kontrollkästchen

"use client"

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

Die Checkbox ist das Standard-Steuerelement für binäre Entscheidungen – angehakt, nicht angehakt oder unbestimmt für Teilauswahlen. Sie basiert auf dem Base UI Checkbox-Primitive und folgt dem neobrutalistischen Rezept: dicke Rahmen, harte Schatten und kräftige Typografie.

Die richtige Wahl für:

• AGB und Einwilligungen – die „Ich stimme zu“-Box in Registrierungs- und Checkout-Strecken, abgeschickt mit dem Formular.
• Mehrfachauswahl-Filter – Kategorien, Tags oder Preisspannen in einer Sidebar, in der jede Kombination gültig ist.
• Massenauswahl in Tabellen – Checkboxen pro Zeile plus ein unbestimmtes „Alle auswählen“ im Tabellenkopf.

Installation#

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
Kopieren

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

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

Verwendung#

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

Kopieren<Checkbox />

Aktivierter Zustand#

Verwende defaultChecked für unkontrollierte Checkboxen oder checked und onCheckedChange, um den Zustand zu steuern.

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

Ungültiger Zustand#

Setze aria-invalid auf die Checkbox und data-invalid auf den Feld-Wrapper, um die ungültigen Stile anzuzeigen.

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

Beispiele#

Grundlegend#

Kombiniere die Checkbox mit Field und FieldLabel für ein korrektes Layout und eine korrekte Beschriftung.

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

Beschreibung#

Verwende FieldContent und FieldDescription für Hilfetext.

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

Deaktiviert#

Verwende die Prop disabled, um Interaktion zu verhindern, und füge der <Field>-Komponente das Attribut data-disabled für deaktivierte Stile hinzu.

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

Gruppe#

Verwende mehrere Felder, um eine Checkbox-Liste zu erstellen.

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

Tabelle#

"use client"

import * as React from "react"

RTL#

Um RTL-Unterstützung in Neobrutalism zu aktivieren, siehe die RTL-Konfigurationsanleitung.

"use client"

import * as React from "react"

Barrierefreiheit#

Die Checkbox folgt dem WAI-ARIA-Checkbox-Pattern: Das Primitive rendert ein role="checkbox"-Element mit aria-checked (einschließlich "mixed" für den unbestimmten Zustand) und synchronisiert ein verstecktes natives Eingabefeld, damit der Wert mit Formularen abgeschickt wird.

Tastaturinteraktionen:

Enter schaltet eine Checkbox nicht um – das entspricht dem ARIA-Pattern und ist kein Bug.

API-Referenz#

Weitere Informationen findest du in der Base UI-Dokumentation.