Action List API

Properties

Name	Type	Default	Description
items	array	[]	Sets the list items. Each item is an object with type, content, value and optional group, color, icon, selected, disabled fields. Content may include HTML — sanitize it in your application to prevent XSS.
loading	boolean	false	Shows a spinner instead of the list content.
disable-min-width	boolean	false	Sets the min-width of the component to 0.
always-show-search	boolean	false	Shows the search input even when there are fewer than 8 options.
always-show-active	boolean	false	Shows the active item indicator even when the component is not focused.
search-hidden	boolean	false	Prevents the search input from ever appearing.
empty-state-text	string	—	Text shown when the list is empty with no search keyword. Set to empty string to hide the empty state entirely.
selection-disabled	boolean	false	Makes all items unselectable but they still fire a change event on click.
height	string	"auto"	Fixed height of the component. Accepts any CSS unit.
max-height	string	"auto"	Maximum height of the component. Accepts any CSS unit.
auto-focus	boolean	false	Focuses the search input when it becomes visible.
multiple	boolean	false	Enables multiple selection.
selection-max	number	—	Maximum number of selectable options. Must be greater than 0.
spacing	"cozy" | "none"	"cozy"	Outer padding of the actionlist.
item-limit	number	1000	Maximum number of visible items. Items over the limit are hidden and only appear in search results.

JavaScript API

Name	Kind	Description
isFirstItemActive	getter	Returns whether the first visible item is active (has secondary focus).
isLastItemActive	getter	Returns whether the last visible item is active (has secondary focus).
selectedItems	getter	Returns the currently selected items.
moveActiveItem(direction)	action	Moves secondary focus in the given direction. Accepts 'next', 'previous', 'first', or 'last'.
toggleActiveItem()	action	Activates the currently focused item as if it was clicked.

Events

Event	Description		Returns
change	Fires on item selection change.		{ detail: { value: string | string[] } }
search	Fires on search input.		{ detail: { value: string } }
hoverchange	Fires when the mouse hover moves between items. Returns the hovered item or null when leaving.		{ detail: { item: ActionlistItem | null } }
activechange	Fires when keyboard focus moves between items. Returns the active item or null when leaving.		{ detail: { item: ActionlistItem | null } }