<Tabs .../>
Accessible, nestable Tabs component by @boredofnames. Composes three sub-components — Tabs.Labels, Tabs.Label, Tabs.Panels, Tabs.Panel — and exposes a Tabs.selected helper for reading the current tab from elsewhere in the tree.
# Shape
- <Tabs.Labels> renders a <nav role="tablist"> around its children
- each <Tabs.Label> becomes a <button role="tab">
- <Tabs.Panels> does not wrap — it just renders the panels sequentially
- each <Tabs.Panel> becomes a <section role="tabpanel">
- unknown props are forwarded to the element
# Attributes
| component | prop | description |
|---|---|---|
| Tabs | selected? | initial tab index (default 0) |
| Tabs.Label | name? | optional label name exposed through Tabs.selected().name |
| Tabs.Label | selected? | when true, marks this label as the initially selected tab (overrides Tabs.selected) |
| Tabs.Label | hidden? | hides the label (and its matching panel) |
| Tabs.Label | onClick? | called with { event, group, id, props } before the selection change is applied |
# Tabs.selected
Tabs.selected() returns the selected-tab signal tuple for the nearest <Tabs> ancestor. Read it to know which tab is active: const [get] = Tabs.selected(); get().id.