@radix-ui/react-checkbox

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>
  );
}