HelixOverviewDocsComponentsSandboxTheme builderCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
TabsView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA row of tabs and the panel each one shows.ExperimentalSince 0.1.0NavigationUsageimport'@fusion.dev/helix/tabs'import'@fusion.dev/helix-headless/tabs'Preview
API ReferenceTabhelix-tabOne tab in a tab list.
PropTypeDefaultDescriptiondisabledbooleanfalseWhether the tab can be chosen.selectedbooleanfalseWhether this tab is the current one.valuestring""Identifies the tab, and pairs it with the panel of the same value.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The tab's label.
EventTypeDescriptionhelix-selectHelixSelectEventFired when the tab is chosen. Cancelable: refusing it takes the decision and nothing moves.
MethodTypeDescriptionfocusItem() => voidMoves focus to this tab, for the list's arrow keys.select() => voidSelects this tab and announces it.
PartDescriptiontabThe tab itself.
Panelhelix-tab-panelThe content shown for one tab.
PropTypeDefaultDescriptionlabelstring""The name of the panel, which is the text of the tab that opens it.selectedbooleanfalseWhether this panel is the visible one.valuestring""Pairs the panel with the tab of the same value.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The panel's content.
PartDescriptionpanelThe panel container.
Roothelix-tabsA row of tabs and the panel each one shows.
PropTypeDefaultDescriptionactivestringWhich item is current, by its `value`.defaultActivestring""Initial item for uncontrolled use.labelstring"Tabs"Accessible name for the tab list.manualbooleanfalseWhether arrowing to a tab also selects it.variant"segmented"|"underlined"How the row reads.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
EventTypeDescriptionhelix-activateHelixActivateEventFired once the current one has moved, so the element already holds it.helix-before-activateHelixBeforeActivateEventFired before the current tab moves, and cancelable. The only way to refuse one.helix-selectHelixSelectEventFired when a tab is chosen. Dispatched by the tab and listened for here, because the root is what a consumer holds. Cancelable: refusing it takes the decision and nothing moves.
MethodTypeDescriptionrequestActive(next: string) => booleanRequests a new current item, and reports whether the request stood.
PartDescriptionindicatorThe mark that travels to the selected tab.panelsThe panel container.tabsThe tab list.
Tabhelix-headless-tabOne tab in a tab list.
PropTypeDefaultDescriptiondisabledbooleanfalseWhether the tab can be chosen.selectedbooleanfalseWhether this tab is the current one.valuestring""Identifies the tab, and pairs it with the panel of the same value.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The tab's label.
EventTypeDescriptionhelix-selectHelixSelectEventFired when the tab is chosen. Cancelable: refusing it takes the decision and nothing moves.
MethodTypeDescriptionfocusItem() => voidMoves focus to this tab, for the list's arrow keys.select() => voidSelects this tab and announces it.
PartDescriptiontabThe tab itself.
Panelhelix-headless-tab-panelThe content shown for one tab.
PropTypeDefaultDescriptionlabelstring""The name of the panel, which is the text of the tab that opens it.selectedbooleanfalseWhether this panel is the visible one.valuestring""Pairs the panel with the tab of the same value.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The panel's content.
PartDescriptionpanelThe panel container.
Roothelix-headless-tabsA row of tabs and the panel each one shows.
PropTypeDefaultDescriptionactivestringWhich item is current, by its `value`.defaultActivestring""Initial item for uncontrolled use.labelstring"Tabs"Accessible name for the tab list.manualbooleanfalseWhether arrowing to a tab also selects it.variant"segmented"|"underlined"How the row reads.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
EventTypeDescriptionhelix-activateHelixActivateEventFired once the current one has moved, so the element already holds it.helix-before-activateHelixBeforeActivateEventFired before the current tab moves, and cancelable. The only way to refuse one.helix-selectHelixSelectEventFired when a tab is chosen. Dispatched by the tab and listened for here, because the root is what a consumer holds. Cancelable: refusing it takes the decision and nothing moves.
MethodTypeDescriptionrequestActive(next: string) => booleanRequests a new current item, and reports whether the request stood.
PartDescriptionindicatorThe mark that travels to the selected tab.panelsThe panel container.tabsThe tab list.
ExamplesNameDescriptionControlledA strip the page owns, answering the event and assigning `active`.EventsA move announced before it happens, and one tab that refuses to be moved to.ManualArrow keys move between tabs without opening them, so a reader can look before choosing.PreviewPanels behind tabs, with a mark that travels between them.PreviewPanels behind tabs, with a mark that travels between them.SegmentedThe tabs drawn as one segmented control.UnderlinedA rule under the active tab rather than a filled one.