@superlogica/checkbox

COMPONENT CHECKBOX

Esse package contém o componente checkbox da Superlógica para web/desktop, seguindo nossos Tokens e padrões.

Instalação:

npm install @superlogica/checkbox

Props

Configure as props checked e onChange para o componente funcionar corretamente. Csaso de alguma props receber um valor inválido, o valor default daquela props será utilizado.

Props	Type	Default
variant	String	check	aceita os valores check, minus e cross.
checked	Boolean	false	recebe o valor do seu state que determina se o checkbox está selecionado ou não.
dark	boolean	false	altera a cor do label para um tom claro quando for true
value	String	null	recebe o valor do checkbox.
label	String	null	label do respectivo checkbox.
marginTop	String	none	aceita os tamanhos de margin encontrados na documentação, ex: lg, md, sm.
marginRight	String	none	aceita os tamanhos de margin encontrados na documentação, ex: lg, md, sm.
marginBottom	String	md	aceita os tamanhos de margin encontrados na documentação, ex: lg, md, sm.
marginLeft	String	none	aceita os tamanhos de margin encontrados na documentação, ex: lg, md, sm.
onChange	fn	null	recebe a função para alterar o state que determina se o checkbox está selecionado ou não.

Uso

import CheckBox from '@superlogica/checkbox';
import { useState } from 'react';

...
     const [checkBoxes, setCheboxes] = useState({
          checkedA: false
     });

     const handleCheckBox = name => event => {
        setStateForm({ ...checkBoxes, [name]: event.target.checked });
     };

    return (
       <Checkbox 
          variant="check" 
          checked={stateForm.checkedA}
          value="checkedA"
          label="checkbox teste"
          onChange={handleCheckBox('checkedA')}/> 
    );
...

License

MIT