# antuikit / Cascader

> Cascader, with `text` and `bare` variants and room on the left of the field and each menu item for a ring or a pulse that draws past its box.

Docs: https://antuikit.com/docs/components/cascader

## Install

npx antuikit@latest init
npx antuikit@latest add cascader

## Import

import { Cascader } from "@/components/ui/cascader";

## Demos

- [Basic](https://ui.antuikit.com/embed/cascader/basic.md): Pass nested `options` to pick a path level by level, like Turkish, Desserts, Laz böreği, and preset one with `defaultValue`.
- [Sizes](https://ui.antuikit.com/embed/cascader/sizes.md): Set `size` to `large` or `small` to change the field's height, with the middle size as the default.
- [Variants](https://ui.antuikit.com/embed/cascader/variants.md): Set `variant` to `outlined`, `filled`, `text`, `underlined`, `borderless` or `bare` to change how the field is drawn. `text` fills on hover and while open, and `bare` draws nothing at all.
- [Status](https://ui.antuikit.com/embed/cascader/status.md): Set `status` to `warning` or `error` to color the field's border for validation.
- [Multiple](https://ui.antuikit.com/embed/cascader/multiple.md): Set `multiple` to check several paths at once, each shown as a tag, and `disableCheckbox` on an option that can be opened but not checked.
- [Checked strategy](https://ui.antuikit.com/embed/cascader/checked-strategy.md): Set `showCheckedStrategy` to report a fully checked branch as its parent with `SHOW_PARENT`, or as every leaf in it with `SHOW_CHILD`.
- [Expand on hover](https://ui.antuikit.com/embed/cascader/hover.md): Set `expandTrigger="hover"` to open the next column when the pointer rests on an option, instead of on click.
- [Change on select](https://ui.antuikit.com/embed/cascader/change-on-select.md): Set `changeOnSelect` to accept any level as the value, so picking Turkish alone closes the picker without going down to a dish.
- [Disabled option](https://ui.antuikit.com/embed/cascader/disabled-option.md): Set `disabled` on an option to block it, whether a single dish like Osso buco or a whole branch like French.
- [Search](https://ui.antuikit.com/embed/cascader/search.md): Set `showSearch` to filter by typing, which matches every level of a path, so Dessert finds the desserts of every cuisine.
- [Lazy load](https://ui.antuikit.com/embed/cascader/lazy-load.md): Pass `loadData` to fetch an option's children when the reader opens it, with `isLeaf: false` on options that have more to load.
- [Custom display](https://ui.antuikit.com/embed/cascader/custom-render.md): Pass `displayRender` to choose how the chosen path reads in the closed field, like the cuisine's flag before labels joined with an arrow.
- [Field names](https://ui.antuikit.com/embed/cascader/field-names.md): Pass `fieldNames` to read options that use other keys, like `name` and `code`, without remapping your data first.
- [Panel](https://ui.antuikit.com/embed/cascader/panel.md): Use `Cascader.Panel` to show the columns inline with no trigger or popup, to place inside a Popover or a form of your own.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/cascader`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `Cascader` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.