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 from 'react';
import { useForm } from 'react-hook-form';
import {
  Form,
  Checkbox,
  Text,
  Button
} from '@resultadosdigitais/tangram-components';

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

  const options = [
    {
      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)}>
        <Form.Control>
          {options.map(({ id, label, value }) => (
            <Checkbox
              key={id}
              id={id}
              name={id}
              value={value}
              label={label}
              {...register(id)}
            />
          ))}
        </Form.Control>
        <Button type="submit">Submit</Button>
      </Form>
    </>
  );
}

Você pode ver e testar o exemplo completo abaixo.

Feedback​