Upgrade to Pro
Get access to all features
- Advanced Analytics
- Team Collaboration
- API Access
Vertical Form Layouts
Vertical forms are the industry standard for form layouts, offering superior readability and accessibility. They present form elements in a top-to-bottom flow, with labels positioned above their corresponding input fields. This layout excels in handling complex forms while maintaining clarity and user-friendliness. Our examples demonstrate how to enhance forms with modern features like icons, validation, responsive design, and progressive disclosure techniques.
Essential Form Layouts
Simple Form
A clean and straightforward form layout with essential form controls. Features include:
- Clear Labels: Descriptive labels above input fields for optimal readability
-
Required Fields: Clearly marked with asterisk (*) using the
required-fieldclass -
Helper Text: Contextual guidance below inputs using
form-textclass - Enhanced Buttons: Right-aligned submit button with Remix icon for visual appeal
Icon Enhanced Form
Enhance form fields with meaningful Remix icons for better visual cues:
- Visual Indicators: Icons help users quickly identify input purposes
-
Input Groups: Combines icons and inputs using Bootstrap's
input-group - Consistent Design: Maintains the simple form structure with added visual enhancements
- Modern Icons: Uses Remix icons for a contemporary look and feel
Read-only Form
A form with read-only state to display non-editable information:
-
Disabled Fields: Uses the
disabledattribute to prevent modifications - Visual Indicators: Clear visual feedback for non-editable state
- Helpful Messages: Informative text explaining why fields cannot be edited
- Icon Integration: Remix icons to enhance visual communication
Sectioned Form
Organize complex forms into logical sections for better user experience:
- Clear Sections: Distinct headings with icons to group related fields
-
Visual Separation: Uses
form-separatorfor clear section boundaries - Enhanced Security: Password visibility toggle with accessibility support
- Action Buttons: Clearly labeled buttons with icons and proper spacing
Advanced Form Layouts
Responsive Form
A responsive multi-column layout that adapts to different screen sizes:
-
Grid System: Uses Bootstrap's responsive grid with
col-md-6for optimal layout - Adaptive Fields: Full-width on mobile, two columns on larger screens
- Icon Integration: Consistent use of Remix icons across all input groups
- Enhanced UX: Clear delivery preferences with descriptive icons and labels
Tabbed Form
Break down complex forms into manageable sections using tabs:
- Progressive Disclosure: Shows related fields together to reduce cognitive load
- Enhanced Navigation: Tab headers with icons for better visual hierarchy
- Consistent Design: Maintains input group styling across all tabs
- Social Integration: Modern social media icons and properly formatted URLs