Casella di spunta

"use client"

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

La checkbox è il controllo standard per le scelte binarie — selezionata, deselezionata o indeterminata per le selezioni parziali. Costruita sulla primitiva Base UI Checkbox e rifinita secondo la ricetta neobrutalista: bordi spessi, ombre nette e tipografia in grassetto.

Quando usarlo:

• Termini e consenso — la casella “Accetto” nei flussi di registrazione e checkout, inviata insieme al modulo.
• Filtri a selezione multipla — categorie, tag o fasce di prezzo in una barra laterale dove qualsiasi combinazione è valida.
• Selezione in blocco nelle tabelle — checkbox per ogni riga più un seleziona-tutto indeterminato nell’intestazione.

Installazione#

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
Copia

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

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

Utilizzo#

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

Copia<Checkbox />

Stato selezionato#

Usa defaultChecked per le checkbox non controllate, oppure checked e onCheckedChange per controllare lo stato.

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

Stato non valido#

Imposta aria-invalid sulla checkbox e data-invalid sul wrapper del campo per mostrare gli stili di errore.

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

Esempi#

Base#

Abbina la checkbox a Field e FieldLabel per un layout e un'etichettatura corretti.

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

Descrizione#

Usa FieldContent e FieldDescription per il testo di aiuto.

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

Disabilitato#

Usa la prop disabled per impedire l'interazione e aggiungi l'attributo data-disabled al componente <Field> per gli stili disabilitati.

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

Gruppo#

Usa più campi per creare un elenco di checkbox.

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

Tabella#

"use client"

import * as React from "react"

RTL#

Per abilitare il supporto RTL in Neobrutalism, consulta la guida alla configurazione RTL.

"use client"

import * as React from "react"

Accessibilità#

La checkbox segue il pattern WAI-ARIA Checkbox: la primitiva rende un elemento role="checkbox" con aria-checked (compreso "mixed" per lo stato indeterminato) e tiene sincronizzato un input nativo nascosto così che il valore venga inviato con i moduli.

Interazioni da tastiera:

Enter non commuta una checkbox — lo prevede il pattern ARIA, non è un bug.

Riferimento API#

Consulta la documentazione di Base UI per maggiori informazioni.