Checkbox

Default checkbox

Hello worldHello world

Show code

default.tsx

import { Checkbox } from "@hrc/input";

export function CheckboxDefault() {
  return (
    <>
      <Checkbox />
      <Checkbox defaultChecked />
      <Checkbox label="Hello world" />
      <Checkbox label="Hello world" defaultChecked />
    </>
  );
}

Colors

Use the color prop to change the color of the checkbox.

PrimarySecondaryErrorInfoWarningSuccess

Show code

colors.tsx

import { Checkbox } from "@hrc/input";

const colors = [
  "primary",
  "secondary",
  "error",
  "info",
  "warning",
  "success",
] as const;

const toTitleCase = (str: string) => `${str[0].toUpperCase()}${str.slice(1)}`;

export function CheckboxColors() {
  return colors.map((color) => (
    <Checkbox
      key={`checkbox-${color}`}
      color={color}
      label={`${toTitleCase(color)}`}
      defaultChecked
    />
  ));
}

Disabled

Add the disabled prop to disable the checkbox.

toggle_offDisabledWith labelWith label

Show code

disabled.tsx

import { useState } from "react";
import { Checkbox } from "@hrc/input";
import { ToggleDisabled } from "./ToggleDisabled"

export function CheckboxDisabled() {
  const [disabled, setDisabled] = useState(false);

  return (
    <>
      <ToggleDisabled disabled={disabled} setter={setDisabled} />

      <Checkbox disabled={disabled} />
      <Checkbox disabled={disabled} defaultChecked />
      <Checkbox label="With label" disabled={disabled} />
      <Checkbox label="With label" disabled={disabled} defaultChecked />
    </>
  );
}

ToggleDisabled.tsx

import { Button } from "@hrc/button";
import { Icon } from "@hrc/material-icons";

type Props = {
  disabled: boolean;
  setter: (disabled: boolean) => void;
};

export function ToggleDisabled({ disabled, setter }: Props) {
  return (
    <Button
      color={disabled ? "info" : undefined}
      onClick={() => setter(!disabled)}
      className="toggle-disabled"
    >
      <Icon name={disabled ? "toggle_on" : "toggle_off"} />
      Disabled
    </Button>
  );
}

Sizes

Set the size prop to change the size of the checkbox.

Show code

sizes.tsx

import { Checkbox } from "@hrc/input";

export function CheckboxSizes() {
  return (
    <>
      <Checkbox size="small" defaultChecked />
      <Checkbox defaultChecked />
      <Checkbox size="large" defaultChecked />
    </>
  );
}

Custom icons

You can change the icons of the checkbox using the icon and iconChecked props.

thumb_upthumb_upbookmark_borderbookmark

Show code

icon.tsx

import { Checkbox } from "@hrc/input";
import { Icon } from "@hrc/material-icons";

export function CheckboxIcon() {
  return (
    <>
      <Checkbox
        icon={<Icon name="thumb_up" variant="outlined" />}
        iconChecked={<Icon name="thumb_up" />}
      />
      <Checkbox
        icon={<Icon name="bookmark_border" />}
        iconChecked={<Icon name="bookmark" />}
      />
    </>
  );
}

API

See documentation below for reference to all of the props, classes and CSS variables (custom properties) available for <Checkbox />:

• <Checkbox />