7. Narrow viewport form label above input

Date

2024-04-21

Status

Accepted

Context

Our application includes various forms with labeled input fields. Currently, we have different implementations across components, with some using inline labels and others using block labels. On narrow viewports (mobile devices), inline labels can cause layout issues and reduce readability.

Key observations from current implementation:

1. Input components use block labels with className="block text-sm font-medium"
2. Some forms use inline layouts that become problematic on small screens
3. We have multiple form components (Input, TextArea, Toggle) with varying label implementations
4. Current accessibility could be improved with consistent label positioning

Intention

Create a consistent and accessible form layout pattern that:

• Improves readability on narrow viewports
• Maintains a clean layout on wider screens
• Enhances form accessibility
• Reduces implementation inconsistencies
• Provides clear visual hierarchy

Implementation

1. Base Form Field Structure:

   <div className="form-field">
     <label htmlFor={id} className="form-label">
       {label}
     </label>
     <input id={id} className="form-input" {...props} />
     {error && <p className="form-error">{error}</p>}
   </div>

2. Label Styling:

   .form-label {
     @apply block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2;
   }

3. Responsive Layout:

   .form-field {
     @apply space-y-1;
     /* On wider screens, optionally allow inline layout */
     @screen md {
       &.inline {
         @apply flex items-center gap-4;
         .form-label {
           @apply mb-0 min-w-[120px];
         }
       }
     }
   }

4. Component Updates:

   • Update Input, TextArea, and other form components to use consistent structure
   • Add optional inline prop for wider viewport layouts
   • Ensure consistent spacing and alignment
   • Maintain ARIA attributes and accessibility features

5. Accessibility Considerations:

   • Labels always visible (no placeholder-only fields)
   • Maintain label-input associations using htmlFor/id
   • Consistent error message positioning
   • Clear visual hierarchy with proper spacing
   • Support for required field indicators

6. Implementation Steps:

   1. Update base component styles in global.css
   2. Modify Input and TextArea components
   3. Update existing forms to use new structure
   4. Add responsive styles for optional inline layouts
   5. Test across different viewport sizes

This standardization will improve form usability across all viewport sizes while maintaining flexibility for specific use cases.