Tabs

Let users navigate between form steps with labeled tabs.

The Tabs element lets users navigate form steps from labeled tabs. The tab for the current step appears active. Clicking a tab navigates to its linked step.

When you add a Tabs element, Feathery can prefill tabs from nearby form steps. You can rename labels, change linked steps, and add or remove tabs in the Properties panel.

Configuring Tabs

Open the Tabs element's Properties panel to manage its tabs.

Each tab has:

• Label: Text displayed on the tab

• Step: The form step opened when a user clicks the tab

Each step can link to only one tab on a Tabs element. Add another step before adding another tab.

Validate and submit on click

Enable Validate and submit on click to save the current step's data before navigation. When disabled, a tab click navigates without submitting.

Linking Tabs Across Steps

Link Tabs elements on different steps to share tabs and labels across your form. Editing one linked element updates every linked element.

Adding Tabs to a form with existing tabs links it automatically when possible. You do not need to recreate the tabs on each step.

Styles

Along with standard element styles, Tabs supports:

• Direction: Display tabs horizontally or vertically

• Gap: Set spacing between tabs

• Default, Hover, and Active: Set background, font, and border styles for each state. The active tab links to the current step.

For Developers

The Feathery SDK and API reference Tabs components with type equal to tab.