Form

import { Form, FormField, FormLabel, FormDescription, FormError } from "@/components/ui/Form";
import { Input } from "@/components/ui/Input";
import { Textarea } from "@/components/ui/Textarea";
import { Button } from "@/components/ui/Button";

<Form onSubmit={handleSubmit}>
  <FormField>
    <FormLabel htmlFor="name" required>Name</FormLabel>
    <Input id="name" placeholder="Enter your name" />
    <FormDescription>Your full name as it appears on documents.</FormDescription>
  </FormField>
  
  <FormField>
    <FormLabel htmlFor="email" required>Email</FormLabel>
    <Input id="email" type="email" placeholder="you@example.com" />
  </FormField>
  
  <FormField>
    <FormLabel htmlFor="message">Message</FormLabel>
    <Textarea id="message" placeholder="Your message..." />
  </FormField>
  
  <Button type="submit">Submit</Button>
</Form>

<FormField>
  <FormLabel htmlFor="email" required>Email</FormLabel>
  <Input id="email" error placeholder="Invalid email" />
  <FormError>Please enter a valid email address.</FormError>
</FormField>