# SegmentedStage

> A pill segmented control over a media stage, the switcher a hero puts between its calls to action and the product.

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

Renders the control and the stage from one list of items: each item draws its tab in
the control and its panel in the stage. Panels share one grid cell, so the stage is as
tall as its tallest panel and switching never moves the page below.

## Examples

```tsx
<SegmentedStage name="hero-views" aria-label={t("hero.views")}>
	<SegmentedStage.Item value="board" label={t("hero.board")} defaultChecked>
		<ProductFrame title="Board">{board}</ProductFrame>
	</SegmentedStage.Item>
	<SegmentedStage.Item value="api" label={t("hero.api")}>
		<CodeStage title="request.ts">{code}</CodeStage>
	</SegmentedStage.Item>
</SegmentedStage>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `name` | `string` | Radio group name; unique per page so several stages stay independent. |
| `"aria-label"` | `string` | Accessible name for the control. Required — the library ships no copy. |
| `align?` | `"start" \| "center"` | Where the control sits over the stage. Defaults to DEFAULT_ALIGN. |
| `children` | `RemixNode` | Two or more SegmentedStage.Item entries. |

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


### SegmentedStage.Item

One tab and panel pair.

| Prop | Type | Description |
| --- | --- | --- |
| `value` | `string` | Radio value for this tab and panel pair. |
| `label` | `RemixNode` | Visible tab label. |
| `defaultChecked?` | `boolean` | Marks the item selected on load. Exactly one item in a stage should pass it. |
| `children` | `RemixNode` | Media the tab reveals: a product frame, a code stage, a screenshot. |


## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `Align` | `"start" \| "center"` | Edge the control sits on: centred over the stage, or flush with a start-aligned hero's copy. |
| `Part` | `"tab" \| "panel"` | Which half of the stage an item is drawing: its tab in the control, or its panel. |