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

You can see and test the complete example below.

Feedback​

To report a problem or suggest changes, use our improvements form or, if you prefer, open an issue on our Github repository.