Checkbox

I agree to sell my privacy

Label

Color

Radius

Size

Disabled

Indeterminate

<Checkbox
  label="I agree to sell my privacy"
/>

States

<Checkbox checked={false} label="Default checkbox" />
<Checkbox checked={false} indeterminate label="Indeterminate checkbox" />
<Checkbox checked label="Checked checkbox" />
<Checkbox disabled label="Disabled checkbox" />
<Checkbox disabled checked label="Disabled checked checkbox" />
<Checkbox disabled indeterminate label="Disabled indeterminate checkbox" />

Replace icon

Custom icon

Custom icon: indeterminate

import { Biohazard, Radioactive } from 'tabler-icons-react';

const CheckboxIcon = ({ indeterminate, className }) =>
  indeterminate ? <Radioactive className={className} /> : <Biohazard className={className} />;

<Checkbox icon={CheckboxIcon} label="Custom icon" defaultChecked />
<Checkbox icon={CheckboxIcon} label="Custom icon: indeterminate" indeterminate mt="sm" />

Sizes

Checkbox has 5 predefined sizes: xs, sm, md, lg, xl. Size defines label font-size, input width and height:

<Checkbox size="xl" /> // -> predefined xl size

Indeterminate state

Checkbox supports indeterminate state. When indeterminate prop is true, checked prop is ignored:

Controlled

import { useState } from 'react';
import { Checkbox } from '@mantine/core';

function Demo() {
  const [checked, setChecked] = useState(false);
  return (
    <Checkbox checked={checked} onChange={(event) => setChecked(event.currentTarget.checked)} />
  );
}

Get input ref

import { useRef } from 'react';
import { Checkbox } from '@mantine/core';

function Demo() {
  const ref = useRef();
  return <Checkbox ref={ref} />;
}

Accessibility

Provide aria-label in case you use checkbox without label for screen reader support:

<Checkbox /> // -> not ok, input is not labeled
<Checkbox label="My checkbox" /> // -> ok, input and label is connected
<Checkbox aria-label="My checkbox" /> // -> ok, label is not visible but will be announced by screen reader