The Streamlit ANT Tree Select Component adds a hierarchical dropdown selector to Streamlit, based on Ant Design Tree Select. It supports nested selections, multiple selection, and search functionality.
Install with pip:
pip install st-ant-treeThe component is initialized by calling st_ant_tree. It returns a list of selected values.
from st_ant_tree import st_ant_tree
# Define tree data
tree_data = [
{
"value": "parent_1",
"title": "Parent 1",
"children": [
{"value": "child_1", "title": "Child 1"},
{"value": "child_2", "title": "Child 2"},
],
},
{"value": "parent_2", "title": "Parent 2"},
]
# Use the component
selected_values = st_ant_tree(
treeData=tree_data,
treeCheckable=True,
allowClear=True
)
st.write(f"Selected values: {selected_values}")The tree data should be a list of dictionaries, where each dictionary represents a tree node. Keys include:
value(required): The value returned when the node is selected.title(required): The label shown in the dropdown (can include HTML).children(optional): A list of child nodes (nested structure).disabled(optional): Disables the node.
To set a default selection, use the defaultValue parameter with a list of node values.
# Define tree data
tree_data = [
{
"value": "parent_1",
"title": "Parent 1",
"children": [
{"value": "child_1", "title": "Child 1"},
{"value": "child_2", "title": "Child 2"},
],
},
{"value": "parent_2", "title": "Parent 2"},
]
# Set default selection
selected_values = st_ant_tree(
treeData=tree_data,
defaultValue=["child_1"], # List of default selected values
treeCheckable=True
)Key parameters and their purpose:
treeData(list): The hierarchical data for the dropdown.defaultValue(list): Preselected values.allowClear(bool): Enables clearing selected values.treeCheckable(bool): Adds checkboxes for multi-select.showSearch(bool): Enables search functionality.max_height(int): Maximum height of the dropdown.width_dropdown(str): Width of the dropdown (e.g.,"90%").placeholder(str): Placeholder text for the selector.treeLine(bool): Displays lines connecting tree nodes.
# Define tree data
tree_data = [
{
"value": "parent_1",
"title": "Parent 1",
"children": [
{"value": "child_1", "title": "Child 1"},
{"value": "child_2", "title": "Child 2"},
],
},
{"value": "parent_2", "title": "Parent 2"},
]
# Create a searchable dropdown
selected_values = st_ant_tree(
treeData=tree_data,
showSearch=True,
placeholder="Search and select",
treeCheckable=True
)
st.write(f"Selected values: {selected_values}")- Nested Selections: Supports parent-child relationships in dropdowns.
- Multiple Selection: Enable with
treeCheckable=True. - Search: Matches input with both
valueandtitleof nodes. - Custom Styling: Use HTML in
titleor modify dropdown dimensions.