HierarchicalSuggester
Form ControlsStable
Hierarchical suggestion menu for nested selections. Displays grouped options in a tree-like suggestion interface.
Quick Import
import { HierarchicalSuggester } from "@cohere-ai/waypoint-ui/hierarchical-suggester";Live Preview
Loading HierarchicalSuggester...
Props
| Name | Type | Default | Description |
|---|---|---|---|
data* | SuggestionGroup[] | - | Grouped suggestion options |
value | string | '' | Controlled input value |
onChange | function | - | Callback on value change |
placeholder | string | - | Input placeholder |
noResultsMessage | string | - | Message when no results found |
className | string | - | Additional CSS classes |
* Required prop
Examples
Hierarchical Suggester
Grouped suggestion input with hierarchical options
1 import { HierarchicalSuggester } from '@cohere-ai/waypoint-ui/hierarchical-suggester'; 2 3 <HierarchicalSuggester 4 data={[ 5 { 6 label: 'Documents', 7 items: [ 8 { value: 'doc-1', label: 'Quarterly Report' }, 9 { value: 'doc-2', label: 'Design Spec' }, 10 ], 11 }, 12 ]} 13 placeholder="Search..." 14 onChange={(value) => console.log(value)} 15 />
Additional Resources
Found an Issue?
If you've encountered a bug or have feedback about the HierarchicalSuggester component, please report it to our team. Your feedback helps us improve Waypoint.
Available for all users • Issue will be created in Linear
Was this page helpful?
Your feedback helps us improve our documentation.
Need Help?
Check out the Whitelabeling Playground to explore customization options or visit the Developer Guide for integration help.