Tabs on Top_v1

A tabs-on-top 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

Tabs on Top with two panels representing a simple Contact Us Form

Tabs on Top

This is a short description.

This is a long description.

Describe your request in detail *

Name *

Email *

Phone Number *

Address (Optional)

Properties
Markup
JSON


    

    
        jcr:title:
        Tabs on Top
    

    
        description:
        <p>This is a long description.</p>
    

    

    
        tooltip:
        <p>This is a short description.</p>
    

    
        name:
        tabsontop_demo1675672899233
    

    

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

    
        fieldType:
        panel
    

    
        tooltipVisible:
        true

    
        

    
  
     
      
  Tabs on Top

      
  

     
     
  
    This is a short description.
  

     
    
      This is a long description.
    


 
     
     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

Tabs on Topv1

Technical Documentation

Examples

Standard

Tabs on Top_v1