An interface for reading and updating multiple selection state.

installyarn add @react-stately/selection
usageimport {SelectionManager} from '@react-stately/selection'


A SelectionManager provides a generic interface for reading and updating selection and focus state based on a Collection. As discussed in the selection introduction, a selection is represented by a Set of item keys. Focus is represented by a single item key.

Focus state is updated when navigating a collection with the keyboard. Selection state is updated when a user clicks or taps an item, or uses the keyboard to select an item. These interactions are handled by the useSelectableCollection hook in react-aria.

A SelectionManager wraps the state returned by useMultipleSelectionState. Oftentimes, you won't need to construct these directly because hooks like useListState and useTreeState already handle this and return a SelectionManager for you.



selectionModeSelectionModeThe type of selection that is allowed in the collection.
disallowEmptySelectionbooleanWhether the collection allows empty selection.
isFocusedbooleanWhether the collection is currently focused.
focusedKeyKeyThe current focused key in the collection.
selectedKeysSet<Key>The currently selected keys in the collection.
isEmptybooleanWhether the selection is empty.
isSelectAllbooleanWhether all items in the collection are selected.


setFocused( (isFocused: boolean )): voidSets whether the collection is focused.
setFocusedKey( (key: Key )): voidSets the focused key.
isSelected( (key: Key )): voidReturns whether a key is selected.
extendSelection( (toKey: Key )): voidExtends the selection to the given key.
toggleSelection( (key: Key )): voidToggles whether the given key is selected.
replaceSelection( (key: Key )): voidReplaces the selection with only the given key.
selectAll(): voidSelects all items in the collection.
clearSelection(): voidRemoves all keys from the selection.
toggleSelectAll(): voidToggles between select all and an empty selection.