v6.0.35

Checkbox

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

Usage

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


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

States

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


function Demo() {
  return (
    <>
      <Checkbox />
      <Checkbox indeterminate />
      <Checkbox checked indeterminate />
      <Checkbox checked />
      <Checkbox disabled />
      <Checkbox disabled checked />
      <Checkbox disabled indeterminate />
    </>
  );
}

Replace icon

import { Checkbox, CheckboxProps } from '@asuikit/core';
import { IconBiohazard, IconRadioactive } from '@tabler/icons-react';


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 '@asuikit/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 '@asuikit/core';


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

Checkbox.Group

Select your favorite frameworks/libraries
This is anonymous
import { Checkbox } from '@asuikit/core';


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

Controlled Checkbox.Group

import { useState } from 'react';
import { Checkbox } from '@asuikit/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 '@asuikit/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 – @asuikit/core
Up next
Chip – @asuikit/core

Checkbox component props

NameTypeDescription
color
MantineColor
Key of theme.colors
description
ReactNode
Description, displayed after the label
error
ReactNode
Error message displayed after the input
icon
FC<{ indeterminate: boolean; className: string; }>
Icon rendered when checkbox has checked or indeterminate state
indeterminate
boolean
Indeterminate state of checkbox, if set, `checked` prop is ignored
label
ReactNode
Checkbox label
labelPosition
"left" | "right"
Position of the label
radius
number | "xs" | "sm" | "md" | "lg" | "xl"
Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default
size
number | "xs" | "sm" | "md" | "lg" | "xl"
Controls label font-size and checkbox width and height
transitionDuration
number
Transition duration in ms
wrapperProps
Record<string, any>
Props added to the root element

Checkbox.Group component props

NameTypeDescription
children *
ReactNode
<Checkbox /> components
defaultValue
string[]
Initial selected checkboxes, use for uncontrolled components, overridden by value prop
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
onChange
(value: string[]) => void
Called when value changes
required
boolean
Adds required attribute to the input and red asterisk on the right side of label
size
"xs" | "sm" | "md" | "lg" | "xl"
Controls label font-size and checkbox width and height
value
string[]
Value of selected checkboxes, use for controlled components
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 added to Input.Wrapper component (root element)

Checkbox component Styles API

NameStatic selectorDescription
root.asuikit-Checkbox-rootRoot button element
body.asuikit-Checkbox-bodyMain element of checkbox
inner.asuikit-Checkbox-innerIncludes input and label
labelWrapper.asuikit-Checkbox-labelWrapperInclude label and description component
input.asuikit-Checkbox-inputCheckbox input element
icon.asuikit-Checkbox-iconChecked or indeterminate state icon
error.asuikit-Checkbox-errorError message
description.asuikit-Checkbox-descriptionDescription
label.asuikit-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