---
title: Overview
position: 1
seo_title: Overview of the MultiSelectTree Component
seo_description: Learn about the basic features of the Telerik and Kendo UI
MultiSelectTree component and its types, check out the extensive set of
available options in its live demo, and master its appearance by setting the
size, fill mode, and border radius as you wish on the fly.
---
## MultiSelectTree Overview
The MultiSelectTree component is a versatile UI element that allows users to select multiple items from a popup with hierarchical tree structure. Each option within the hierarchy is presented with a checkbox, allowing for easy selection. Once selected, the chosen items are displayed as chips, providing a clear visual representation of the user's selections. The MultiSelectTree component is commonly used in scenarios where users need to make multiple selections from a complex and structured data set, such as organizing files or selecting categories for a product.
### Live Demo
### Appearance
MultiSelectTrees provide built-in styling options that grant visually appealing and flexible rendering experience.
Apart from the default vision of the Telerik and Kendo UI MultiSelectTree, the component supports alternative styling options which enable you to configure the individual aspects of its appearance.
#### States
Depending on the action you want to imply through its appearance, the Telerik and Kendo UI MultiSelectTree can acquire the following states which you can set by using the following classes:
* A MultiSelectTree in its normal state is fully active, but the user is not interacting with it. This is the default state of the component. It can display an explanatory placeholder text or the currently selected items as separate chips.
* `k-hover`—Тhe hover state of a MultiSelectTree is applied after the user hovers over the component. In its hover state, the component is interactive and the user can click on it to open the popup with the tree list.
* `k-focus`—The focus state is triggered after the user clicks or tabs into the MultiSelectTree. In its focus state, the component is active, ready to receive user selection, and renders a visual indicator, for example, a highlighted border.
* `k-invalid`—The invalid state of the MultiSelectTree is triggered when there is an error with the user's selection. In this state, the component displays a red border and a validation icon to indicate the issue.
* `k-invalid k-focus`—The invalid focus state of a MultiSelectTree is a result of spotlighting a MultiSelectTree whose selection does not pass the validation requirements.
* `k-disabled`—The disabled state indicates that a MultiSelectTree is temporarily unclickable and users cannot interact with it. To indicate that they are unavailable, MultiSelectTrees in their disabled state are faded and slightly out of focus.
#### Anatomy
The anatomy of the MultiSelectTree summarizes the elements of the component.
The next image shows the anatomy of a MultiSelectTree and includes the following elements:
#### Size
The MultiSelectTree provides the `size` configuration option that enables you to control how big or small the rendered MultiSelectTree will be. MultiSelectTrees also provide options for size customization.
`size` provides the following available options:
* `small`—Renders small MultiSelectTrees, which are suitable for compact components, such as Toolbars, where the available space is limited.
* `medium` (default)—Renders a medium MultiSelectTree.
* `large`—Renders large MultiSelectTrees, which are suitable for adaptive designs.
* `none`—Does not set a `size` and allows you to add your own, custom value.
#### Fill Mode
The MultiSelectTree provides the `fillMode` configuration option that enables you to control the way in which color is applied to the rendered MultiSelectTree. MultiSelectTrees also provide options for fill-mode customization.
`fillMode` provides the following available options:
* `solid`(default)—A solid MultiSelectTree puts stronger emphasis on the action it indicates and draws the user's attention. Also, the solid fill mode is the traditional and common style that is widely used.
* `outline`—An outline MultiSelectTree provides a minimalist look, and can be a good choice when you want the component to blend in with the background or other UI elements.
* `flat`—A flat MultiSelectTree provides a very minimalist and clean look, and can be a good choice when you want the component to be unobtrusive.
#### Border Radius
The MultiSelectTree provides the `rounded` option that enables you to control the border radius. The defined value for the border radius significantly affects the look-and-feel of the UI. MultiSelectTrees also provide options for border-radius customization.
`rounded` provides the following available options:
* `small`—Renders a border radius of 2 px.
* `medium` (default)—Renders a border radius of 4 px.
* `large`—Renders a border radius of 6 px.
* `full`—Renders a border radius of 9999 px.
* `none`—Does not set a `rounded` and allows you to add your own, custom value.
### Framework-Specific Documentation
For specific information about the component, refer to its official product documentation:
