All components (204)

Selection bar

Actions · SelectionBar

What it is and when to use it

The bar that appears when rows of a table or a list are checked: how many there are ("3 orders of 6 selected") and what can be done with them. With nothing checked it is not rendered.

When to use it

Bulk actions on what is checked: export, cancel, tag, move.
Floating at the bottom and centered (default), over the list, or in its own place with floating={false}. count is how many there are and actions, the buttons.
With onSelectAll and total to offer "Select all 120", not just what is visible.
name carries singular, plural and gender ({ singular: 'photo', plural: 'fotos', gender: 'female' }) so the text agrees: "1 photo selected", "Select all 12,000". The numbers follow the language.

When not to

Tools that do not depend on what is checked: Toolbar.
An action on a single row: that row's ActionMenu.

Keyboard: Escape clears the selection (it calls onDeselect) with focus on the bar or on the zone where items are checked (the table, the list); elsewhere on the page it does not, nor when that Escape has already been handled by an open layer (the menu or the dialog it closes). The bar does not trap focus: it is reached by tabbing from the list, and inside there are ordinary buttons.

Accessibility: it is a region whose name is the count itself, and the count is announced every time it changes: checking a box says nothing by itself. "Clear selection" is always there, for those who do not use Escape. Focus is not lost when something goes away: on clearing the selection from the bar it moves to the zone, and on pressing "Select all 120" (which disappears) it moves to the bar, which is already named after the new count.

Fine-tuning: no variables of its own: it is adjusted with the classes amset-selection, amset-selection--floating, amset-selection__count and amset-selection__actions. The floating one does not appear when printing.

What it looks like

3 orders of 5 selected

<SelectionBar
  count={marcados.length}
  total={5}
  name={{ singular: 'order', plural: 'orders', gender: 'male' }}
  floating={false}
  onDeselect={() => setMarcados([])}
  onSelectAll={marcarTodos}
  actions={<Button size="sm">Export</Button>}
/>

Props

Import it with import { SelectionBar } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`actions`required	`ReactNode`	The bulk action buttons: delete, export, tag.
`count`required	`number`	How many are checked. With zero, the bar is not rendered.
`onDeselect`required	`() => void`	—
`className`	`string`	Merged with the library classes; it does not replace them.
`floating`	`boolean`	Attached to the bottom and floating over the content. Yes by default.
`name`	`Noun`	What things are called, with singular, plural and gender: `{ singular: 'photo', plural: 'fotos', genero: 'femenino' }`. "items" by default.
`onSelectAll`	`() => void`	Button to check everything there is, not only what is visible.
`total`	`number`	How many there are in total, to say "3 of 120".
`zone`	`RefObject<HTMLElement \| null>`	Where things are marked: the table, the list, the grid. Escape clears the selection with focus inside this or the bar, and nowhere else. And it is where focus goes when the bar leaves with it inside ("Clear selection", Escape). Without this, Escape only acts from the bar and focus has nowhere to go.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: