List

Interactive

See List in Storybook for every variant, with live controls.

A bordered stack of rows. Rows can be static, or selectable.

import { List } from "@kairosis/eidos";

<List
  items={[
    {
      id: "api",
      title: "api-gateway",
      description: "Edge routing",
      icon: "server",
      meta: "2m 14s",
    },
    {
      id: "auth",
      title: "auth-service",
      description: "Token issuance",
      icon: "shield",
      meta: "18s",
    },
  ]}
  activeId={selected}
  onSelect={setSelected}
/>;

Props

Prop	Type	Default	Description
`items`	`ListItem[]`	—	Required
`activeId`	`string`	—	Highlights the matching row
`onSelect`	`(id: string) => void`	—	Makes rows selectable

ListItem is { id, title, description?, icon?, meta?, leading?, trailing? }. meta renders mono at the right edge — timestamps, durations, counts. leading and trailing take arbitrary nodes (an Avatar, a Badge).

Guidelines

With onSelect, rows become real <button>s — focusable, keyboard-activatable, and they grow a trailing chevron. Without it they're plain rows. This is why selection isn't just an onClick prop.
The list renders a real <ul>/<li>, so the row itself is free to be a button. (An explicit role="listitem" on a button would override its implicit button role and hide from assistive tech that the row is actionable at all.)
Selection (activeId) outranks hover, so the active row stays highlighted.
title and description truncate with an ellipsis rather than wrapping — rows stay one line tall.
For tabular data with columns and sorting, use DataTable.

Props​

Guidelines​

Props

Guidelines