# SelectionBar

> The floating bar at the foot of a list: it reads "Viewing 1–50 of 1,234" with previous and next links, and morphs into "✕ 3 selected · Pause P · Delete X" once rows are checked, each action a submit button that posts the checked ids and answers to its key.

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

Renders the bar as the list's footer row, summary at the start and page links at the end, and
once rows are selected as a floating bar of actions stuck to the bottom of the scroll container.
Both layers share one grid cell so the morph cross-fades in place. The layers' text and links work without
script; the selection layer appears once the `@sdxc/ui/app/selection-bar` island loads.

## Examples

```tsx
<form id="monitors" method="post" action="/monitors/bulk">{rows with <input type="checkbox" data-selection-item name="id" value={id} />}</form>
<SelectionBar
	target="monitors"
	pagination={{ summary: "Viewing 1–50 of 1,234", next: "?page=2" }}
	actions={[{ label: "Pause", key: "p", name: "intent", value: "pause" }, { label: "Delete", key: "x", danger: true, name: "intent", value: "delete" }]}
	labels={{ toolbar: "Monitors", clear: "Clear selection", selected: "{count} selected", cleared: "Selection cleared", previous: "Previous page", next: "Next page" }}
/>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `target` | `string` | The `id` of the region holding the `[data-selection-item]` checkboxes. |
| `form?` | `string` | The `id` of the form those checkboxes submit with. Defaults to `target`. |
| `pagination?` | `Pagination` | Range and page links shown while nothing is selected; omitted hides the idle bar. |
| `actions?` | `Action[]` | The bulk actions, in order; put a destructive one last. |
| `locale?` | `string` | Locale for the count. Defaults to the runtime's. |
| `labels` | `Labels` |  |

Also accepts everything in `Omit<TagProps<"div">, "children">`.