Skip to main content

Checkbox

Base​

Disabled​

Indeterminate​

Label​

Small text​

Large text​

As a node​

Sizes​

Medium (default)​

Large​

With error​

Controlled​

Default checked​

Use the defaultChecked property only when is uncontrolled.

React Hook Form​

Use the Checkbox component together with the React Hook Form. To do this, install this dependency in the project.

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

You can see and test the complete example below.

Feedback​