Checkbox

Capture boolean input from user
Import

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

Download more icon variants from https://tabler-icons.io/i/biohazard
Download more icon variants from https://tabler-icons.io/i/radioactive
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
Download more icon variants from https://tabler-icons.io/i/search

Checkbox component props

NameTypeDescription
color
MantineColor
Key of theme.colors
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
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
inner.mantine-Checkbox-innerIncludes input and label
label.mantine-Checkbox-labelLabel element
input.mantine-Checkbox-inputCheckbox input element
icon.mantine-Checkbox-iconChecked or indeterminate state icon