Svelte snippets give you full control over how each item renders — without wrapping components or forking source code. The component handles data logic, keyboard navigation, and ARIA; you control the pixels.
Item Snippets
Every collection component accepts an itemContent snippet that receives a ProxyItem. Use proxy.label, proxy.icon, and proxy.get('field') to access mapped values:
The ProxyItem API
Snippets receive a ProxyItem instance that provides a unified interface
to the underlying data, regardless of whether it's an object or a primitive:
| Property / Method | Returns | Description |
|---|---|---|
proxy.label | string | Mapped display text |
proxy.icon | string | Mapped icon class |
proxy.href | string | Mapped href (renders as <a>) |
proxy.value | any | The original raw item |
proxy.disabled | boolean | Whether the item is disabled |
proxy.expanded | boolean | Expand state for groups |
proxy.get('field') | any | Read any field by name |
Per-Item Snippets
Set item.snippet = 'name' to route specific items to named snippets.
Items without a snippet field use the default itemContent snippet:
Group Snippets
For nested data, use groupContent to customize how group headers render:
Per-Item Components
Map a component field to render entirely different Svelte components for
different items:
Interactive Snippets
Snippets support full Svelte reactivity. Embed checkboxes, toggles, or inputs inside
list items. Use e.stopPropagation() on the control's click to prevent
the List from also triggering item selection:
Related
- Field Mapping — How proxy resolves field values
- List — All snippet patterns in action
- Select — Custom option rendering