01
Overview
Content region associated with a tab trigger; shown when its tab is active.
Usage
TabPanel is a compose-only leaf of Tabs.
The idiomatic API is Tabs.Panel, reached through the parent
namespace — see the tabs README for the composed
snippet. The flat @lostgradient/cinder/tab-panel subpath remains exported for
à-la-carte builds that import the leaf directly.
02
When to use
Use when
- Hosting the body content associated with a specific tab inside a tabs ancestor.
- Letting the tabs context drive aria-labelledby and visibility automatically from the shared value.
Avoid when
- Used outside a tabs ancestor — the component throws at construction.
- Rendering the tab trigger itself — use tab inside a tab-list.
03
Props
| Name | Type | Default | Required | Bindable | Description |
|---|---|---|---|---|---|
value | text | req | Identifier — matches the value of the corresponding Tab. | ||
ariaLabelledby | text | Override the aria-labelledby target. By default the panel points at the
context-derived Tab id (${baseId}-tab-${value}). Supply this only when you
have overridden the paired Tab's id prop — pass that same custom id here so
the ARIA tab→panel relationship stays wired to a real element. | |||
children | snippet | req | Panel content. |