Input

Uso
• Exemplos
Código

Base

Desabilitado

Label

Prefixo

Sufixo

Tipos

Senha

Email

Controlado

Com texto de apoio

Padrão

Sucesso

A mensagem de sucesso, assim como seu estilo, deve ser aplicada somente quando o campo precisar de alguma validação, como uma URL, por exemplo. Os estados de sucesso e erro não têm relação direta entre si.

Erro

Se o Input for preenchido incorretamente, ou seus critérios não forem atendidos (como a quantidade mínima de caracteres, por exemplo), deve ser exibida uma mensagem de erro como validação.

Importante: Após correção do erro, o estado do campo deve voltar para o estilo padrão.

React Hook Form

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

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

Veja e teste o exemplo completo abaixo:

Validação de esquema

Use o Yup junto com o React Hook Form para validar o esquema do formulário. Para isso, além do react-hook-form instale esta dependência no projeto.

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

Veja e teste o exemplo completo abaixo:

Feedback