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

<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

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

Carousel Checkbox Group

CheckBox

Controlled

Related components