Selectievakje

"use client"

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

De checkbox is de standaardcontrol voor binaire keuzes — aangevinkt, uitgevinkt of onbepaald bij gedeeltelijke selecties. Gebouwd op de Base UI Checkbox-primitive en vormgegeven volgens het neobrutalistische recept: dikke randen, harde schaduwen en vette typografie.

Gebruik deze component bij:

• Voorwaarden en toestemming — het "Ik ga akkoord"-vakje in registratie- en afrekenflows, meegestuurd met het formulier.
• Filters met meervoudige selectie — categorieën, tags of prijsklassen in een zijbalk waar elke combinatie geldig is.
• Bulkselectie in tabellen — een checkbox per rij plus een onbepaalde alles-selecteren-checkbox in de koptekst.

Installatie#

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
Kopiëren

pnpmnpmyarnbun
pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react
Kopiëren

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

Gebruik#

Kopiërenimport { Checkbox } from "@/components/ui/checkbox"

Kopiëren<Checkbox />

Aangevinkte staat#

Gebruik defaultChecked voor ongecontroleerde checkboxes, of checked en onCheckedChange om de staat te beheren.

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

Ongeldige staat#

Stel aria-invalid in op de checkbox en data-invalid op de veld-wrapper om de ongeldige stijlen te tonen.

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

Voorbeelden#

Basis#

Combineer de checkbox met Field en FieldLabel voor een correcte lay-out en labeling.

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

Beschrijving#

Gebruik FieldContent en FieldDescription voor helptekst.

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

Uitgeschakeld#

Gebruik de disabled-prop om interactie te voorkomen en voeg het data-disabled-attribuut toe aan het <Field>-component voor uitgeschakelde stijlen.

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

Groep#

Gebruik meerdere velden om een checkboxlijst te maken.

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

Tabel#

"use client"

import * as React from "react"

RTL#

Om RTL-ondersteuning in Neobrutalism in te schakelen, zie de RTL-configuratiegids.

"use client"

import * as React from "react"

Toegankelijkheid#

De checkbox volgt het WAI-ARIA Checkbox-patroon: de primitive rendert een element met role="checkbox" en aria-checked (inclusief "mixed" voor de onbepaalde status) en synchroniseert een verborgen native input, zodat de waarde met formulieren wordt meegestuurd.

Toetsenbordinteracties:

Enter wisselt een checkbox niet — dat is conform het ARIA-patroon, geen bug.

API-referentie#

Zie de Base UI-documentatie voor meer informatie.