A combination of the TreeView and DropDown components, the Vue DropDownTree is ideal for scenarios when you need to concisely display complex data. When users interact with this intuitive input element, the dropdown opens to reveal a built-in TreeView with a hierarchical structure. By selecting a node, the corresponding value will appear in the input of the component.
When filtering is enabled, the Vue DropDownTree component displays an additional search box positioned above the item collection. The filtering mechanism enables end-users to minimize the displayed information within the component and facilitates them to find the specific items they're searching for.
The Vue DropDownTree enables you to easily customize the look-and-feel of the component. You can modify the content of each list item, as well as the element content that holds the selected text. The component also enables you to customize the header and footer content, as well as the content of the option list when no data is available.
The Vue DropDownTree component provides a native Vue implementation of HTML5 form validation, enabling you to validate the input values and prevent the submission of forms that are considered invalid.
The DropDownTree incorporates built-in keyboard functionality, allowing users to interact with the Vue component solely using a keyboard. This enables users to effortlessly open and close the dropdown, navigate between items, select items and perform various other actions, all through convenient keyboard interactions.
The Vue DropDownTree component provides a predefined set of appearance options. Apart from the default look of the DropDownTree, additional styling options allow you to customize individual aspects of the DropDownTree appearance, such as size, border radius and fill mode.
The Vue DropDownTree comes with comprehensive accessibility support, ensuring that the component is accessible to all users. The DropDownTree adheres to the Web Content Accessibility Guidelines (WCAG) 2.2 AA standards](https://www.w3.org/TR/WCAG21/) and Section 508 requirements. It also follows the Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA) best practices for implementing keyboard navigation. The component offers various options for managing its focus and is tested against the most popular screen readers.