# selectionBarSync

> Why JS: counting checked rows elsewhere on the page, announcing the count and the Escape and action keys need script.

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

Wires the bar around its host (`[data-slot="selection-bar"]`) to the target region; the
host itself is the polite live region. The bar shows `data-state="selecting"` while any
row is checked, its hidden layer is `inert`, and the count stays on the last non-zero value
so the bar fades out still naming what was selected.

## Signature

```ts
selectionBarSync(options: SelectionBarSync.Options): MixinDescriptor<HTMLElement>
```

## Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| `options` | `SelectionBarSync.Options` |  |

## Examples

```tsx
<span role="status" mix={[selectionBarSync({ target: "monitors", selected: "{count} selected", cleared: "Selection cleared" })]} />
```

## Used with it

The events, constants and types its module publishes, each imported from `@sdxc/ui/app` too.

### SelectionBarSync.Options

Configuration for selectionBarSync.

#### Members

| Member | Type | Description |
| --- | --- | --- |
| `target` | `string` | The `id` of the region holding the rows' checkboxes. |
| `selected` | `string` | The visible and announced count, with `{count}` replaced, such as "{count} selected". |
| `cleared` | `string` | What is announced once the selection empties, such as "Selection cleared". |
| `locale?` | `string` | Locale for the count. Defaults to the runtime's. |