v2.5.1
Discord
Source code

Checkbox

Capture boolean input from user
Import
Source
View source code
Docs
Edit this page
Package
@mantine/core

Usage

Use Checkbox to capture boolean value input from user. For better accessibility set label prop, it will add associated label element.

Size
Color
<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" />

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

You can get checkbox sizes by importing CHECKBOX_SIZES:

import { CHECKBOX_SIZES } from '@mantine/core';
Prop valueWidth and height
xs14px
sm18px
md22px
lg28px
xl34px

Indeterminate state

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

import React from 'react';
import { useListState, randomId } from '@mantine/hooks';
import { useMantineTheme, Checkbox } from '@mantine/core';


const initialValues = [
  { label: 'Receive email notifications', checked: false, key: randomId() },
  { label: 'Receive sms notifications', checked: false, key: randomId() },
  { label: 'Receive push notifications', checked: false, key: randomId() },
];


export function IndeterminateCheckbox() {
  const theme = useMantineTheme();
  const [values, handlers] = useListState(initialValues);


  const allChecked = values.every((value) => value.checked);
  const indeterminate = values.some((value) => value.checked) && !allChecked;


  const items = values.map((value, index) => (
    <Checkbox
      style={{ marginTop: theme.spacing.xs, marginLeft: 33 }}
      label={value.label}
      key={value.key}
      checked={value.checked}
      onChange={(event) => handlers.setItemProp(index, 'checked', event.currentTarget.checked)}
    />
  ));


  return (
    <div>
      <Checkbox
        checked={allChecked}
        indeterminate={indeterminate}
        label="Receive all notifications"
        transitionDuration={0}
        onChange={() =>
          handlers.setState((current) =>
            current.map((value) => ({ ...value, checked: !allChecked }))
          )
        }
      />
      {items}
    </div>
  );
}

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 element ref

You can get input ref by setting elementRef prop:

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


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

Server side rendering

Component uses use-id hook to generate unique ids and aria- attributes, provide static id prop to prevent props mismatch:

<Checkbox /> // -> random id generated both on client and server, props mismatch warning
<Checkbox id="my-checkbox" /> // -> id is static, no mismatches

Accessibility

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

<Checkbox label="My checkbox" />; // -> ok, input and label is connected
<Checkbox />; // not ok, input is not labeled
<Checkbox aria-label="My checkbox" />; // -> ok, label is not visible but will be announced by screen reader
Build fully functional accessible web applications with ease
Project
Contribute to MantineChangelogReleases
Community
Join Discord communityFollow on TwitterEmail newsletterGithub discussions
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter