# antuikit / TreeSelect

> TreeSelect with `text` and `bare` variants, its arrow, chip remove and clear icons from the icon pack, and room on the left of the field for a ring that draws past its box.

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

## Install

npx antuikit@latest init
npx antuikit@latest add tree-select

## Import

import { TreeSelect } from "@/components/ui/tree-select";

## Demos

- [Basic](https://ui.antuikit.com/embed/tree-select/basic.md): Pass `treeData` as nested nodes with a `title`, `value` and `key` each.
- [Allow clear](https://ui.antuikit.com/embed/tree-select/allow-clear.md): Add `allowClear` to show a clear button on hover, which sets the value back to `undefined`.
- [Sizes](https://ui.antuikit.com/embed/tree-select/sizes-variants-status.md): Set `size` to `small`, `medium` or `large` to match the field to the controls around it.
- [Variants](https://ui.antuikit.com/embed/tree-select/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/tree-select/status.md): Set `status` to `warning` or `error` to color the border, like when a form field fails validation.
- [Multiple](https://ui.antuikit.com/embed/tree-select/multiple.md): Add `multiple` to pick several nodes, each shown as a chip you can remove, with no checkboxes in the tree.
- [Checkable](https://ui.antuikit.com/embed/tree-select/checkable.md): Add `treeCheckable` to put a checkbox on every node, where checking a parent checks all of its children.
- [Checked strategy](https://ui.antuikit.com/embed/tree-select/checked-strategy.md): Set `showCheckedStrategy` to choose what a fully checked branch reports: its children, the parent alone, or every node.
- [Check strictly](https://ui.antuikit.com/embed/tree-select/check-strictly.md): Add `treeCheckStrictly` to check parents and children independently, which makes each value a `{ value, label }` object.
- [Max count](https://ui.antuikit.com/embed/tree-select/max-count.md): Set `maxCount` with `multiple` to cap how many nodes can be picked, which disables the rest once the limit is reached.
- [Tree lines](https://ui.antuikit.com/embed/tree-select/tree-line.md): Add `treeLine` to draw lines between parent and child nodes in the dropdown tree.
- [Load on expand](https://ui.antuikit.com/embed/tree-select/async.md): Pass `loadData` to fetch a node's children when it is expanded, here as flat `treeDataSimpleMode` rows appended to state.
- [In a form](https://ui.antuikit.com/embed/tree-select/in-form.md): Put TreeSelect in a `Form.Item` with `rules` to require a choice, here a department picked from a team tree.

## 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/tree-select`, 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-*)`.
- `TreeSelect` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.