A box to check: checked, unchecked or indeterminate, with its words as one clickable label.

WebBêtaFormulaires

Web uniquement — React, depuis @krizaka/ui/checkbox. Bêta : son API peut encore changer à une version mineure.

Quand l’utiliser

In a form, for a choice that is submitted with it: accept the terms, subscribe to a list.
For several independent options in a list, and “select all” (indeterminate when some are).

Quand ne pas l’utiliser

For a setting that applies at once, without a submit.À la place : Switch
To choose one option among several.À la place : Radio group
To filter a list with a few options shown as pills.À la place : Chip

Installation

Installer

npm install @krizaka/ui@beta @krizaka/tailwind@beta @krizaka/tokens@beta tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Importer

import { Checkbox } from "@krizaka/ui/checkbox";

Exemples

Unchecked

Its words as children: one clickable label.

I accept the terms of use

import { Checkbox } from "@krizaka/ui/checkbox";

// Its words as children: one clickable label.
export default function CheckboxUnchecked() {
  return <Checkbox>I accept the terms of use</Checkbox>;
}

Checked

defaultChecked (or checked + onCheckedChange).

I accept the terms of use

import { Checkbox } from "@krizaka/ui/checkbox";

export default function CheckboxChecked() {
  return <Checkbox defaultChecked>I accept the terms of use</Checkbox>;
}

Indeterminate

checked="indeterminate": some of a list.

Select all videos

import { Checkbox } from "@krizaka/ui/checkbox";

// `checked="indeterminate"`: some of a list are selected.
export default function CheckboxIndeterminate() {
  return <Checkbox checked="indeterminate">Select all videos</Checkbox>;
}

Disabled

Not available, checked or not.

Email me the receiptsKeep me signed in

import { Checkbox } from "@krizaka/ui/checkbox";

export default function CheckboxDisabled() {
  return (
    <div className="flex flex-col gap-3">
      <Checkbox disabled>Email me the receipts</Checkbox>
      <Checkbox disabled defaultChecked>
        Keep me signed in
      </Checkbox>
    </div>
  );
}

Invalid

In a Field, with its error.

I am 18 or older

You must be 18 or older to continue.

import { Checkbox } from "@krizaka/ui/checkbox";
import { Field } from "@krizaka/ui/field";

// In a `Field`: `invalid` and its error, wired by `aria-describedby`.
export default function CheckboxInvalid() {
  return (
    <Field.Root className="w-80">
      <Checkbox invalid aria-describedby="age-error">
        I am 18 or older
      </Checkbox>
      <Field.Error id="age-error">You must be 18 or older to continue.</Field.Error>
    </Field.Root>
  );
}

Props

A checkbox: checked/defaultChecked (true · false · "indeterminate") + onCheckedChange.

Prop	Type	Défaut	Description
`children`	`ReactNode`	—	The text next to the box, clickable: the box and its words in one `<label>`. Otherwise name it with `Field.Label htmlFor` or `aria-label`.
`invalid`	`boolean`	—	Marks it invalid: aria-invalid and data-invalid (pair it with a `Field.Error` in aria-describedby).

Accessibilité

Radix Checkbox: role="checkbox" with aria-checked true, false or mixed.
The children are its label; without children, give it aria-label or a Field.Label htmlFor.
invalid sets aria-invalid; the error is read through aria-describedby.

Clavier

Touches	Action
`Space`	Toggles the box.

Bonnes pratiques

Say what checking does, in the positive: “Email me the receipts”, not “Don't email me”.
Pass the words as children: the whole line is the label and the click target.
In a Field, set invalid and point aria-describedby at the Field.Error.

Générée depuis le code de @krizaka/ui 2.0.0-beta.6 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub

Checkbox