Checkbox

The <Checkbox> component is a reusable and customizable input element.

Example

Preview

I agree to the terms and conditions

Code

import React, { useState } from 'react';
import { Checkbox } from '@hv/ui/checkbox';

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

  const handleChange = e => {
    setIsChecked(e.target.checked);
  };

  return (
    <div className='flex items-center gap-2'>
      <Checkbox id='terms' checked={isChecked} onChange={handleChange} />
      <label htmlFor='terms'>I agree to the terms and conditions</label>
    </div>
  );
}

Props

Name	Description	Type
className	Additional classes for styling the checkbox	String
children	Optional content rendered next to the checkbox	React.ReactNode
ref	Forwarded reference to the input element	React.Ref<HTMLInputElement>
...props	Additional input properties from HTML attributes	HTMLInputAttributes

Customization

The approach for customization will vary depending on whether the customization is intended to be global for all consumers of the UI component or only as an override for a particular instance.

• If the customization is necessary for all use cases, update the component source code in the UI library package directly.
• Otherwise, pass className overrides. Class overrides can be applied to all sub-components.