Vertical Tabs_v1

A Vertical tabs layout in an Adaptive Form is a way to organize and group related fields and sections of a form into separate tabs. Each tab is represented by a tab label, typically located at the top of the form, and contains a specific set of form fields and sections. This layout allows users to easily navigate and access different sections of the form, making it more user-friendly and less overwhelming. It is generally used when the form contains a lot of fields and sections, and it is necessary to divide them into smaller, manageable chunks.

Technical Documentation

GitHub

Examples

Standard

Vertical Tabs with two panels representing a simple Contact Us Form

Vertical Tab

Request
Communication Details

Describe your request in detail *

Name *

Email *

Phone Number *

Address (Optional)

Properties
Markup
JSON


    

    
        jcr:title:
        Vertical Tab
    

    

    
        name:
        verticaltabs1682498948981
    

    

    
        sling:resourceType:
        forms-components-examples/components/form/verticaltabs
    

    
        fieldType:
        panel

    
        

    
  
     
        
  Vertical Tab

        
  

     
     
  

     
    


 
     
     Request
 
     
     Communication Details
 
 


    
    
    
    
        
          
  

          
  

        
        
  

        
    

        
        



    
      
  Reason *

      
  

    
    
    
  

    
    

    
    







    
      
  Describe your request in detail *

      
  

    
    
    
    
  

    
    

    
    




        
    







    
    
    
    
        
          
  

          
  

        
        
  

        
    

        
        



    
      
  Name *

      
  

    
    
    
    
  

    
    

    
    







    
      
  Email *

      
  

    
    
    
  

    
    

    
    







    
      
  Phone Number *

      
  

    
    
    
  

    
    

    
    







    
      
  Address (Optional)


    JSON

Core Structure

Core Content

Core Form

Commerce

Forms And Communications Portal

Adaptive Forms

Vertical Tabsv1

Technical Documentation

Examples

Standard

Vertical Tabs_v1