Adv UI

List

A vertical list of rows with a leading visual, text and trailing meta.
Stable
Web
iOS
Android
@advui/core
Source
Field reports12 files
Budget 2026.xlsxEdited yesterday
Site photo.jpg
JPG
JSX
<List>
  <List.Item leading={<FolderIcon />} title="Field reports" description="12 files" />
  <List.Item leading={<FileIcon />} title="Budget 2026.xlsx" description="Edited yesterday" />
  <List.Item leading={<ImageIcon />} title="Site photo.jpg" trailing="JPG" />
</List>
PropsOpen in Playground
variant
size

Installation

pnpm
pnpm add @advui/core
npm
npm install @advui/core

Usage

import { List } from '@advui/core'
import { ChevronRightIcon, UserIcon } from '@advui/icons'

<List variant="outline" divided>
  <List.Item
    leading={<UserIcon />}
    title="Account"
    description="Name, email and photo"
    trailing={<ChevronRightIcon />}
    onPress={openAccount}
  />
</List>

Examples

Basic

Field reports12 files
Budget 2026.xlsxEdited yesterday
Site photo.jpg2.4 MB
JPG

Pressable rows

Each row is one button; the last one is disabled.

Avatars and actions

Rows without `onPress` can hold their own buttons.
Aung KyawField coordinator
Online
Nwe NiData officer
Away
Hla MinProgramme manager
Online

API reference

List

PropTypeDefaultDescription
variant'plain' | 'outline''plain'`outline` puts the rows on a bordered card surface.
size'sm' | 'md' | 'lg''md'Row padding and text size. An item can set its own.
dividedbooleanfalseDraws a line between items.

List.Item

The same component as `ListItem`; see List Item for every prop: `actions`, `selected`, `selectable`, `href`, `variant`, `size` and style props.
PropTypeDefaultDescription
titleReactNode—Main line.
descriptionReactNode—Muted second line.
leadingReactNode—Icon, Avatar or image before the text. Icons are 20px and muted.
trailingReactNode—Meta text, a Badge or a chevron. Controls go in `actions` when the item has `onPress`.
actionsReactNode—Buttons beside the pressable row, which keep their own presses.
selectedboolean—Highlights the item; a pressable one is the current one (`aria-current`).
onPress(event) => void—Makes the whole row one button.
disabledbooleanfalseBlocks `onPress`.
childrenReactNode—Custom content in place of `title` and `description`.

List.ItemTitle

The styled main line, for custom `children`.

List.ItemDescription

The styled muted line, for custom `children`.

Accessibility

  • The list has the list role and each row listitem, so screen readers announce the count.
  • A row with onPress holds one button (<button> on web) named by its title, description and trailing text. Put other buttons in actions, which sit beside it.
  • A disabled row keeps focus but sets aria-disabled and ignores presses.
  • Rows are at least 44px (sm), 48px (md) or 56px (lg) tall.
Keyboard interactions
KeyAction
TabMoves between pressable rows and the controls inside rows.
Enter / SpacePresses the focused row.

Platform notes

Web
A pressable row is a <button> inside the list item.
iOS
A pressable row is one accessible button; VoiceOver reads all of its text.
Android
Same as iOS. Pressable rows show the ripple when the config has androidRipple.

Related components

List Item
Card
Avatar
Badge
Separator
Since v0.6.0Last updated Nov 2, 2026Edit this page on GitHub
PreviousDescription List
NextList Item