Checkbox

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

Usage

LabelPosition
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 indeterminate label="Indeterminate checked 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 { IconBiohazard, IconRadioactive } from '@tabler/icons';


const CheckboxIcon: CheckboxProps['icon'] = ({ indeterminate, className }) =>
  indeterminate ? <IconRadioactive className={className} /> : <IconBiohazard 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)} />
  );
}

Label with link

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


function Demo() {
  return (
    <Checkbox
      label={
        <>
          Accepts{' '}
          <Anchor size="sm" href="https://mantine.dev" target="_blank">
            terms and conditions
          </Anchor>
        </>
      }
    />
  );
}

Checkbox.Group

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


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

Controlled Checkbox.Group

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


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


  return (
    <Checkbox.Group value={value} onChange={setValue}>
      <Checkbox value="react" label="React" />
      <Checkbox value="svelte" label="Svelte" />
    </Checkbox.Group>
  );
}

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>(null);
  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
Go back
Autocomplete – @mantine/core
Up next
Chip – @mantine/core

Checkbox component props

NameTypeDescription
color
MantineColor
Key of theme.colors
description
ReactNode
description, displayed after label
error
ReactNode
Displays error message after input
icon
FC<{ indeterminate: boolean; className: string; }>
Icon rendered when checkbox has checked or indeterminate state
id
string
id to connect label with input
indeterminate
boolean
Indeterminate state of checkbox, overwrites checked
label
ReactNode
Checkbox label
labelPosition
"left" | "right"
Position of label
radius
number | "xs" | "sm" | "md" | "lg" | "xl"
Key of theme.radius or number to set border-radius in px
size
"xs" | "sm" | "md" | "lg" | "xl"
Predefined label font-size and checkbox width and height in px
transitionDuration
number
Transition duration in ms
wrapperProps
Record<string, any>
Props spread to wrapper element

Checkbox.Group component props

NameTypeDescription
children *
ReactNode
<Checkbox /> components only
defaultValue
string[]
Initial value for uncontrolled component
description
ReactNode
Input description, displayed after label
descriptionProps
Record<string, any>
Props spread to description element
error
ReactNode
Displays error message after input
errorProps
Record<string, any>
Props spread to error element
inputContainer
(children: ReactNode) => ReactNode
Input container component, defaults to React.Fragment
inputWrapperOrder
("input" | "label" | "error" | "description")[]
Controls order of the Input.Wrapper elements
label
ReactNode
Input label, displayed before input
labelProps
Record<string, any>
Props spread to label element
offset
number | "xs" | "sm" | "md" | "lg" | "xl"
Space between label and inputs
onChange
(value: string[]) => void
Called when value changes
orientation
"horizontal" | "vertical"
Horizontal or vertical orientation
required
boolean
Adds required attribute to the input and red asterisk on the right side of label
size
"xs" | "sm" | "md" | "lg" | "xl"
Predefined label fontSize, checkbox width, height and border-radius
spacing
number | "xs" | "sm" | "md" | "lg" | "xl"
Spacing between checkboxes in horizontal orientation
value
string[]
Value of currently selected checkbox
withAsterisk
boolean
Determines whether required asterisk should be rendered, overrides required prop, does not add required attribute to the input
wrapperProps
Record<string, any>
Props spread to InputWrapper

Checkbox component Styles API

NameStatic selectorDescription
root.mantine-Checkbox-rootRoot button element
body.mantine-Checkbox-bodyMain element of checkbox
inner.mantine-Checkbox-innerIncludes input and label
labelWrapper.mantine-Checkbox-labelWrapperInclude label and description component
input.mantine-Checkbox-inputCheckbox input element
icon.mantine-Checkbox-iconChecked or indeterminate state icon
error.mantine-Checkbox-errorError message
description.mantine-Checkbox-descriptionDescription
label.mantine-Checkbox-labelLabel
Learn more about Styles API
Build fully functional accessible web applications faster than ever
About
ContributeAbout MantineChangelogReleases
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