v4.2.12

Checkbox

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

Usage

Color
Radius
xs
sm
md
lg
xl
Size
xs
sm
md
lg
xl
import { Checkbox } from '@mantine/core';


function Demo() {
  return (
    <Checkbox
      label="I agree to sell my privacy"
    />
  );
}

States

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


function Demo() {
  return (
    <>
      <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

import { Checkbox, CheckboxProps } from '@mantine/core';
import { Biohazard, Radioactive } from 'tabler-icons-react';


const CheckboxIcon: CheckboxProps['icon'] = ({ indeterminate, className }) =>
  indeterminate ? <Radioactive className={className} /> : <Biohazard className={className} />;


function Demo() {
  return (
    <>
      <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

You can get input ref by setting ref prop:

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


function Demo() {
  const ref = useRef<HTMLInputElement>();
  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

CheckboxGroup

Select your favorite framework/library
This is anonymous
Color
Orientation
Spacing
xs
sm
md
lg
xl
Size
xs
sm
md
lg
xl
import { CheckboxGroup, Checkbox } from '@mantine/core';


function Demo() {
  return (
    <CheckboxGroup
      defaultValue={['react']}
      label="Select your favorite framework/library"
      description="This is anonymous"
      required
    >
      <Checkbox value="react" label="React" />
      <Checkbox value="svelte" label="Svelte" />
      <Checkbox value="ng" label="Angular" />
      <Checkbox value="vue" label="Vue" />
    </CheckboxGroup>
  );
}

Controlled

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


function Demo() {
  const [value, setValue] = useState<string[]>([]);


  return (
    <CheckboxGroup value={value} onChange={setValue}>
      <Checkbox value="react" label="React" />
      <Checkbox value="svelte" label="Svelte" />
    </CheckboxGroup>
  );
}
Go back
Button – @mantine/core
Up next
Chips – @mantine/core
Build fully functional accessible web applications faster than ever
About
ContributeMedia assetsChangelogReleases
Community
Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
Project
Mantine UIDocumentationGithub organizationnpm organization
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter