Checkbox

A checkbox lets users check or uncheck one option without changing any other. Its label names the option, and a click on the label changes the checkbox just as a click on the box does.

UsageCopy Anchor Link

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

export function CheckboxDefault() {
	return (
		<Field orientation="horizontal">
			<Checkbox id="print-shelf-labels"/>
			<FieldLabel htmlFor="print-shelf-labels">Print shelf labels</FieldLabel>
		</Field>
	);
}

ExamplesCopy Anchor Link

Checked by DefaultCopy Anchor Link

Some options hold true for most users, such as keeping a filter for the next visit. With defaultChecked, the checkbox starts checked, so users only act when the option does not suit their case.

ControlledCopy Anchor Link

Often the application needs the state of an option, for example to offer the next step only after users have confirmed it. Through checked and onCheckedChange, it holds that state itself, so the checkbox can also show a value that comes from saved data or from another part of the interface.

IndeterminateCopy Anchor Link

A checkbox that stands for a whole selection is only partly true when users have chosen some of its options but not all of them. The indeterminate prop puts it in this mixed state and exposes it to assistive technology, and the checkbox stays mixed, even when users click it, until the application sets the prop to false.

DisabledCopy Anchor Link

Not every option applies in every context, for example a report section without data for the chosen period. Where that is the case, disabled keeps the option in view while users can no longer check or uncheck it, and the checkbox exposes this state to assistive technology.

Read-OnlyCopy Anchor Link

Users sometimes need to see a decision that was made elsewhere, such as a setting that headquarters defines for every branch. Once readOnly is set, users can no longer change the checkbox, yet unlike a disabled one it stays reachable with the keyboard and is submitted with the form.

InvalidCopy Anchor Link

A form can require a confirmation before it accepts an entry, and users need to see at once which option is still missing. When validation fails, aria-invalid marks the checkbox as invalid, on screen as well as for assistive technology.

API ReferenceCopy Anchor Link