CheckTreePicker

CheckTreePicker are supported in multiple selectors for multiple selection of complex data structures.

Import 

import { CheckTreePicker } from 'rsuite';

// or
import CheckTreePicker from 'rsuite/CheckTreePicker';

Examples

Default

Appearance

Size

Cascade

The cascade attribute can set whether or not CheckTreePicker can consider the cascade relationship of the parent parent when selecting. The default value is true.

Placement

Disabled and read only

Custom options

Async

Accessibility

Learn more in Accessibility.

Props

<CheckTreePicker>

Property Type (Default) Description
appearance 'default' | 'subtle' ('default') Set picker appearence
block boolean Blocking an entire row
cascade boolean whether cascade select
childrenKey string ('children') set children key in data
cleanable boolean (true) whether the selected value can be cleared
container HTMLElement | (() => HTMLElement) Sets the rendering container
countable boolean (true) whether display counts of checkItems
data * ItemDataType[] tree data
defaultExpandAll boolean expand all tree node
defaultExpandItemValues string[] Set the value of the default expanded node
defaultValue string[] (UnControlled) default values of the selected tree node
disabled boolean Whether to disable Picker
disabledItemValues string[] Disable item by value
expandItemValues string[] Set the value of the expanded node (controlled)
getChildren (item: ItemDataType) => Promise<ItemDataType> load node children data asynchronously
height number (360px) height of menu. When virtualize is true, you can set the height of menu
labelKey string ('label') set label key in data
listProps ListProps List-related properties in react-virtualized
locale PickerLocaleType Locale text
menuClassName string className for Menu
menuStyle CSSProperties style for Menu
onChange (values:string[]) => void Callback fired when value change
onClean (event:SyntheticEvent) => void Callback fired when value clean
onClose () => void Callback fired when close component
onEnter () => void Callback fired before the overlay transitions in
onEntered () => void Callback fired after the overlay finishes transitioning in
onEntering () => void Callback fired as the overlay begins to transition in
onExit () => void Callback fired right before the overlay transitions out
onExited () => void Callback fired after the overlay finishes transitioning out
onExiting () => void Callback fired as the overlay begins to transition out
onExpand (expandItemValues: string[], item: ItemDataType, concat:(data, children) => Array) => void Callback fired when tree node expand state changed
onOpen () => void Callback fired when open component
onSearch (searchKeyword:string, event) => void Callback fired when search
onSelect (item:ItemDataType, value:string, event) => void Callback fired when tree node is selected
open boolean Whether open the component
placeholder ReactNode ('Select') Setting placeholders
placement Placement ('bottomStart') Placement of component
preventOverflow boolean Prevent floating element overflow
renderExtraFooter () => ReactNode Custom render extra footer
renderMenu (menu:ReactNode) => ReactNode Customizing the Rendering Menu list
renderTreeIcon (item:ItemDataType) => ReactNode Custom render the icon of tree node
renderTreeNode (item:ItemDataType) => ReactNode Custom render tree node
renderValue (values:string[], checkedItems:ItemDataType[],selectedElement: ReactNode) => ReactNode Custom render selected items
searchBy (keyword: string, label: ReactNode, item: ItemDataType) => boolean Custom search rules
searchable boolean (true) Whether display search input box
size 'lg' | 'md' | 'sm' | 'xs' ('md') A picker can have different sizes
toggleAs ElementType ('a') You can use a custom element for this component
uncheckableItemValues string[] Set the option value for the check box not to be rendered
value string[] (Controlled) specifies the values of the selected tree node
valueKey string ('value') Set value key in data
virtualized boolean Whether using Virtualized List
caretAs ElementType Custom component for the caret icon

ts:ItemDataType 

interface ItemDataType {
  /** The value of the option corresponds to the `valueKey` in the data. **/
  value: string;

  /** The content displayed by the option corresponds to the `labelKey` in the data. **/
  label: ReactNode;

  /**
   * The data of the child option corresponds to the `childrenKey` in the data.
   * Properties owned by tree structure components, such as TreePicker, Cascader.
   */
  children?: ItemDataType[];

  /**
   * Properties of grouping functional components, such as CheckPicker, InputPicker
   */
  groupBy?: string;

  /**
   * The children under the current node are loading.
   * Used for components that have cascading relationships and lazy loading of children. E.g. Cascader, MultiCascader
   */
  loading?: boolean;
}

ts:Placement 

type Placement =
  | 'bottomStart'
  | 'bottomEnd'
  | 'topStart'
  | 'topEnd'
  | 'leftStart'
  | 'leftEnd'
  | 'rightStart'
  | 'rightEnd'
  | 'auto'
  | 'autoVerticalStart'
  | 'autoVerticalEnd'
  | 'autoHorizontalStart'
  | 'autoHorizontalEnd';

Related Components