TreeSelect

Pick one or more values from a hierarchical data set

Import: import { TreeSelect } from 'react-native-mantine';

Usage

import { TreeSelect } from 'react-native-mantine';
import type { TreeNodeData } from 'react-native-mantine';

const data: TreeNodeData[] = [
  {
    value: 'frontend',
    label: 'Frontend',
    children: [
      { value: 'react', label: 'React' },
      { value: 'vue', label: 'Vue' },
    ],
  },
];

// Single mode
<TreeSelect
  label="Technology"
  placeholder="Pick one technology"
  data={data}
  value={value}
  onChange={setValue}
  searchable
  clearable
/>

// Checkbox mode, parent checks all leaves
<TreeSelect
  data={data}
  mode="checkbox"
  defaultExpandAll
  maxDisplayedValues={2}
/>

Props

Prop	Type	Default	Description
`data` (required)	`TreeNodeData[]`		Tree data with label, value and optional children
`mode`	`'single' \| 'multiple' \| 'checkbox'`	`"single"`	Selection mode, in checkbox mode checking a parent checks all of its leaf nodes
`value`	`string \| string[] \| null`		Controlled value: string or null for single mode, string[] for multiple and checkbox modes
`defaultValue`	`string \| string[] \| null`		Default value for uncontrolled component
`onChange`	`(value: string \| string[] \| null) => void`		Called when value changes
`allowDeselect`	`boolean`	`true`	In single mode, determines whether pressing the selected node deselects it
`maxValues`	`number`		Maximum number of selected values in multiple and checkbox modes
`maxDisplayedValues`	`number`		Maximum number of values displayed in the input, the rest is shown as +N
`defaultExpandedValues`	`string[]`		Node values that are expanded by default
`defaultExpandAll`	`boolean`	`false`	Determines whether all nodes should be expanded by default
`searchable`	`boolean`	`false`	Determines whether the search input should be displayed in the dropdown
`searchPlaceholder`	`string`	`"Search..."`	Search input placeholder
`nothingFoundMessage`	`React.ReactNode`		Message displayed when no nodes match the search
`clearable`	`boolean`	`false`	Determines whether the clear option should be displayed
`clearButtonLabel`	`string`	`"Clear"`	Clear option label
`onClear`	`() => void`		Called when the value is cleared
`label`	`React.ReactNode`		Input label
`description`	`React.ReactNode`		Input description
`error`	`React.ReactNode`		Error message
`placeholder`	`string`		Input placeholder
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`"sm"`	Controls input height and font size
`radius`	`MantineNumberSize`	`"sm"`	Key of theme.radius or any valid value to set border-radius
`required`	`boolean`		Displays required asterisk
`disabled`	`boolean`		If set, the input is disabled
`maxDropdownHeight`	`number`	`400`	Maximum height of the dropdown list

Source on GitHub · npm