Tabs
Tabs are used to organize content into separate sections or panes, where users can switch between these sections by clicking on the tabs. Each tab represents a different section, and only one section is visible at a time.
Properties
The following properties are available to configure the behavior of the component from the form editor (this is in addition to common properties).
Common
Component Name string
Gives your Tabs component an identity. This name helps distinguish it from its peers on the form.
Default Active Tab enum
Choose which tab should greet your users first. This dropdown lets you set the initial active tab based on tab configurations.
Tab Type card | line
Defines the visual style of your tabs.
-
Card (default): Each tab looks like a clickable card.
-
Line: Sleek underline style for the minimalists.
Tabs
Configure Tab Panes
The user can use the configure tabs option to add the tabs that they want to have. An array of tab configuration objects. Each tab supports:
- Name
string
– Internal identifier used to reference the tab. - Title
string
– Text displayed on the tab label. - Key
string
– Unique key for the tab. - Class Name
string
– Optional CSS class applied to the tab. - Animated
boolean
– Enables animation transitions when switching tabs. - Icon
object
– Optional icon shown beside the title. - Force Render
boolean
– Forces rendering of tab content even when inactive. - Hide
boolean
– Conditionally hides this specific tab. - Edit Mode
object
– Defines whether tab content is editable:- Editable
- Read Only
- Inherited (default)
- Select Mode
object
– Tab selection behavior:- Selectable (default)
- Disabled
- Inherited from Edit Mode
- Destroy Inactive Tab Pane
boolean
– Whether to remove DOM of inactive tabs.
Hide boolean
Control the visibility of the Tabs component entirely.
Appearance
Position string
Set where your tabs appear:
- Top (default)
- Bottom
- Left
- Right
Font object
Customize how your tab labels look. Choose the font family, size, weight, and color.
Dimensions object
Specify the size of your component:
- Width, Height
- Min/Max Width and Height
- Overflow behavior
Border object
Personalize the borders:
- Set border width, color, and style
- Round the corners for a softer touch
Background object
Pick your flavor of background:
- Color
- Gradient
- Image URL
- Uploaded Image
- Stored File
Also tweak background size, position, and repeat behavior.
Shadow object
Give depth with adjustable shadows:
- Offset, Blur, Spread, Color
Margin & Padding object
Fine-tune spacing inside and around the component.
Custom Styles function
Inject your own CSS styles via JavaScript (must return a style object).
Card Styles object
For when using Card tab type:
- Font styles specific to card content
- Dimensions (width, height, min/max)
- Background types and image settings
- Custom styles just for the card view