HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet 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.StableSince 0.1.0NavigationUsageimport'@fusion.dev/helix/tabs'import'@fusion.dev/helix-headless/tabs'Preview
API ReferenceTabhelix-tabOne tab in a tab list.
PropTypeDescriptiondisabledbooleanDefaultfalseWhether the item is disabled and cannot be chosen.dismissiblebooleanDefaultfalseWhether the element shows a control that dismisses it.dismissLabelstringDefault"Close"The dismiss control's label, read by screen readers.hrefstringThe URL the tab links to. Setting it renders the tab as a link, for a set
of tabs that are pages of a site.relstringThe link's rel, for a tab with an href.selectedbooleanDefaultfalseWhether the item is selected.targetstringWhere the link opens, such as _blank, for a tab with an href.valuestringDefault""The item's value, which identifies it in its set and is what a form
submits.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The tab's label.dismiss-iconReplaces the glyph on the mark that closes a dismissible tab.
EventTypeDescriptionhelix-dismissHelixDismissEventA dismissible tab was asked to close. The tab does not remove itself, so remove it and its panel in response. Cancelable.helix-selectHelixSelectEventFired when the tab is chosen. Cancelable: canceling it stops the change and leaves the decision to you.
MethodTypeDescriptionclick() => voidPresses the tab, as click() presses a native button: passed to the
control inside, which is what answers a click, so a script's click()
selects the tab, or follows its link, once.dismiss() => booleanFires helix-dismiss, and returns false if a listener cancels it.focus(options: FocusOptions) => voidMoves focus to the tab's control, the button or the link inside it, so a
script can focus the tab the way it focuses a native one.focusItem() => voidMoves focus to the item's control, for the set's arrow keys.select() => booleanSelects the item and fires helix-select. Returns false if the item is
disabled or a listener cancels the event.
PartDescriptiondismissThe mark a pointer presses to close a dismissible tab.dismiss-markThe glyph on that mark, where none is slotted.tabThe tab itself.
CSS PropertyDescription--tabs-tab-block-sizeThe height of a tab. segmented sizes its tabs to the track and does not read it.--tabs-tab-colorThe label color of a tab that is not current.--tabs-tab-disabled-opacityHow faint a disabled tab is drawn.--tabs-tab-dismiss-colorThe color of the mark that closes a dismissible tab.--tabs-tab-font-sizeThe size of a tab's label.--tabs-tab-font-weightThe weight of a tab's label.--tabs-tab-hover-background-colorThe wash under the pointer.--tabs-tab-hover-colorThe label color under the pointer.--tabs-tab-padding-inlineThe space either side of the label.--tabs-tab-radiusThe corners of a tab, which the hover wash takes.--tabs-tab-selected-background-colorThe fill of the current tab itself, under the moving mark.--tabs-tab-selected-colorThe label color of the current tab.
Custom stateDescriptionselectedWhile it is the tab selected.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Panelhelix-tab-panelThe content shown for one tab.
PropTypeDescriptionlabelstringDefault""The name of the panel, which is the text of the tab that opens it.lazybooleanDefaultfalseWhether the panel's content waits in a <template> until the panel is
first shown.selectedbooleanDefaultfalseWhether this panel is the visible one.valuestringDefault""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.
EventTypeDescriptionhelix-loadHelixLoadEventFired the first time a lazy panel is shown, once its template's content is in.
PartDescriptionpanelThe panel container.
CSS PropertyDescription--tabs-panel-padding-block-startThe space between the tab row and the panel's content.
Custom stateDescriptionloadedOnce a lazy panel has been shown and its content is in.selectedWhile its tab is the one selected.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Roothelix-tabsA row of tabs and the panel each one shows.
PropTypeDescriptionactivestringThe value of the current item.defaultActivestringDefault""The value of the item declared current in markup.labelstringDefault"Tabs"The tab list's name, read by screen readers.manualbooleanDefaultfalseStops the arrow keys from selecting each tab they move to. By default,
arrowing to a tab also selects it.orientation"horizontal"|"vertical"The direction the tabs run. vertical sets them in a column beside the
panels and tells a screen reader the list is vertical.scrollControlsbooleanDefaultfalseWhether a strip with more tabs than fit shows a button at each end it can
scroll toward.variant"segmented"|"underlined"How the row of tabs is drawn.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The tabs, as direct children of this element.indicatorA mark of your own, drawn inside the indicator part, where the selected tab's place and size reach it.panelsThe panels, as direct children of this element. Panels inside a wrapper are not paired with tabs, because pairing reads only the direct children.scroll-end-iconReplaces the glyph on the button that scrolls the strip toward its end.scroll-start-iconReplaces the glyph on the button that scrolls the strip toward its start.
EventTypeDescriptionhelix-activateHelixActivateEventFired after the active tab changes, so the element already holds the new value.helix-before-activateHelixBeforeActivateEventFired before the active tab changes, and cancelable. Canceling it is the only way to block a change.helix-selectHelixSelectEventFired when a tab is chosen. The tab sends it and the root handles it, so you can listen on the root. Cancelable: canceling it stops the change and leaves the decision to you.
MethodTypeDescriptionrequestActive(next: string, cause: string) => booleanRequests a new current item, and returns whether the change was applied.
PartDescriptionindicatorThe mark that moves to the selected tab. It carries the selected tab's place and size as --indicator-x, --indicator-y, --indicator-inline-size and --indicator-block-size.panelsThe panel container.scroll-endThe button that scrolls the strip toward its end, shown under scroll-controls while there is more that way. It holds to the end of the strip.scroll-end-markThe glyph on that button, where none is slotted.scroll-startThe button that scrolls the strip toward its start, shown under scroll-controls while there is more that way. It holds to the start of the strip.scroll-start-markThe glyph on that button, where none is slotted.tabsThe tab list.
CSS PropertyDescription--tabs-gapThe space between tabs.--tabs-indicator-colorThe fill of the mark on the current tab: the bar under underlined, and the pill otherwise.--tabs-indicator-radiusThe corners of the mark.--tabs-indicator-shadowThe shadow under the mark, which the pill and segmented draw.--tabs-indicator-thicknessThe height of the bar under underlined.--tabs-rule-colorThe color of the rule under the row in underlined.--tabs-scroll-background-colorThe fill behind the scroll buttons, over the tabs that pass under them.
Custom stateDescriptionsettledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Tabhelix-headless-tabOne tab in a tab list.
PropTypeDescriptiondisabledbooleanDefaultfalseWhether the item is disabled and cannot be chosen.dismissiblebooleanDefaultfalseWhether the element shows a control that dismisses it.dismissLabelstringDefault"Close"The tooltip on the mark that closes a dismissible tab. The mark is for
the pointer and hidden from screen readers, which hear the Delete key
through aria-keyshortcuts.hrefstringThe URL the tab links to. Setting it renders the tab as a link, for a set
of tabs that are pages of a site.relstringThe link's rel, for a tab with an href.selectedbooleanDefaultfalseWhether the item is selected.targetstringWhere the link opens, such as _blank, for a tab with an href.valuestringDefault""The item's value, which identifies it in its set and is what a form
submits.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The tab's label.dismiss-iconReplaces the glyph on the mark that closes a dismissible tab.
EventTypeDescriptionhelix-dismissHelixDismissEventA dismissible tab was asked to close. The tab does not remove itself, so remove it and its panel in response. Cancelable.helix-selectHelixSelectEventFired when the tab is chosen. Cancelable: canceling it stops the change and leaves the decision to you.
MethodTypeDescriptionclick() => voidPresses the tab, as click() presses a native button: passed to the
control inside, which is what answers a click, so a script's click()
selects the tab, or follows its link, once.dismiss() => booleanSends helix-dismiss for a dismissible tab, and returns false where a
listener refused it, or where the tab is not dismissible or is disabled.
The tab stays where it is either way: removing it is yours. Where the tab
had focus, focus moves to the tab beside it once you remove it.focus(options: FocusOptions) => voidMoves focus to the tab's control, the button or the link inside it, so a
script can focus the tab the way it focuses a native one.focusItem() => voidMoves focus to the item's control, for the set's arrow keys.select() => booleanSelects the item and fires helix-select. Returns false if the item is
disabled or a listener cancels the event.
PartDescriptiondismissThe mark a pointer presses to close a dismissible tab.dismiss-markThe glyph on that mark, where none is slotted.tabThe tab itself.
Custom stateDescriptionselectedWhile it is the tab selected.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Panelhelix-headless-tab-panelThe content shown for one tab.
PropTypeDescriptionlabelstringDefault""The name of the panel, which is the text of the tab that opens it.lazybooleanDefaultfalseWhether the panel's content waits in a <template> until the panel is
first shown.selectedbooleanDefaultfalseWhether this panel is the visible one.valuestringDefault""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. Under lazy, a <template> holding it.
EventTypeDescriptionhelix-loadHelixLoadEventFired the first time a lazy panel is shown, once its template's content is in.
PartDescriptionpanelThe panel container, which takes the focus while it holds nothing focusable.
Custom stateDescriptionloadedOnce a lazy panel has been shown and its content is in.selectedWhile its tab is the one selected.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Roothelix-headless-tabsA row of tabs and the panel each one shows.
PropTypeDescriptionactivestringThe value of the current item.defaultActivestringDefault""The value of the item declared current in markup.labelstringDefault"Tabs"The tab list's name, read by screen readers.manualbooleanDefaultfalseStops the arrow keys from selecting each tab they move to. By default,
arrowing to a tab also selects it.orientation"horizontal"|"vertical"The direction the tabs run. vertical sets them in a column beside the
panels and tells a screen reader the list is vertical.scrollControlsbooleanDefaultfalseWhether a strip with more tabs than fit shows a button at each end it can
scroll toward.variant"segmented"|"underlined"How the row of tabs is drawn.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The tabs, as direct children of this element.indicatorA mark of your own, drawn inside the indicator part, where --indicator-x, --indicator-y, --indicator-inline-size and --indicator-block-size reach it.panelsThe panels, as direct children of this element. Panels inside a wrapper are not paired with tabs, because pairing reads only the direct children.scroll-end-iconReplaces the glyph on the button that scrolls the strip toward its end.scroll-start-iconReplaces the glyph on the button that scrolls the strip toward its start.
EventTypeDescriptionhelix-activateHelixActivateEventFired after the active tab changes, so the element already holds the new value.helix-before-activateHelixBeforeActivateEventFired before the active tab changes, and cancelable. Canceling it is the only way to block a change.helix-selectHelixSelectEventFired when a tab is chosen. The tab sends it and the root handles it, so you can listen on the root. Cancelable: canceling it stops the change and leaves the decision to you.
MethodTypeDescriptionrequestActive(next: string, cause: string) => booleanRequests a new current item, and returns whether the change was applied.
PartDescriptionindicatorThe marker that moves to the selected tab. It carries the selected tab's place and size as --indicator-x, --indicator-y, --indicator-inline-size and --indicator-block-size, and data-placed once it has been placed, for a mark you draw and animate yourself.panelsThe panel container.scroll-endThe button that scrolls the strip toward its end, shown under scroll-controls while there is more that way.scroll-end-markThe glyph on that button, where none is slotted.scroll-startThe button that scrolls the strip toward its start, shown under scroll-controls while there is more that way.scroll-start-markThe glyph on that button, where none is slotted.tabsThe tab list.
Custom stateDescriptionsettledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Examples
NameDescriptionControlledTabs controlled by your code, which handles the event and sets active.EventsAn event sent before the active tab changes, and one tab your code blocks by canceling that event.LinksTabs that are links to the pages of a section, with the current page marked.ManualArrow keys move between tabs without opening them, so you can look before choosing.PreviewPanels behind tabs, with a marker that moves to the active tab.PreviewPanels behind tabs, with a marker that moves to the active tab.SegmentedThe tabs drawn as one segmented control.UnderlinedTabs that underline the active tab.VerticalTabs in a column beside their panels, for a settings page with many sections.