# SelectionIndicator

> A small marker that stays invisible, while still reserving its own layout slot, until the element carrying it is the current selection.

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

Renders a marker that stays present in the layout at all times but only
becomes visible once its host carries `aria-selected="true"` or a truthy
`aria-current`, so sibling content never reflows on selection change.

## Examples

```tsx
<Menu.Item aria-selected={isChecked}>
	<SelectionIndicator aria-selected={isChecked}>
		<CheckIcon />
	</SelectionIndicator>
	<Text slot="label">{t("menu.autosave")}</Text>
</Menu.Item>
```

```tsx
<Tabs.Trigger id="billing" aria-selected={activeTab === "billing"}>
	{t("settings.tabs.billing")}
	<SelectionIndicator
		aria-selected={activeTab === "billing"}
		mix={css({ position: "absolute", insetBlockEnd: "0", insetInline: "0", blockSize: "2px" })}
	/>
</Tabs.Trigger>
```

## Props

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