FormField

Formulário

Rótulo, controle e mensagem de ajuda ou erro. Liga tudo sozinho: o controle de dentro recebe id, nome acessível e estado de erro.

Substitui no Brain:Campopartners FieldCampoDeFiltro

Ajuda, obrigatório e erro

Como consta no CNPJ
Como consta no CNPJ
import { FormField, TextInput } from "@paytime/ui";

export default function Example() {
  return (
    <div className="grid max-w-md gap-4">
      <FormField label="Razão social" help="Como consta no CNPJ">
        <TextInput placeholder="Empresa LTDA" />
      </FormField>
      <FormField label="CNPJ" required error="Informe um CNPJ válido">
        <TextInput defaultValue="12.345.678" />
      </FormField>
    </div>
  );
}

Com React Hook Form e Zod

"use client";

import { Button, FormField, TextInput, toast } from "@paytime/ui";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { z } from "zod";

const schema = z.object({
  email: z.string().email("Informe um e-mail válido"),
});

export default function Example() {
  const { register, handleSubmit, formState: { errors } } = useForm<z.infer<typeof schema>>({
    resolver: zodResolver(schema),
  });
  return (
    <form onSubmit={handleSubmit(() => toast.success("Enviado"))} className="flex max-w-md flex-col gap-4">
      <FormField label="E-mail" required error={errors.email?.message}>
        <TextInput {...register("email")} placeholder="nome@paytime.com.br" />
      </FormField>
      <Button type="submit" className="self-start">Enviar</Button>
    </form>
  );
}