Checkbox

Checkbox component.

Default

<Checkbox />

Checkbox is defined by UI/UX in styleguide : https://app.zeplin.io/styleguide/

Exemples

Checked

<div style={{ height:'30px', border : '2px solid', margin : '5px', padding : '2px' }}>
  <Checkbox checked size={15} />
</div>
<div style={{ height:'30px', border : '2px solid', margin : '5px', padding : '2px' }}>
  <Checkbox checked size={15} disabled/>
</div>

Not checked

<div style={{ height:'60px', border : '2px solid', margin : '5px', padding : '5px' }}>
  <div style={{margin : '5px'}}> 
    <Checkbox size={15} /> 
  </div>
  <div style={{margin : '5px'}}> 
    <Checkbox size={15} checked={false} disabled/>
  </div>
</div>

No specific size

<div style={{ height:'30px', width:'30px', border : '2px solid', padding : '2px' }}>
  <Checkbox checked />
</div>
<div style={{ height:'30px', width:'60px', border : '2px solid' }}>
  <Checkbox checked />
</div>

Code example :

  const [ischecked, setIschecked] = useState(false);

  return (
    <div
      onClick={() => setIschecked((prevCheck) => !prevCheck)}
      style={{
        height: '20px',
        border: '2px solid orange',
        display: 'flex',
        alignItems: 'center',
        cursor: 'pointer'
      }}
    >
      <Chekbox size={15} checked={ischecked} />
      <div> check me</div>
    </div>
  );

check me

Props

Name	Type	Required	Default	Description
size	number	No	100% container	Size of checkbox
checked	boolean	No	false	checked or not
disabled	boolean	No	false	disabled design