Checkbox

A checkbox is an input control that allows a user to select one or more options from a number of choices.

Examples
API

Basic

Checkbox

import Checkbox from '@atoms/checkbox/Checkbox';

const CheckboxBasic = () => {
  return (
    <>
      <Checkbox id="basic">Checkbox</Checkbox>
    </>
  );
};

export default CheckboxBasic;

Disabled

Checkbox

import Checkbox from '@atoms/checkbox/Checkbox';

const CheckboxDisabled = () => {
  return (
    <>
      <Checkbox disabled>Checkbox</Checkbox>
    </>
  );
};

export default CheckboxDisabled;

Controller

Checkbox: unchecked

import Checkbox from '@atoms/checkbox/Checkbox';
import { useState } from 'react';

const CheckboxController = () => {
  const [checked, setChecked] = useState(false);

  const onChange = () => setChecked(!checked);

  return (
    <>
      <Checkbox id="controller" checked={checked} onClick={onChange} onChange={onChange}>
        Checkbox: {checked ? 'checked' : 'unchecked'}
      </Checkbox>
    </>
  );
};

export default CheckboxController;

Size

Small

Medium

Large

X-large

import Checkbox from '@atoms/checkbox/Checkbox';

const CheckboxSize = () => {
  return (
    <>
      <Checkbox size="small" id="small">
        Small
      </Checkbox>
      <Checkbox size="medium" id="medium">
        Medium
      </Checkbox>
      <Checkbox size="large" id="large">
        Large
      </Checkbox>
      <Checkbox size="xlarge" id="xlarge">
        X-large
      </Checkbox>
    </>
  );
};

export default CheckboxSize;