##### Amara Evans

amara@example.com

Pro

### Upgrade to Pro

Get access to all features

- Advanced Analytics
- Team Collaboration
- API Access

Upgrade Now
Upgrade to Pro
Log Out

# 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-field` class
- Helper Text: Contextual guidance below inputs using `form-text` class
- Enhanced Buttons: Right-aligned submit button with Remix icon for visual appeal

Simple Form Layout
Loading...
Simple Form Layout
Loading...

### 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

Icon Enhanced Form
Loading...
Icon Enhanced Form
Loading...

### Read-only Form

A form with read-only state to display non-editable information:

- Disabled Fields: Uses the `disabled` attribute 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

Read-only Form
Loading...
Read-only Form
Loading...

### 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-separator` for clear section boundaries
- Enhanced Security: Password visibility toggle with accessibility support
- Action Buttons: Clearly labeled buttons with icons and proper spacing

Sectioned Form
Loading...
Sectioned Form
Loading...

## 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-6` for 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

Responsive Form
Loading...
Responsive Form
Loading...

### 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

Tabbed Form
Loading...
Tabbed Form
Loading...
`ESC`

###### Quick Links

###### Dashboard

Analytics Overview

###### Profile

View your profile

###### Settings

Manage preferences

###### Help Center

Get support

###### Recent Searches

Analytics Dashboard User Settings Email Templates