Pole wyboru

"use client"

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

Pole wyboru to standardowa kontrolka do wyborów binarnych — zaznaczone, odznaczone lub nieokreślone przy zaznaczeniu częściowym. Zbudowane na prymitywie Base UI Checkbox i ostylowane zgodnie z neobrutalistyczną recepturą: grube obramowania, twarde cienie i wyrazista typografia.

Sięgnij po ten komponent, gdy:

• Regulaminy i zgody — pole „Akceptuję regulamin” w rejestracji i przy płatności, wysyłane razem z formularzem.
• Filtry wielokrotnego wyboru — kategorie, tagi albo przedziały cen w panelu bocznym, gdzie każda kombinacja jest dozwolona.
• Zbiorcze zaznaczanie w tabelach — pola wyboru w wierszach plus nieokreślone „zaznacz wszystko” w nagłówku.

Instalacja#

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
Kopiuj

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

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

Użycie#

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

Kopiuj<Checkbox />

Stan zaznaczenia#

Użyj defaultChecked dla niekontrolowanych checkboxów albo checked i onCheckedChange, aby kontrolować stan.

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

Stan nieprawidłowy#

Ustaw aria-invalid na checkboxie i data-invalid na kontenerze pola, aby wyświetlić style błędu.

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

Przykłady#

Podstawowy#

Połącz checkbox z Field i FieldLabel, aby uzyskać poprawny układ i etykietowanie.

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

Opis#

Użyj FieldContent i FieldDescription dla tekstu pomocniczego.

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

Wyłączony#

Użyj propa disabled, aby uniemożliwić interakcję, i dodaj atrybut data-disabled do komponentu <Field> dla stylów wyłączenia.

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

Grupa#

Użyj wielu pól, aby utworzyć listę checkboxów.

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

Tabela#

"use client"

import * as React from "react"

RTL#

Aby włączyć obsługę RTL w Neobrutalism, zobacz przewodnik konfiguracji RTL.

"use client"

import * as React from "react"

Dostępność#

Pole wyboru realizuje wzorzec WAI-ARIA Checkbox: prymityw renderuje element role="checkbox" z aria-checked (w tym "mixed" dla stanu nieokreślonego) i synchronizuje ukryty natywny input, dzięki czemu wartość trafia do formularza.

Obsługa klawiatury:

Enter nie przełącza pola wyboru — tak przewiduje wzorzec ARIA, to nie błąd.

Referencja API#

Więcej informacji znajdziesz w dokumentacji Base UI.