Form Components

Comprehensive form patterns with validation, layouts, and submission states

Text Inputs

Standard text fields, text areas, and specialized input types

This field is required

Selection Controls

Checkboxes, radio buttons, switches, and select dropdowns
Checkboxes
Radio Group
Switches
Select Dropdown

Range & Date Inputs

Sliders, calendars, and date pickers
SliderValue: 50
Drag the thumb to adjust the value from 0 to 100
Date Picker

Specialized Inputs

OTP inputs and custom input patterns
One-Time Password (OTP)
Enter the 6-digit code sent to your device

Complete Form Example

Real-world form with validation, error states, and submission handling

Account Registration

Form Best Practices

Validation
  • • Show errors after field blur or form submit
  • • Use clear, actionable error messages
  • • Indicate required fields with asterisk (*)
  • • Provide inline validation feedback
Accessibility
  • • Use semantic HTML (label, input, etc.)
  • • Associate labels with inputs via htmlFor
  • • Support keyboard navigation (tab order)
  • • Provide clear focus indicators
User Experience
  • • Group related fields together
  • • Use appropriate input types (email, tel, etc.)
  • • Show loading states during submission
  • • Provide success confirmation
Layout
  • • Stack fields vertically for mobile
  • • Use grid layout for related fields
  • • Maintain consistent spacing
  • • Align labels and inputs consistently
Form components from @/components/ui/