List

Declarative list of selectable or navigable items. Renders an accessible <ul> with items described via content — each item can be plain text, an internal link (to) or have an action callback.

When to use

✅ Use when…	🚫 Avoid when…
For short lists of options/items with selection state (single or multiple). As secondary navigation in side menus and dropdowns. For compact search results where each row is clickable.	For very long lists with virtualization. Use a dedicated virtual list. As a data table (rows with multiple columns). Use `Table`. For purely textual content without interactivity. Use a plain `<ul>` with `Text`.

Simple List

Item 1
Item 2
Item 3

<List content={[{ title: 'Item 1' }, { title: 'Item 2' }, { title: 'Item 3' }]} />

List with Check Icon

showCheckIcon displays an icon on the left when the item is selected. Click the items to see the icon appear.

Item 1
Item 2
Item 3

<List showCheckIcon content={[{ title: 'Item 1' }, { title: 'Item 2' }, { title: 'Item 3' }]} />

Multiple Selection

The multiple prop allows selecting more than one item simultaneously.

Item 1
Item 2
Item 3

<List multiple showCheckIcon content={[{ title: 'Item 1' }, { title: 'Item 2' }, { title: 'Item 3' }]} />

Exclusive selection (radio-like)

Single selection is a toggle by default — clicking the selected item clears it. For a picker where one option is always on (theme, density, one-of-N), pass exclusive: clicking the selected row keeps it selected (the callbacks still fire) and clicking another row moves the selection. isSelected in content is kept in sync after mount — no remount key needed.

Light
Dark
System

<List exclusive showCheckIcon content={themes} onItemClick={(item) => setTheme(item.id)} />

Dropdown options= turns exclusive on by default.

List of Links

Add to to an item to turn it into a link. By default, it renders as a native <a> — pass as={NextLink}/as={RouterLink} in the consumer for SPA navigation.

Button

Text

Form

<List
  content={[
    { title: 'Button', to: '/docs/elements-button' },
    { title: 'Text', to: '/docs/elements-text' },
    { title: 'Form', to: '/docs/form-form' },
  ]}
/>

Selection Callback

Use onSelectItems to receive the full updated list on each click.

Tenet
Interstellar
Inception

<List
  onSelectItems={(items) => {
    const selected = items.filter((i) => i.isSelected);
    console.log('Selected:', selected);
  }}
  content={[{ title: 'Tenet' }, { title: 'Interstellar' }, { title: 'Inception' }]}
/>

Properties


Prop	Type	Default	Description
`alignContent`	`"center" \| "start" \| "end" \| "between" \| "around" \| "evenly" \| "stretch"`	—	Packing of wrapped lines / grid tracks on the block axis.
`containment`	`string`	—	Containment marker for the `cq` channel: emits `container-type` (+ `container-name` when the string form carries one, e.g. `'inline-size card'`). Apply on the immediate wrapper of the adapting component — NEVER on page-level shells.
`content *`	`ListContentType[]`	—	The list's items.
`cq`	`Partial<Record<ContainerSizeTypes, Partial<Omit<Partial<{ area: string; padding: string \| number; margin: string \| number; isHidden: boolean; truncate: boolean; pageShell: boolean; ... 14 more ...; transform: string; }>, "containment"> & Partial<...> & SizeFactoryProps & Partial<...>>>>`	—	Container-relative layout styles per `theme.containerSizes` key.
`enableBreakpoint`	`"xs" \| "xl" \| "sm" \| "md" \| "lg"`	—	Forces a breakpoint's prop set to apply regardless of viewport (stories/previews).
`exclusive`	`boolean`	`false`	Radio-group semantics for single selection: exactly one item stays selected and clicking the selected item keeps it (the `action` / `onItemClick` callbacks still fire — an idempotent pick). Ignored when `multiple` is set. `Dropdown` `options=` turns it on by default.
`ignoreResponsive`	`boolean`	—	Fully disables the responsive factory (tests / fixed snapshots).
`justifyItems`	`"center" \| "start" \| "end" \| "stretch"`	—	Grid containers: inline alignment of every item in its cell.
`multiple`	`boolean`	`false`	Allows selecting more than one item at a time. Without it, selecting an item deselects the others.
`onItemClick`	`((l: ListContentType) => void)`	—	Called when an item is clicked. Receives only the clicked item.
`onSelectItems`	`((l: ListContentType[]) => void)`	—	Called on every change to the selection array. Receives the whole list with `isSelected` updated.
`pageShell`	`boolean`	—	Centers the element and caps the width at `theme.layout.pageMaxWidth`. The page shell of a classic centered layout.
`placeItems`	`"center" \| "start" \| "end" \| "stretch"`	—	Grid containers: `place-items` shorthand (block + inline).
`showCheckIcon`	`boolean`	`false`	Displays a check icon to the left of selected items (only on items without `to`).
`transform`	`string`	—	CSS `transform` value (e.g. `translate(-50%, -33px)`). Never leaks to the DOM as an attribute.
`viewportMedias`	`Partial<Record<keyof BreakPoint<any>, Partial<Omit<Partial<{ area: string; padding: string \| number; margin: string \| number; isHidden: boolean; truncate: boolean; pageShell: boolean; container: boolean; ... 13 more ...; transform: string; }>, "containment"> & Partial<...> & SizeFactoryProps & Partial<...>>>> \| unde...`	—	Viewport-driven layout styles per `theme.breakpoints` key.

Besides the props above, every component accepts the layout props (spacing, color, flex/grid, sizing, border) — not repeated here.