# @zendeskgarden/container-selection

> Containers relating to selection in the Garden Design System

Latest version **3.1.5** (published 2025-12-15) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @zendeskgarden/container-selection
pnpm add @zendeskgarden/container-selection
yarn add @zendeskgarden/container-selection
bun add @zendeskgarden/container-selection
```

## Health

**Score 60/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 3.1.5 |
| Published | 2025-12-15 |
| First published | 2019-02-27 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 33.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 291 |
| Author | Zendesk Garden <garden@zendesk.com> |
| Maintainers | zendesk-garden |
| Keywords | a11y, accessible, container, garden, headless, react, zendesk |

## Links

- npm: https://www.npmjs.com/package/@zendeskgarden/container-selection
- Repository: https://github.com/zendeskgarden/react-containers
- Homepage: https://garden.zendesk.com/
- Issues: https://github.com/zendeskgarden/react-containers/issues
- npm.io page: https://npm.io/package/@zendeskgarden/container-selection

## Dependencies (2)

- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.8.4
- [@zendeskgarden/container-utilities](https://npm.io/package/@zendeskgarden/container-utilities.md) ^2.0.5

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 3.1.5 (latest) — 2025-12-15
- 3.1.4 — 2025-12-02
- 3.1.3 — 2025-08-05
- 3.1.2 — 2024-09-25
- 3.1.1 — 2024-08-23
- 3.1.0 — 2024-07-01
- 3.0.10 — 2024-07-01
- 3.0.9 — 2024-01-26
- 3.0.8 — 2024-01-26
- 3.0.7 — 2024-01-23
- 3.0.6 — 2023-10-02
- 3.0.5 — 2023-09-28
- 3.0.4 — 2023-08-24
- 3.0.3 — 2023-08-23
- 3.0.2 — 2023-07-28
- … 53 more at https://npm.io/package/@zendeskgarden/container-selection/versions

## README

# @zendeskgarden/container-selection [![npm version][npm version badge]][npm version link]

[npm version badge]: https://flat.badgen.net/npm/v/@zendeskgarden/container-selection
[npm version link]: https://www.npmjs.com/package/@zendeskgarden/container-selection

This package includes containers relating to selection in the
[Garden Design System](https://zendeskgarden.github.io/).

## Installation

```sh
npm install @zendeskgarden/container-selection
```

## Usage

Check out [storybook](https://zendeskgarden.github.io/react-containers) for live
examples.

### useSelection

The `useSelection` hook which manages an items focus state including keyboard controls,
aria attributes and RTL support. It uses the
[roving tab index strategy](https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex).

```jsx
import { useSelection } from '@zendeskgarden/container-selection';

const values = ['Value 1', 'Value 2', 'Value 3'];

const Selection = ({ direction }) => {
  const { focusedValue, selectedValue, getGroupProps, getElementProps } = useSelection({
    values,
    direction
  });

  return (
    <ul {...getGroupProps()}>
      {values.map(value => {
        const isSelected = selectedValue === value;
        const isFocused = focusedValue === value;

        return (
          <li {...getElementProps({ key: value, value })}>
            {value}
            {isSelected && <div>[Selected]</div>}
            {isFocused && <div>(Focused)</div>}
          </li>
        );
      })}
    </ul>
  );
};
```

### SelectionContainer

```jsx
import { SelectionContainer } from '@zendeskgarden/container-selection';

const values = ['Value 1', 'Value 2', 'Value 3'];

<SelectionContainer direction="vertical" values={values}>
  {({ selectedValue, focusedValue, getGroupProps, getElementProps }) => (
    <ul {...getGroupProps()}>
      {values.map(value => {
        const isSelected = value === selectedValue;
        const isFocused = value === focusedValue;

        return (
          <li {...getElementProps({ key: value, value })}>
            {item}
            {isSelected && <span> - Selected</span>}
            {isFocused && <span> - Focused</span>}
          </li>
        );
      })}
    </ul>
  )}
</SelectionContainer>;
```

---
_Source: https://npm.io/package/@zendeskgarden/container-selection · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._