Fabrials UI

Loading state

2 selected

0 selected

Installation

Import the control from @fabrials/ui, after setting the app up.

TypeScript

import { BulkActions, BulkActionsRoot, BulkActionsStatus, BulkActionsContent } from "@fabrials/ui";

API reference

Prop / export	Type	Description
`count`	`number`	Selected rows. The bar is hidden at zero.
`children`	`ReactNode`	The actions.
`keepMounted`	`boolean`	Keep the region at zero: the actions are hidden, the status stays (visually hidden) so the first selection is announced.
`BulkActionsRoot count / regionLabel / keepMounted`	`number / string / boolean`	The parts, for a layout the bar does not fit (the status in a title row beside select-all, the actions in a form under it). The root is a plain div with no role and no look, which you lay out with className; it shares one count, one empty state and one keepMounted with the parts. regionLabel names the actions group.
`BulkActionsStatus children`	`ReactNode`	The live status (role=status): "N selected" unless it has children. Visually hidden, and still announced, at zero with keepMounted; not rendered at zero without it. It is not inside the group.
`BulkActionsContent hidden / ref`	`boolean / Ref`	The actions, role=group named by regionLabel. hidden closes them at any count (a phone keeps the form shut until asked) and stays mounted; at zero they are hidden with keepMounted and not rendered without it. [hidden] wins over the layout's display.

Behavior

Show the bar only after selection begins. The status names the count.

Accessibility

Keyboard and contrast

Keep visible labels, keyboard focus and status announcements when customizing. These components inherit your theme; maintain sufficient contrast in both color modes. The preview is keyboard operable.