StellarUI

<stellar-search-list>

Filters direct child items from a slotted or external controller query.

Properties

Component

Example

Preview

Luna

Whiskers

Mittens

Shadow

No matching results.

Markup

Copy

<stellar-search-list
  match="fuzzy"
  debounce="300"
>
  <stellar-text-field slot="controller" label="Search cats" description="Results update as you type" type="search"></stellar-text-field>
  <article>Luna</article>
  <article>Whiskers</article>
  <article>Mittens</article>
  <article>Shadow</article>
  <p slot="empty">No matching results.</p>
</stellar-search-list>

API

Complete props, events, slots, and implementation notes for the shipped search list.

Props

Prop	Type	Default
`controller`	`string`	`''`
`match`	`exact \| fuzzy \| custom`	`exact`
`debounce`	`number`	`300`
`search-icon`	`string`	`mdi:magnify`
`clear-icon`	`string`	`mdi:close`

Events

Event	Source	Notes
`input`	controller	Consumed from the slotted or external controller. The search-list itself does not emit a custom event.

Slots

Slot	Notes
`controller`	Search controller element, usually `stellar-text-field` or native `<input>`.
default	Direct child items to be filtered. Do not wrap items in extra containers.
`initial`	Optional content shown before any query is entered.
`empty`	Optional content shown when a query has no matches.

Notes

The public tag is `stellar-search-list`, mirroring the shipped search-list behavior and slots.
Default slot items are filtered by their text content plus optional `data-keywords` on each item.
The `controller` slot accepts either `stellar-text-field` or native `input`; external controllers are linked with the `controller` ID prop.
When the controller is `stellar-text-field`, `search-icon` and `clear-icon` drive the start/end affordances. The clear icon only appears when the query is non-empty.
`match='exact'` and `match='fuzzy'` are built in. `match='custom'` uses the host `isMatch` function property and falls back to exact matching if unset.
`setQuery(query)` is exposed as a host method for programmatic syncing when app code updates the controller value outside normal input events.
The component keeps ownership small: no list item rendering, no internal option model, and no generated markup beyond filtering authored children.