# TabbedStage

> Tabs that reveal one media panel at a time, as a row of pills over the stage or as a rail of steps beside a sticky stage.

```ts
import { TabbedStage } from "@sdxc/ui/landing";
```

Host for tabs and their panels. Nest TabbedStage.Item children; each item
pairs a tab with the media it reveals. A vertical stage wraps itself in a named
container so the rail and stage sit side by side where there is room, and stack below.

## Examples

```tsx
<TabbedStage name="demo" aria-label={t("stage.label")}>
	<TabbedStage.Item value="inbox" label={t("stage.inbox")} icon={inboxIcon} defaultChecked>
		{inboxShot}
	</TabbedStage.Item>
</TabbedStage>
```

```tsx
<TabbedStage name="how" orientation="vertical" aria-label={t("how.label")}>
	<TabbedStage.Item value="detect" label={t("how.detect")} description={t("how.detect.body")} defaultChecked>
		{detectShot}
	</TabbedStage.Item>
</TabbedStage>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `name` | `string` | Shared `name` for the radio group that switches panels. Required so multiple stages on one page stay independent. |
| `"aria-label"` | `string` | Accessible name for the stage. Required — the library ships no copy. |
| `orientation?` | `"horizontal" \| "vertical"` | Tab layout. Defaults to DEFAULT_ORIENTATION. |
| `children` | `RemixNode` | One or more TabbedStage.Item entries. |

Also accepts everything in `TagProps<"div">`.


### TabbedStage.Item

One tab + panel pair.

| Prop | Type | Description |
| --- | --- | --- |
| `value` | `string` | Radio value written for this tab/panel pair. |
| `label` | `RemixNode` | Visible tab label. |
| `icon?` | `RemixNode` | Optional glyph shown before the label. |
| `description?` | `RemixNode` | Supporting copy under the label, shown while the item is selected in a vertical stage. A horizontal stage leaves it out. |
| `defaultChecked?` | `boolean` | Marks this item as the initially selected one. Only one item in a stage should pass `defaultChecked`. |
| `children` | `RemixNode` | Media or staged UI revealed when this tab is selected. |

Also accepts everything in `TagProps<"div">`.


## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `Orientation` | `"horizontal" \| "vertical"` | `horizontal` lays pill tabs over a full-width stage; `vertical` lays a rail of items beside a sticky stage from the `lg` container up, and stacks them below. |