Checkbox

Use defaultChecked for uncontrolled state or checked with onCheckedChange for controlled state. indeterminate shows a mixed value.

import { Checkbox } from '@manti-ui/react';

export default function CheckboxBasic() {
  return (
    <div className="grid gap-3">
      <Checkbox defaultChecked={false}>Unchecked</Checkbox>
      <Checkbox defaultChecked>Checked</Checkbox>
      <Checkbox indeterminate>Indeterminate</Checkbox>
      <Checkbox defaultChecked={false} disabled>
        Disabled
      </Checkbox>
    </div>
  );
}

Sizes

SmallMediumLarge

API

Prop	Type	Default	Description
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Control size.
`variant`	`MantiVariant`	`'primary'`	Active variant when checked.
`indeterminate`	`boolean`	`false`	Render the mixed/indeterminate state.
`children`	`ReactNode`	—	Optional trailing label.
`checked`	`boolean`	—	Controlled checked state.
`defaultChecked`	`boolean`	—	Initial checked state for uncontrolled usage.
`onCheckedChange`	`(checked: boolean) => void`	—	Called whenever the checked state changes.
`disabled`	`boolean`	—	Disable the control.
`invalid`	`boolean`	—	Mark the control as invalid.
`required`	`boolean`	—	Require the control in a form.
`readOnly`	`boolean`	—	Make the control read-only.
`name`	`string`	—	Form field name.
`value`	`string`	—	Form field value when checked.

Styling

Anatomy

Part	Selector	Description
`root`	`[data-scope="checkbox"][data-part="root"]`	The label wrapping the control and text.
`control`	`[data-scope="checkbox"][data-part="control"]`	The square box that shows the check.
`indicator`	`[data-scope="checkbox"][data-part="indicator"]`	The drawn check or dash inside the box.
`label`	`[data-scope="checkbox"][data-part="label"]`	The trailing text label, when `children` is set.

Tokens

Token	Controls
`--manti-checkbox-size`	size
`--manti-checkbox-radius`	radius
`--manti-checkbox-gap`	gap
`--manti-checkbox-font-size`	font size
`--manti-checkbox-indicator-size`	indicator size

Last updated 13 September 2026