Checkbox

import { Checkbox } from '@adoptaunabuelo/react-components';
import { useState } from 'react';

function TermsAcceptance() {
  const [accepted, setAccepted] = useState(false);

  return (
    <Checkbox
      label="I accept the terms and conditions"
      selected={accepted}
      onClick={() => setAccepted(!accepted)}
    />
  );
}

<Checkbox
  label="Option 1"
  sublabel="This is a sublabel description"
  selected={isSelected}
  onClick={handleClick}
/>

<Checkbox
  label="John Doe"
  avatarEnabled={true}
  selected={isSelected}
  onClick={handleClick}
/>

<Checkbox
  selected={isSelected}
  onClick={handleClick}
>
  <div>
    <strong>Custom Title</strong>
    <p style={{ fontSize: 12 }}>Custom description text</p>
  </div>
</Checkbox>

<Checkbox
  label="Option 4"
  selected={false}
  error={true}
  onClick={handleClick}
/>

<Checkbox
  label="Accept terms"
  position="right"
  selected={accepted}
  onClick={() => setAccepted(!accepted)}
/>

<Checkbox
  label="Circle checkbox"
  shape="circle"
  selected={isSelected}
  onClick={handleClick}
/>

<Checkbox
  label="Large checkbox"
  height={32}
  width={32}
  selected={isSelected}
  onClick={handleClick}
/>