Checkbox

An interactive element used to perform an action such as submitting a form or opening a dialog.

MDN checkbox, UI Playbook, Radix UI Checkbox

inline-flex items-center justify-center font-medium rounded transition-all shadow bg-white ring-1 ring-secondary-800 dark:bg-secondary-800 dark:ring-0 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-secondary-800 dark:focus:ring-secondary-400 h-5 w-5 cursor-pointer

text-secondary-800 dark:text-secondary-400 h-4 w-4

import React from 'react'
import { Checkbox } from '@components/ui/Checkbox';
import { Label } from '@components/ui/Label';

() => {
	const [checked, setChecked] = React.useState(false);

  return (
    <div className="flex items-center gap-2">
		  <Checkbox
        checked={checked} 
        id="terms-checkbox"
        kind="secondary"
        onCheckedChange={(value) => setChecked(value)}
      />
			<Label htmlFor="terms-checkbox" size="base">
				Accept terms and conditions
			</Label>
		</div>
  );
};

Installation

Install Radix UI's Checkbox:

yarn add @radix-ui/react-checkbox

# or
npm install @radix-ui/react-checkbox

Copy and paste this Checkbox primitive at components/ui/Checkbox.tsx

Anatomy

How to use all the parts together:

import { Checkbox } from '@components/ui/Checkbox';
import { IconCheck } from '@tabler/icons-react';

export default () => (
  <Checkbox icon={IconCheck} />
);

or you can pass the icon as a child:

import { Checkbox } from '@components/ui/Checkbox';
import { IconCheck } from '@tabler/icons-react';

export default () => (
  <Checkbox>
    <IconCheck className="h-4 w-4 text-white" />
  </Checkbox>
);

Usage

import { Checkbox } from '@components/ui/Checkbox';
import { Label } from '@components/ui/Label';

const [checked, setChecked] = React.useState(false);

...

<Checkbox
  id="terms"
  checked={checked} 
  onCheckedChange={(value) => setChecked(value)}
/>
<Label htmlFor="terms">
  Accept terms and conditions
</Label>

Examples

Kinds

There are two kinds of checkbox. You can update the variant by the kind prop. The default value is secondary.

Sizes

There are four sizes a checkbox can have. You can adjust the variant using the size prop. By default, it uses base.

Input Validation

Before and/or after the user submits their form, we validate what they've entered. We can use the success, warn, and error props to notify the users of the validation result.

Success

You can use the success prop to notify the users of a successful validation result.

Warning

You can use the warn prop to notify the users of a warning. It is recommended to avoid relying solely on color by adding an icon or a text to explain the warning.

Error

You can use the error prop to notify the users of that the validation failed. It is recommended to avoid relying solely on color by adding an icon or a text to explain the error.

Disabled State

Toggling the disabled prop to true will prevent any interactions to the checkbox.

Loading State

For the loading state, you can use a loading icon and add a disabled prop to prevent any interactions to the checkbox.

Selected

Toggle the selected prop will trigger the selected state.