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

WebBetaForms

Web only — React, from @krizaka/ui/checkbox. Beta: its API may still change in a minor version.

When to use

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).

When not to use

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

Installation

Install

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

Styles

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

Import

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

Examples

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	Default	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).

Accessibility

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.

Keyboard

Keys	Action
`Space`	Toggles the box.

Best practices

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.

Generated from the code of @krizaka/ui 2.0.0-beta.6: its meta.ts, its examples and its types.Edit this documentation on GitHub

Checkbox