Tree Input

Form control to pick one node from a hierarchical tree (dropdown + ab-tree), with static .items or lazy data_source__thing_id.

HTML tag: c-ed70b32d96d1444c4aeb2ed59855bf105

When to use

• pick one node from a hierarchy
• category or folder path selection
• lazy-loaded tree dropdown field

Props

Prop	Type	Default	Description
value	String	“
value_path	String	value
display_path	String	label
items	Array	“
data_source__thing_id	String
value_delimiter	String	.
value_resolution_mode	String	full_value
label	String
helper_text	String
placeholder	String	Select an item…
disabled	Boolean	false
readonly	Boolean	false
required	Boolean	false
status	String	default
open	Boolean	false
trigger_icon	String	mi:expand_more
close_on_outside_click	Boolean	true
selected_item	Object
label_display	String	path
children_path	String	children
has_children_path	String	has_children
child_count_path	String
is_leaf_path	String	is_leaf
has_children_condition	String
probe_children_on_expand	String	when_unknown
default_expand_level	Number
selection_mode	String	single
expanded_keys	String	“
indent_size	Number	12
text_align	String	left
row_guides	Boolean
data_source_input_params	Object	[object Object]
parent_param_path	String	parent_thing_id
min_search_chars	Number	2
search_param_path	String	search_term
server_debounce_ms	Number	250
tree_max_height	Number	320
keep_open_on_select	Boolean

Rules

• Bind .value as path string (see value_delimiter, value_resolution_mode).
• value-changed emits rich detail on commit; selected-item-changed fires with current value.
• Configure children_path, value_path, display_path; server search via min_search_chars and search_param_path.
• selection_mode typically single.

Events

Event	Detail
value-changed	value: String, item: Object, path_value: String, path_keys: Array, path_labels: Array, leaf_key: String, path_items: Array
selected-item-changed	item: Object, value: String

Methods

Signature	Description
toggleDropdown()
closeDropdown()
focus(options: Object)
blur()
setValue(value: any, options: Object)

What to avoid

Do not use ab-select for deep hierarchies. Do not use ab-list when you only need to pick one existing node.

Example

<c-ed70b32d96d1444c4aeb2ed59855bf105 .label=${'Category'} .items=${tree} .value=${categoryPath} .value_path=${'id'} .display_path=${'label'} @value-changed=${onPath}></c-ed70b32d96d1444c4aeb2ed59855bf105>