CheckBox

A Checkbox is a mechanism that allows the user to select one or more options.

Usually used in a Checkbox Group to present the user with a range of options from which the user may select any number of options to complete their task.

It can also be used individually to represent the toggle of a single option, when the Toggle Switch and Toggle Button aren't more appropriate.

Source Code

uikit-react-core

<HvCheckBox 
  checked={false}
  indeterminate={false}
  required
  disabled={false}
  label="I have read and agree to the terms and conditions"
  statusMessage="Please accept the terms and conditions"
/>

<HvCheckBox 
  checked={false}
  indeterminate={false}
  required
  disabled={false}
  label="I have read and agree to the terms and conditions"
  statusMessage="Please accept the terms and conditions"
/>

Controlled

Controlled checkbox. Clicking the Checkbox 1 does nothing, while clicking Checkbox 2 changes both inputs.

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

Carousel Code Editor

CheckBox

Controlled

Related components