AB Select

Dropdown select for one or many options with search, async loading, and keyboard navigation.

HTML tag: c-eb3fc83bf55694e4883c2d62a33238b8a

When to use

• dropdown with many options
• searchable or async option list
• single or multi select from list

Props

Prop	Type	Default	Description
value	string
options	array
multiple	boolean
searchable	boolean	true
data_source__thing_id	string
placeholder	string
disabled	boolean
required	boolean
size	string	md
name	string
invalid	boolean
helper_text	string
label	string
open	boolean
aria_label	string
debounce_ms	number	120
empty_text	string	No results
loading	boolean
loading_text	string	Loading…
active_index	number	-1
trigger_icon	string	mi:expand_more
icon_size	string	md
item_icon_default	string
item_icon_property	string	icon
reserve_item_icon_space	boolean
show_item_icons	boolean
show_clear_button	boolean	true
data_source_input_params	object	[object Object]
data_source_use_pagination	boolean	true
data_source_page_size	number	10
data_source_page_number	number	1
display_path	string
value_path	string
icon_path	string
min_search_chars	number	2
has_next_page	boolean
error_text	string
server_debounce_ms	number	300
search_placeholder	string	Type at least {min} characters
search_param_path	string	search_term
label_position	string	stacked
preserve_search_on_select	boolean
close_on_outside_click	boolean	true
close_on_escape	boolean	true

Rules

• Static: .options array + .value (string or array when multiple).
• Listen to change for selection; selected-items-changed when multiple.
• searchable + loadmore for large/async lists.
• data_source__thing_id for backend-driven options.

Events

Event	Detail
change	value: string, values: array, trigger: string
selected-items-changed
activechange	index: number
loadmore
source-data-loaded
source-data-load-failed
source-record-loaded
source-record-load-failed

What to avoid

Do not use ab-radio-group for 20+ options. Do not use ab-select for a single boolean (ab-checkbox).

Example

<c-eb3fc83bf55694e4883c2d62a33238b8a .value=${country} .options=${countries} .searchable=${true} @change=${e => country = e.detail.value}></c-eb3fc83bf55694e4883c2d62a33238b8a>