# Selection bar (goodtabs UI)

A floating bar with the count, bulk actions and a clear button while items are selected.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/selection-bar.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/selection-bar`

## Usage

```tsx
import { SelectionBar } from "@/components/ui/selection-bar"

<div className="relative">
  {/* the list */}
  <SelectionBar count={selected.length} onClear={() => setSelected([])}>
    <Button variant="ghost" size="sm" onClick={archive}>Archive</Button>
  </SelectionBar>
</div>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| count | `number` |  | How many items are selected. The bar hides at 0. |
| onClear | `() => void` |  | Clears the selection. Omit to hide the clear button. |
| label | `string` | `"{count} selected"` | Count label template. {count} is replaced with the number. |
| clearLabel | `string` | `"Clear selection"` | Accessible name of the clear button. |
| position | `"absolute" | "fixed"` | `"absolute"` | absolute floats in the nearest positioned parent, fixed floats over the viewport. |
| size | `"sm" | "default"` | `"default"` | Bar height, 36px or 44px. |
| children | `ReactNode` |  | The actions, usually sm ghost buttons. |

## When to use

- Bulk actions on a list, table or grid of selectable rows
- When the actions should stay in reach while the person scrolls the selection
- Inbox, files and issues views where selecting is the main gesture

## When not to use

- For a single item's actions: put them on the row or in a menu
- As a permanent toolbar; it is meant to come and go with the selection
- Inside a dialog or sheet that already has a footer of actions

## Notes for agents

- It takes onClear and the actions take onClick, so the component that renders it must be a client component ("use client")
- Defaults to position absolute: give the list wrapper relative and some bottom padding so the bar does not cover the last row; use fixed for page-level lists
- Hidden when count is 0 with a 150ms fade and 8px rise, and inert so nothing inside it can be tabbed to
- For a destructive action use a solid bg-destructive text-background button, not the soft destructive variant

Docs: https://ui.goodtabs.co/components/selection-bar