For AI agents: the complete documentation index is available at https://wallarm.github.io/design-system/llms.txt, the full documentation bundle is available at https://wallarm.github.io/design-system/llms-full.txt, and this page is available as Markdown at https://wallarm.github.io/design-system/components/selection.md.
Design System

    Selection

    Turns a set of anything — cards, rows, list items — into a selectable collection: a checkbox on each one, shift-click for a range, and a bulk-action bar that arrives once something is ticked. The selection is controlled and ordered by items, so what comes back follows the list rather than the order of clicks, and ids no longer present in items are kept rather than dropped — a selection can outlive a page change, and clearing it is the caller's decision.

    Source · Storybook

    Usage

    import { Button } from '@wallarm-org/design-system/Button';
import { Copy, Trash2 } from '@wallarm-org/design-system/icons';
import { Selection, SelectionBulkBar, SelectionItem } from '@wallarm-org/design-system/Selection';
import { VStack } from '@wallarm-org/design-system/Stack';

    Examples

    With select all

    SelectionAll is the header checkbox — indeterminate while the selection is partial, and a press while everything is selected clears it rather than reselecting.

    Grid

    The same machinery over a three-column grid: Selection lays nothing out, so the arrangement stays entirely yours.

    With disabled

    A disabled item leaves both select-all and any shift range, so "all" means all the ones this user is allowed to touch — and the header checkbox counts only those.

    Range selection

    Shift-click selects everything between the last checkbox you touched and this one, following the order of items rather than the order you clicked in.

    Bulk actions

    Three actions in one bar. Only the destructive one is solid, so a bar with several verbs still has a single obvious primary.

    Empty and partial

    Emptying the list strands the ids that were selected, because the component keeps them on purpose — the effect here is the cleanup pattern, dropping any id the list no longer has.

    Without bulk bar

    No bar at all: the selection still works and the count is rendered from state, for a page that acts on the selection somewhere else entirely.

    Compound bulk bar

    Composing the summary — count, select-all, clear — instead of taking the default. It has to be a direct child of the bar; a wrapper component hides it and the default appears too.

    Inside drawer

    Inside a Drawer, placement='absolute' pins the bar to the bottom of the panel instead of the viewport, and the actions step up to large to match the surface.

    Props

    PropTypeDefaultDescription
    items *T[]Source array — used for select-all and shift-click range ordering.
    getItemId *(item: T) => stringStable id extractor for items.
    value *string[]Controlled selection state — array of selected item ids.
    onChange *(ids: string[]) => voidCalled with the next ordered array of selected ids.
    data-testidstring | undefined

    SelectionAll

    PropTypeDefaultDescription
    data-testidstring | undefined
    aria-labelstring | undefined

    SelectionBulkBar

    PropTypeDefaultDescription
    aria-labelstring | undefinedOverride the toolbar accessible name. Defaults to "Bulk actions".
    data-testidstring | undefined
    placementSelectionBulkBarPlacement | undefinedfloatingHow the bar is positioned. - 'floating' (default): portaled to document.body and pinned to the bottom of the viewport with position: fixed. Use for page-level selection lists. - 'absolute': rendered in place with position: absolute. Anchors to the nearest positioned ancestor — by default the enclosing Selection root (which is position: relative), so the bar pins to the bottom of the selection area. Use this inside a Drawer or any other bounded container.

    SelectionItem

    PropTypeDefaultDescription
    itemId *stringItem id — must match an id present in the <Selection> items prop.
    disabledboolean | undefinedfalseWhen true, the checkbox is disabled and the item is excluded from select-all and ranges.

    Explorer