@zendeskgarden/container-selection 
This package includes containers relating to selection in the Garden Design System.
Installation
npm install @zendeskgarden/container-selectionUsage
Check out storybook 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.
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
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>;