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