useSelection

Multi-select state in a Set, with select-all and indeterminate support.

HooksData@gaudi/design-system/hooks/data/use-selectionView in Storybook Source

Tracks selected ids for lists, tables and bulk actions. Uncontrolled from initialSelectedIds, or controlled with selectedIds and onSelectionChange; every change produces a new Set.

Usage

import { useSelection } from '@gaudi/design-system/hooks';
const { isSelected, toggleSelection, getSelectAllState, toggleAll, count } = useSelection();

Examples

Bulk actions with select all

Storybook

Controlled with a limit

Storybook

API

3 options

5 return values

Accessibility

Give every checkbox a label naming its row, give the select-all checkbox an indeterminate state, and announce bulk results (for example with useLiveAnnouncer).

Notes

DataTable has its own selection; use this hook for custom lists, galleries and cards.

DataTableDataTable is a TanStack table with a compact data anatomy: shared headers that preserve label casing, hairline rows, synced column and row hover, a tinted wash for selected rows, and declarative column alignment, width and pinning. It adds search with a live count, single or multi-column sorting, selection with bulk actions, expandable rows, row action menus, pinned rows, grouped bands, a totals footer, sticky headers, automatic virtualization, pagination or load-more, CSV export, and loading, refreshing, empty and error states. Sorting, selection, expansion and pinning work controlled or uncontrolled.19 examples useLiveAnnouncerPolite or assertive screen reader announcements for changes away from focus.useLocalStorageuseState persisted to localStorage, synced across components and tabs.useMapMap state with immutable set, replace, remove, clear and reset actions.useReadLocalStorageRead-only localStorage subscriptions shared with useLocalStorage.useSessionStorageuseState persisted to sessionStorage for one tab.