Overview
Organize form fields into distinct, clickable sections using tabs. Configure the tab container's alignment, size, and appearance to present information clearly and efficiently.
Tab Container Setup
Add Tabs Container
Drag the "Tabs Container" from the Grouping Options section of the component selector onto your form to create a main container for your individual tabs. This organizes form fields into distinct, clickable sections.
Configure Tab Alignment
Select the Tabs Container and adjust the alignment settings in the control properties to position tabs horizontally (left, center, right) or vertically. This controls the visual placement of tabs within their container.
Set Tab Height and Width
Select the Tabs Container and modify the height and width properties in the control properties to define the size of the tabs for optimal display. Choose 'auto' for automatic sizing or enter specific values for manual control.
Individual Tab Configuration
Add Individual Tab
Drag an individual "Tab" from the Grouping Options section of the component selector into your Tabs Container to create distinct sections users can click to view specific content.
Style Tabs
Select the Tabs Container and modify the background color property in the control properties to apply a consistent visual theme to all tabs. This styling applies uniformly to all tabs within the container.
Container Styles All
Adjust properties on the main Tabs Container to style all tabs within it uniformly.
Add Tab Icons and Labels
Select the Tabs Container and use the control properties to add icons for selected and unselected tabs, define a label name for the container, and apply children's styling properties. This improves navigation and visual clarity for users.