A tabs interaction wires tab buttons to panels — showing one panel at a time with a fade between them, using flowmo’s .f0-tabs class conventions.
Where: Right sidebar → Interact → Interactions → “+” → Standalone — Add a Tabs interaction
Key ideas
- Separate tab list and panel container: Place .f0-tab triggers in a separate tab bar and .f0-tab-panel children inside the .f0-tabs panel container.
- Index mapping: Trigger and panel order establishes the tab-to-panel relationship; mismatched counts or nesting produce incorrect activation.
- Accessible state: One tab/panel is active at a time, with visible selected/focus styling and keyboard-operable triggers.
Steps
- Create a separate tab bar and add one .f0-tab trigger per view.
- Create a sibling .f0-tabs panel container with direct .f0-tab-panel children in the same order.
- Add the Tabs interaction and choose fade or slide behavior; add an optional .f0-tab-pill only when the active indicator should morph.
- Preview pointer and keyboard navigation, focus visibility, active styling, panel height changes, and responsive overflow.
- Test direct links/forms inside panels and confirm hidden panels are not accidentally focusable.
Required structure
- Tab bar: .f0-tab buttons.
- Panel container: .f0-tabs.
- Direct panel children: .f0-tab-panel.
- Optional active indicator: .f0-tab-pill.
Common structural error
Do not put the tab buttons inside the .f0-tabs panel container. The carousel-based panel engine expects direct panel children there, while triggers live in a separate sibling bar.
Troubleshooting
A tab opens the wrong panel
Check trigger/panel order, counts, and that every panel is a direct child of the one .f0-tabs container.
Panels collapse or jump in height
Review panel sizing and overflow, then choose whether the container should hug active content or reserve a stable height.