Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

Cascader

Select items from hierarchical data using drill-down, columns, search and multiple selection.

CoreAdvanced Inputs@gaudi/design-system/core/CascaderView in StorybookSource

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import { Cascader } from '@gaudi/design-system/core/Cascader';

Copy an example into your project with the shadcn CLI: npx shadcn@latest add https://design.gaudi.site/r/cascader-async-drill-down.json.

Usage

import { Cascader, CascaderTrigger, CascaderValue, CascaderContent, CascaderList, CascaderItems } from '@gaudi/design-system/core/Cascader';
<Cascader items={categories} value={category} onValueChange={setCategory}>  <CascaderTrigger aria-label='Category'><CascaderValue placeholder='Choose category' /></CascaderTrigger>  <CascaderContent><CascaderList><CascaderItems /></CascaderList></CascaderContent></Cascader>

Examples

Async drill-down

Storybook

Avatars and role badges

Storybook

Columns mode

Storybook

Controlled state

Storybook

Drill-down picker

Storybook

Form field

Storybook

Multi-select with chips and presets

Storybook

Cascading tree in a popover

Storybook

Recently used groups

Storybook

Translated labels

Storybook

Two-line rows with branch colours

Storybook

Virtualized rows

Storybook

API

12 props

Accessibility

Keep loading and failure messages in the panel. Keyboard users need a clear path back to a parent and a named trigger.

Notes

  • The asynchronous examples demonstrate cancellation, remote lookup and recovery without replacing the current selection.
SelectSelect renders a styled option picker with searchable combobox behavior and multi-select support.20 examplesPillPill renders compact category and status labels.4 examplesFieldField composes form label, description, error, and input building blocks.7 examplesAvatarProfile images, resilient initials, presence, verification, account menus and collaborator groups. The existing Avatar API and curated patterns share the same image and fallback primitives.10 examplesIconStatic and interactive artwork from Gaudi’s centralized icon registry. AnimatedIcon adds opt-in motion with shared size and color tokens, a searchable catalogue, and host-controlled activation.5 examplesToggleGroupSingle or multiple pressed choices for view modes and compact formatting controls.6 examples