Forms

Form components and patterns for collecting user input.

Input Fields
Basic text input components
<div className="space-y-2">
  <Label htmlFor="email">Email</Label>
  <Input id="email" type="email" placeholder="Enter your email" />
</div>
Textarea
Multi-line text input
<Textarea 
  placeholder="Enter your message..." 
  rows={5}
/>
Field Component
Input with label and description

We'll never share your email with anyone else.

Choose a unique username.

<Field>
  <FieldLabel>Email</FieldLabel>
  <FieldDescription>We'll never share your email.</FieldDescription>
  <Input type="email" placeholder="Enter your email" />
</Field>
Complete Form Example
A full form with validation and submission

Enter your first and last name

We'll use this to contact you

Tell us what you're thinking

Form Guidelines

Labels: Always provide clear labels for form inputs. Use the Label component and associate it with the input using htmlFor and id attributes.

Placeholders: Use placeholders to provide examples of expected input format, but don't rely on them as the only instruction.

Validation: Provide clear error messages when validation fails. Use the Field component's error prop to display validation errors.

Accessibility: Ensure all form inputs are keyboard accessible and work with screen readers. Use proper ARIA attributes when needed.

Required Fields: Clearly indicate required fields, either with an asterisk (*) or by stating "required" in the label.