CheckboxField

Checkbox paired with a label and optional description, wired together for accessibility (generated id, htmlFor, and aria-describedby); forwards checkbox state props to the underlying Checkbox.

Notify me on restock

Get an alert when this material is back in stock.

Usage

import { CheckboxField, CheckboxFieldProps } from "@desk/ui/components/checkbox-field";

Best practices

Use CheckboxField for a single labelled checkbox — it generates the id/htmlFor/aria-describedby wiring you'd otherwise hand-roll around a bare Checkbox.
Put helper text in description (linked via aria-describedby), not a separate sibling element the screen reader won't announce with the control.
size accepts only "xs"/"sm"; for a full selectable card use CheckboxCardGroup, and render one CheckboxField per option for a set.

Props

Prop	Type	Default	Description
indeterminate	`boolean \| undefined`		When true, displays an indeterminate state (dash icon). This is syntactic sugar for checked="indeterminate".
label(required)	`React.ReactNode`		Clickable label rendered beside the checkbox.
description	`React.ReactNode`		Optional helper text below the label; wired to the checkbox via `aria-describedby`.
size	`"xs" \| "sm"`	`"xs"`
checkboxClassName	`string`
labelClassName	`string`
descriptionClassName	`string`

Also exports

typeCheckboxFieldProps

Composition

Builds on

Checkbox, Label, Text