MultiSelectTreeProps

Specifies the accessKey of the MultiSelectTree.

Provides different rendering of the popup element based on the screen dimensions.

Specifies the text that is rendered as title in the adaptive popup.

Identifies the element(s) which will describe the component, similar to HTML aria-describedby attribute. For example these elements could contain error or hint message.

Identifies the element(s) which will label the component.

Specifies the name of the field which will provide a Boolean representation of the checked state of the item.

Specifies the name of the field which will provide a Boolean representation of the checked indeterminaet state of the item.

Sets additional classes to the MultiSelectTree.

Sets the key for comparing the data items of the MultiSelectTree (see example). If dataItemKey is not set, the MultiSelectTree compares the items by reference.

Sets the data of the MultiSelectTree (see example).

Represents the dir HTML attribute.

Sets the disabled state of the MultiSelectTree.

Specifies the name of the field which will provide a Boolean representation of the expanded state of the item.

Configures the fillMode of the MultiSelectTree.

The available options are:

• solid
• flat
• outline
• null—Does not set a fillMode className.

Sets the value of filtering input. Useful for making the filtering input a controlled component.

Enables the filtering functionality of the MultiSelectTree (more information and examples).

Specifies the id of the component.

Defines the component that will be used for rendering each of the MultiSelectTree items (see example).

Renders a floating label for the MultiSelectTree.

Defines the component that will be rendered in the MultiSelectTree popup when no data is available (see example).

Sets the loading state of the MultiSelectTree (see example).

Sets the modelValue of the MultiSelectTree. It can either be an array of the primitive (string, numbers) or of the complex (objects) type.

Specifies the name property of the input DOM element.

Fires each time the MultiSelectTree gets blurred.

Fires each time the value of the MultiSelectTree is about to change (see examples).

Fires each time the popup of the MultiSelectTree is about to close.

Fires when the expanding or collapsing of an item is requested (see examples).

Fires each time the user types in the filter input (see example). You can filter the source based on the passed filtration value.

Fires each time the user focuses the MultiSelectTree.

Fires each time the popup of the MultiSelectTree is about to open.

Sets the opened state of the MultiSelectTree.

The hint that is displayed when the MultiSelectTree is empty.

Configures the popup of the MultiSelectTree.

Specifies if null is a valid value for the component.

Configures the roundness of the MultiSelectTree.

The available options are:

• small
• medium
• large
• full
• null—Does not set a rounded className.

Configures the size of the MultiSelectTree.

The available options are:

• small
• medium
• large
• null—Does not set a size className.

Specifies the name of the field which will provide an array representation of the item subitems. Defaults to 'items'.

Specifies the tabIndex of the MultiSelectTree.

Sets the tags of the MultiSelect (see example).

Sets the data item field that represents the item text (see example).

Overrides the validity state of the component. If valid is set, the required property will be ignored.

Specifies the validationMessage of the component.

If set to false, no visual representation of the invalid state of the component will be applied.

Sets the value of the MultiSelectTree. It can either be an array of the primitive (string, numbers) or of the complex (objects) type.

Represents a callback function, which returns the value for submitting. The returned value will be rendered in an option of a hidden select element.

Copy Codeclass App extends React.Component {
   render() {
      return (
         <form>
             <MultiSelectTree
                 data={[ { text: "Austria", id: 1 } , { text: "Belarus", id: 2 } ]}
                 valueMap={value => value && value.id}
             />
             <button type="submit">Submit</button>
         </form>
      );
   }
}
ReactDOM.render(<App />, document.querySelector('my-app'));