List

A flexible, keyboard-navigable list component for displaying and selecting from collections of items. Supports primitives, nested groups, field mapping, and fully customizable item rendering via snippets.

Basic Example

Pass an array of objects with label and optionally icon fields. Bind value to track the current selection and use onselect for a callback.

Primitive Arrays

Pass a plain array of strings or numbers — no objects required. Each primitive becomes both the display text and the selected value.

Nested Groups

Items with a children array are rendered as collapsible groups. Add the collapsible prop to allow toggling. Keyboard navigation with arrow keys moves through all visible items; left/right keys collapse and expand groups.

Field Mapping

Your data rarely matches the component's default field names. Use the fields prop to remap — for example, mapping name → text and path → value without altering your data.

Custom Icons

Override the default expand/collapse chevrons with any icon via the icons prop. Here we use folder icons to make a file-tree style list.

Custom Item Rendering

Use the itemContent snippet to fully control what appears inside each list item. The snippet receives a ProxyItem — use proxy.label, proxy.icon, and proxy.get('fieldName') to access any field. Here each item shows a status badge alongside the icon and label.

Per-Item Snippets

For items that need entirely different layouts, set item.snippet = 'name' to route each item to a named snippet. Items without a snippet field fall back to itemContent (or the default renderer). Here fruits and vegetables get distinct treatments.

Interactive Elements in Snippets

Snippets support full Svelte reactivity — you can embed checkboxes, toggles, or inputs. Use proxy.value to access the original item and mutate it directly. Call e.stopPropagation() on the control's click to prevent the List from also triggering item selection.