Components

Input / Form

Campos de formulário com validação. Usado em lead capture, contato e cadastros.

Import

import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Label } from "@/components/ui/label"
import { Form, FormField, FormItem, FormLabel,
  FormControl, FormMessage, FormDescription } from "@/components/ui/form"

Estados — Input

Default

Com valor

Disabled

Com erro (via className)

E-mail inválido

Textarea

Lead capture — com validação

const form = useForm({ resolver: zodResolver(schema) })

<Form {...form}>
  <form onSubmit={form.handleSubmit(onSubmit)}>
    <FormField control={form.control} name="email"
      render={({ field }) => (
        <FormItem>
          <FormLabel>E-mail</FormLabel>
          <FormControl><Input {...field} /></FormControl>
          <FormMessage />
        </FormItem>
      )}
    />
  </form>
</Form>