CheckBox

<div className="flex gap-xs items-start">
  <HvCheckBox label="Checkbox" />
  <HvCheckBox required label="Required" />
  <HvCheckBox defaultChecked label="Checked" />
  <HvCheckBox checked indeterminate label="Partial" />
  <HvCheckBox status="invalid" statusMessage="This is invalid!" label="Error" />
  <HvCheckBox aria-label="No visible label" />
</div>

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