Find @zendeskgarden/react Selection Examples and Templates

Use this online @zendeskgarden/react-selection playground to view and fork @zendeskgarden/react-selection example apps and templates on CodeSandbox. Click any example below to run it instantly or find templates that can be used as a pre-built solution!

Selection Container Component | Zendesk Garden

Selection Container Component | Zendesk Garden Using the SelectContainer component from @zendeskgarden/react-selection we can build a custom fully accessible and keyboard navigable list of items that can react differently based on the user using a keyboard or mouse.

Textfield Container Component | Zendesk Garden

Textfield Container Component | Zendesk Garden Using the container components from @zendeskgarden/react-selection we can build a custom fully accessible and keyboard navigable text field in our own style!

Textfield Container Component | Zendesk Garden

Textfield Container Component | Zendesk Garden Using the container components from @zendeskgarden/react-selection we can build a custom fully accessible and keyboard navigable text field in our own style!

Advanced use of SelectionContainer Component | Zendesk Garden

Advanced use of SelectionContainer Component | Zendesk Garden Using the SelectContainer component from @zendeskgarden/react-selection I attempt to build an accessible chat log that can be interacted with via the keyboard and /or mouse.

sample

ayushi_thavrani

React-help-desk

React-help-desk

Advanced use of SelectionContainer Component | Zendesk Garden (forked)

Advanced use of SelectionContainer Component | Zendesk Garden (forked)Update: Use tabIndex on focused item. So it is possible to navigate using tab key, since arrow keys don't always work. i.e: when focus is within an input element. Using the SelectContainer component from @zendeskgarden/react-selection I attempt to build an accessible chat log that can be interacted with via the keyboard and /or mouse.

garden-create-react-app

garden-create-react-app An example application using the Zendesk Garden React Components

unruffled-taussig-59wco

unruffled-taussig-59wco

Textfield Container Component | Zendesk Garden (forked)

Textfield Container Component | Zendesk Garden (forked)Using the container components from @zendeskgarden/react-selection we can build a custom fully accessible and keyboard navigable text field in our own style!

sample (forked)

sample (forked)

sample (forked)

sample (forked)

Textfield Container Component | Zendesk Garden

Textfield Container Component | Zendesk Garden Using the container components from @zendeskgarden/react-selection we can build a custom fully accessible and keyboard navigable text field in our own style!

Advanced use of SelectionContainer Component | Zendesk Garden

Advanced use of SelectionContainer Component | Zendesk Garden Using the SelectContainer component from @zendeskgarden/react-selection I attempt to build an accessible chat log that can be interacted with via the keyboard and /or mouse.

Advanced use of SelectionContainer Component | Zendesk Garden (forked)

Advanced use of SelectionContainer Component | Zendesk Garden (forked)Update: Use tabIndex on focused item. So it is possible to navigate using tab key, since arrow keys don't always work. i.e: when focus is within an input element. Using the SelectContainer component from @zendeskgarden/react-selection I attempt to build an accessible chat log that can be interacted with via the keyboard and /or mouse.