@radix-ui/react-checkbox

What is @radix-ui/react-checkbox?

@radix-ui/react-checkbox is a React component library that provides accessible and customizable checkbox components. It is part of the Radix UI suite, which focuses on providing unstyled, accessible components that can be easily styled to fit any design system.

What are @radix-ui/react-checkbox's main functionalities?

Basic Checkbox

This code demonstrates a basic checkbox component using @radix-ui/react-checkbox. The Checkbox.Root component is the main container, and Checkbox.Indicator is used to display the checkmark or other indicator.

import * as Checkbox from '@radix-ui/react-checkbox';

function BasicCheckbox() {
  return (
    <Checkbox.Root>
      <Checkbox.Indicator />
    </Checkbox.Root>
  );
}

Custom Styling

This example shows how to apply custom styles to the checkbox component. By adding className properties, you can style the checkbox and its indicator using CSS.

import * as Checkbox from '@radix-ui/react-checkbox';
import './styles.css';

function CustomStyledCheckbox() {
  return (
    <Checkbox.Root className="custom-checkbox">
      <Checkbox.Indicator className="custom-indicator" />
    </Checkbox.Root>
  );
}

Controlled Checkbox

This code demonstrates a controlled checkbox component where the checked state is managed by React's useState hook. The onCheckedChange event handler updates the state when the checkbox is toggled.

import * as Checkbox from '@radix-ui/react-checkbox';
import { useState } from 'react';

function ControlledCheckbox() {
  const [checked, setChecked] = useState(false);

  return (
    <Checkbox.Root checked={checked} onCheckedChange={setChecked}>
      <Checkbox.Indicator />
    </Checkbox.Root>
  );
}

Other packages similar to @radix-ui/react-checkbox

react-checkbox-group

react-checkbox-group is a simple React component for creating groups of checkboxes. It provides a straightforward API for managing the state of multiple checkboxes. Compared to @radix-ui/react-checkbox, it is more focused on grouping checkboxes rather than providing individual, highly customizable checkbox components.

react-toggle

react-toggle is a React component for creating toggle switches. While it is not a direct replacement for checkboxes, it serves a similar purpose in allowing users to toggle between two states. It offers a different visual representation compared to @radix-ui/react-checkbox.

rc-checkbox

rc-checkbox is a React component for creating customizable checkboxes. It provides a basic checkbox component with support for custom styles and controlled/uncontrolled states. It is similar to @radix-ui/react-checkbox in terms of functionality but may not offer the same level of accessibility features.

README

react-checkbox

Installation

$ yarn add @radix-ui/react-checkbox
# or
$ npm install @radix-ui/react-checkbox

Usage

View docs here.