Form Patterns

Consistent form layouts, validation states, and input patterns.

---

Input States

Default

Focus

ErrorPlease enter a valid email address

Success✓ Email is available

Disabled

---

Form Layout

Vertical Layout (Default)

Full Name *

Email *

Message

---

Inline Layout

First Name

Last Name

---

Checkbox & Radio

Checkboxes

Option 1 (selected)

Option 2

Disabled

Radio Buttons

Option A (selected)

Option B

Option C

---

Helper Text

PasswordMust be at least 8 characters with one number

---

Input with Icon

Search

🔍

---

Validation Summary

Please fix the following errors:

• Email address is required
• Password must be at least 8 characters
• Please accept the terms and conditions

---

Code Examples

// Form field component
<div className="space-y-1">
  <label className="block text-sm font-medium text-gray-700">
    Email *
  </label>
  <input
    type="email"
    className="
      w-full px-4 py-3 rounded-lg border
      border-gray-300 focus:border-orange-500
      focus:ring-2 focus:ring-orange-500/20
      transition-colors
    "
    placeholder="you@example.com"
  />
  <p className="text-xs text-gray-500">
    We'll never share your email
  </p>
</div>

// Error state
<input
  className="
    border-red-500 bg-red-50
    focus:border-red-500 focus:ring-red-500/20
  "
/>
<p className="text-xs text-red-600">
  Please enter a valid email
</p>

// Form layout
<form className="space-y-6 max-w-md">
  <FormField label="Name" required />
  <FormField label="Email" type="email" required />
  <FormField label="Message" multiline />
  <Button type="submit" className="w-full">Submit</Button>
</form>

---

See Storybook for interactive form component examples.