List group

te-list-group is a selectable list. Items can be plain strings or objects.

Basic

• First
• Second
• Third

<te-list-group :items="['First', 'Second', 'Third']" />

Objects, disabled items and flush

• First
• Second
• Third

<te-list-group flush :items="[
  { label: 'First' },
  { label: 'Second', disabled: true },
  { label: 'Third' },
]" />

Not clickable

• First
• Second

<te-list-group :clickable="false" :items="['First', 'Second']" />

ListGroupItem

interface ListGroupItem {
  label?: string;
  name?: string;      // slot name for this item
  disabled?: boolean;
}

Keyboard

Only when clickable — a static list is not interactive and stays out of the tab order. The list is one tab stop; the arrows move inside it, and disabled rows are skipped. Moving the focus does not change the selection, so the active item only changes when you ask for it.

Key	Does
↑ ↓	Previous / next row.
Home End	First / last row.
Enter Space	Select the focused row.

Props

Prop	Type	Default	Description
items	`(ListGroupItem	string)[]`	— (required)
activeItem	number | null	null	Selected index. Supports v-model:active-item.
clickable	boolean	true	When false, clicking does not change the selection.
flush	boolean	false	Removes the outer border.

Events

Event	Payload	Description
update:activeItem	number	Emitted when an item is clicked.

Slots

Slot	Props	Description
item-N	—	Content of the Nth item. An item with a name uses that name instead.