@superlogica/checkbox NPM

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')}/> 
    );
...