Pular para o conteúdo principal

Checkbox

Base​

Desabilitado​

Indeterminado​

Rótulo​

Texto pequeno​

Texto longo​

Como um nó​

Tamanhos​

Médio (padrão)​

Grande​

Com erro​

Controlado​

Selecionado por padrão​

Utilize a propriedade defaultChecked apenas quando não estiver controlando.

React Hook Form​

Use o componente Checkbox junto com o React Hook Form. Para isso, instale esta dependência no projeto.

yarn add react-hook-form
import React, { useMemo } from 'react';
import { useForm } from 'react-hook-form';
import {
  Form,
  Checkbox,
  Text,
  Button,
  InlineGroup
} from '@resultadosdigitais/tangram-components';

export default function WithReactHookForm() {
  const [submitted, onSubmit] = React.useState();
  const { register, handleSubmit } = useForm();

  const options = useMemo(
    () => [
      {
        id: 'option1',
        label: 'Option 1',
        value: 'Value 1'
      },
      {
        id: 'option2',
        label: 'Option 2',
        value: 'Value 2'
      },
      {
        id: 'option3',
        label: 'Option 3',
        value: 'Value 3'
      },
      {
        id: 'option4',
        label: 'Option 4',
        value: 'Value 4'
      }
    ],
    []
  );

  return (
    <>
      {submitted && (
        <Text>
          <strong>Submitted:</strong> <code>{JSON.stringify(submitted)}</code>
        </Text>
      )}

      <Form onSubmit={handleSubmit(onSubmit)}>
        <InlineGroup as={Form.Control} gap={5}>
          {options.map(({ id, label, value }) => (
            <Checkbox
              key={id}
              id={id}
              name={id}
              value={value}
              label={label}
              {...register(id)}
            />
          ))}
        </InlineGroup>

        <Button type="submit">Submit</Button>
      </Form>
    </>
  );
}

Você pode ver e testar o exemplo completo abaixo.

Feedback​

Para reportar algum problema, solicitar novos ícones, solicitar novos casos de uso de componentes, tirar dúvidas, enviar sugestões ou reportar bugs, entre em contato pelo nosso canal no Slack #tangram-design-system.