All components (204)

Tree select

Fields · TreeSelect

What it is and when to use it

A dropdown with a tree inside: choosing a category, a department or a folder from a hierarchy without having the whole tree always in view. The field is that of Select; the panel is the Tree.

When to use it

A hierarchy from which ONE thing (or several) is chosen and which does not fit as a flat list.

When not to

Data in levels where a leaf is chosen by following a path (country > province > city): Cascader.
The tree has to be visible at all times, as navigation or as a filter: the standalone Tree.

One or several: with selection="single" (the default) choosing a node closes the panel; with "multiple" it stays open and what is chosen appears in the field, in the order of the tree. Any node can be chosen, branch or leaf, except the disabled ones. The branches leading to what is chosen open on their own.

Keyboard: Down Arrow or Up Arrow open the field; inside, those of the tree (arrow keys, Right Arrow opens a branch, Left Arrow closes it or goes up, Home and End, typing to jump, Enter or Space chooses) and Escape closes it, returning the focus to the field.

Accessibility: the panel is a treegrid with the name of the field; the focus enters the chosen row or the first one.

Form: with FormField (see "Form"): value, onChange and onBlur are passed to it as they are.

Fine-tuning: --amset-field-* variables of the field and --amset-tree-select-height (maximum height of the panel). No search inside the panel yet.

What it looks like

CategoryThe one in the product catalog

Clothing

Shirts

Pants

Coats

Feathers

Wool

Footwear

Home

<TreeSelect
  label="Category"
  placeholder="Choose a category"
  branches={[
    { key: 'clothing', label: 'Clothing', children: [
      { key: 'abrigos', label: 'Coats', children: [{ key: 'lana', label: 'Wool' }] },
    ] },
    { key: 'hogar', label: 'Home' },
  ]}
  defaultValue="lana"
/>

Props

Import it with import { TreeSelect } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`branches`required	`readonly TreeNode[]`	The tree of options. Any node can be chosen, branch or leaf, except disabled ones.
`label`required	`string`	—
`className`	`string`	Merged with the library classes; it does not replace them.
`defaultValue`	`string \| readonly string[] \| null`	—
`disabled`	`boolean`	—
`displayRender`	`(labels: readonly string[]) => ReactNode`	How the chosen items are shown in the closed field. Receives the names. By default, separated by commas.
`error`	`string`	—
`hiddenLabel`	`boolean`	The label for the screen reader only.
`hint`	`string`	—
`id`	`string`	—
`initialOpenKeys`	`readonly string[]`	Branches open at the start. Those leading to the chosen one open by themselves.
`invalid`	`boolean`	—
`name`	`string`	So that what is chosen travels in a native form: the key (or, with several, one field for each).
`offset`	`number`	—
`onBlur`	`() => void`	On leaving the field. The form uses it to mark that it has been touched.
`onChange`	`((key: string \| null) => void) \| ((keys: readonly string[]) => void)`	—
`placeholder`	`string`	—
`placement`	`Placement`	—
`readOnly`	`boolean`	—
`required`	`boolean`	—
`selection`	`"multiple" \| "single"`	—
`size`	`"sm" \| "md" \| "lg"`	—
`value`	`string \| readonly string[] \| null`	—
`variant`	`FieldVariant`	—

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: