CheckboxField

Checkbox paired with a label and optional description in a Base UI Field, which associates the label with the checkbox and links the description through 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 "@instruments/materia-ui/components/checkbox-field";

Best practices

Use CheckboxField for a single labelled checkbox - its Field wires the label and aria-describedby 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
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, Grid, Label, Text