CheckBox

A Checkbox lets users select one or more options. It’s commonly used in a Checkbox Group to present multiple choices, but can also be used individually to toggle a single option.

Source Code

uikit-react-core

Color

You can use the color prop to style the color of the checkbox.

<div className="flex gap-sm">
  <HvCheckBox defaultChecked color="primary" />
  <HvCheckBox defaultChecked color="positive" />
  <HvCheckBox defaultChecked color="coral" />
  <HvCheckBox defaultChecked color="#c73aa8" />
</div>

<div className="flex gap-sm">
  <HvCheckBox defaultChecked color="primary" />
  <HvCheckBox defaultChecked color="positive" />
  <HvCheckBox defaultChecked color="coral" />
  <HvCheckBox defaultChecked color="#c73aa8" />
</div>

Label position

Use the labelPosition prop to change the position of the label.

Label on the left

Label on the right

<div className="flex flex-col gap-sm">
  <HvCheckBox label="Label on the left" labelPosition="left" />
  <HvCheckBox label="Label on the right" labelPosition="right" />
</div>

<div className="flex flex-col gap-sm">
  <HvCheckBox label="Label on the left" labelPosition="left" />
  <HvCheckBox label="Label on the right" labelPosition="right" />
</div>

Controlled

You can share state control from a parent component. Clicking Checkbox 1 has no effect, while clicking Checkbox 2 updates the state and toggles both checkboxes.

Checkbox 1

Checkbox 2

import { useState } from "react";


export default function Demo() {
  const [isChecked, setIsChecked] = useState(false);


  return (
    <>
      <HvCheckBox checked={isChecked} label="Checkbox 1" />
      <HvCheckBox
        checked={isChecked}
        onChange={(_, checked) => setIsChecked(checked)}
        label="Checkbox 2"
      />
    </>
  );
}

import { useState } from "react";

export default function Demo() {
  const [isChecked, setIsChecked] = useState(false);

  return (
    <>
      <HvCheckBox checked={isChecked} label="Checkbox 1" />
      <HvCheckBox
        checked={isChecked}
        onChange={(_, checked) => setIsChecked(checked)}
        label="Checkbox 2"
      />
    </>
  );
}

CheckBox

Color

Label position

Controlled

Related components