Input

Usage
• Examples
Code

Base

Disabled

Label

Prefix

Suffix

Kinds

Password

Email

Controlled

Helper text

Default

Success

The success message, as well as its style, should only be applied when the field needs some validation, such as a URL, for example. Success and error states are not directly related to each other.

Error

If the Input is filled in incorrectly, or its criteria are not met (such as the minimum amount of characters, for example), an error message should be displayed as validation.

Important: After correcting the error, the field state should revert to the default style.

React Hook Form

Use the Input 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,
  Input,
  Button,
  Text
} from '@resultadosdigitais/tangram-components';

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

  return (
    <>
      {submitted && (
        <Text>
          <strong>Submitted:</strong> <code>{JSON.stringify(submitted)}</code>
        </Text>
      )}
      <Form onSubmit={handleSubmit(onSubmit)}>
        <Form.Control error={Boolean(errors.login)}>
          <Form.Label htmlFor="input-with-rhf">Login</Form.Label>
          <Input
            id="input-with-rhf"
            placeholder="username"
            aria-describedby="input-with-rhf-feedback"
            {...register('login', {
              required: true,
              minLength: 3,
              maxLength: 10
            })}
          />
          {errors.login && (
            <Form.Feedback id="input-with-rhf-feedback">
              Minimum 3 and maximum 10 letters
            </Form.Feedback>
          )}
        </Form.Control>
        <Button type="submit">Submit</Button>
      </Form>
    </>
  );
}

See and test the full example below:

Schema validation

Use the Yup together with the React Hook Form to validate the form schema. For that, in addition to react-hook-form, install this dependency in the project.

yarn add @hookform/resolvers yup

import React from 'react';
import { useForm } from 'react-hook-form';
import {
  Form,
  Input,
  Button,
  Text
} from '@resultadosdigitais/tangram-components';
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';

const schema = yup
  .object({
    name: yup.string().required(),
    age: yup.number().positive().integer().required()
  })
  .required();

export default function InputSchemaValidation() {
  const {
    register,
    handleSubmit,
    formState: { errors }
  } = useForm({
    resolver: yupResolver(schema)
  });
  const [submitted, onSubmit] = React.useState();

  return (
    <>
      {submitted && (
        <Text>
          <strong>Submitted:</strong>{' '}
          <code data-testid="code-result">{JSON.stringify(submitted)}</code>
        </Text>
      )}
      <Form onSubmit={handleSubmit(onSubmit)}>
        <Form.Control error={Boolean(errors.name)}>
          <Form.Label htmlFor="input-schema-name">Name</Form.Label>
          <Input
            id="input-schema-name"
            aria-describedby="input-schema-name-feedback"
            {...register('name')}
          />
          {errors.name?.message && (
            <Form.Feedback id="input-schema-name-feedback">
              {errors.name?.message}
            </Form.Feedback>
          )}
        </Form.Control>
        <Form.Control error={Boolean(errors.age)}>
          <Form.Label htmlFor="input-schema-age">Age</Form.Label>
          <Input
            id="input-schema-age"
            aria-describedby="input-schema-age-feedback"
            type="number"
            {...register('age')}
          />
          {errors.age?.message && (
            <Form.Feedback id="input-schema-age-feedback">
              {errors.age?.message}
            </Form.Feedback>
          )}
        </Form.Control>
        <Button type="submit">Submit</Button>
      </Form>
    </>
  );
}

See and test the full example below:

Feedback