Skip to content
Home

List

Info
Demos
Properties
Events

Import

import { List } from '@dnb/eufemia'

Description

List is a layout component for displaying rows of content. Use List.Container as the wrapper and List.Item.Basic, List.Item.Action, or List.Item.Accordion for each row.

  • List.Container – Provides list context (e.g. variant) and wraps items in a vertical flex layout. Pass separated to insert gap between rows so each item gets its own rounding/outline instead of sharing borders.
  • List.Item.Basic – A single row with optional icon and title props and cell children. Supports selected state, variant override, and loading states via pending (skeleton overlay) or skeleton (text placeholder).
  • List.Item.Action – Clickable row with optional icon and title props (Enter/Space support) and a chevron icon. Use chevronPosition="left" or "right" (default) to place the chevron. Supports pending to show a loading overlay and disable interaction. Use href for navigation.
  • List.Item.Accordion – Expandable row with optional icon and title props and List.Item.Accordion.Content for the expandable section. Use open for initial state, chevronPosition="left" or "right" (default) for chevron placement, and optional id for ARIA. Supports pending to disable toggling.
  • List.Cell.Start, List.Cell.Center, List.Cell.End, List.Cell.Footer – Cell slots inside Basic/Action/Accordion for start, middle, end, and additional content.
  • List.Cell.Title – Title block that can contain List.Cell.Title.Overline and List.Cell.Title.Subline. Use the nested helpers for structured header text, even though the drop-in List.Cell.Title.Overline/List.Cell.Title.Subline components still exist for backward compatibility.

All item components support Space props (top, bottom, etc.) and forward standard HTML attributes.

Relevant links

Basic usage

import { List } from '@dnb/eufemia'


render(
  <List.Container>
    <List.Item.Basic>Simple row</List.Item.Basic>


    <List.Item.Basic title="Title" icon="bell">
      <List.Cell.Start>Start</List.Cell.Start>
      <List.Cell.Center>Center</List.Cell.Center>
      <List.Cell.End>End</List.Cell.End>
    </List.Item.Basic>


    <List.Item.Basic>
      <List.Cell.Center>
        <List.Cell.Title>
          <List.Cell.Title.Overline>Overline</List.Cell.Title.Overline>
          Main title here
          <List.Cell.Title.Subline>Subline</List.Cell.Title.Subline>
        </List.Cell.Title>
      </List.Cell.Center>
    </List.Item.Basic>


    <List.Item.Action
      title="Click me"
      icon="bell"
      onClick={() => console.log('Clicked')}
    >
      <List.Cell.End>Value</List.Cell.End>
    </List.Item.Action>


    <List.Item.Action
      title="Link"
      icon="bell"
      href="https://dnb.no"
      target="_blank"
      rel="noopener noreferrer"
    >
      <List.Cell.End>Value</List.Cell.End>
    </List.Item.Action>


    <List.Item.Accordion title="Expandable" icon="bell">
      <List.Item.Accordion.Header>
        <List.Cell.End>1234</List.Cell.End>
      </List.Item.Accordion.Header>
      <List.Item.Accordion.Content>
        <P>Content when expanded.</P>
      </List.Item.Accordion.Content>
    </List.Item.Accordion>


    <List.Item.Accordion title="Without explicit header" icon="bell">
      <List.Item.Accordion.Content>
        <P>Content when expanded.</P>
      </List.Item.Accordion.Content>
    </List.Item.Accordion>
  </List.Container>
)

Loading states

  • pending – On List.Item.Basic or List.Item.Action: shows a skeleton overlay and disables pointer events. On List.Item.Action, click and keyboard are disabled (tabIndex={-1}, aria-disabled). Use while data is loading.
  • skeleton – On List.Item.Basic or List.Item.Action: applies skeleton font styling (text placeholder) without the full overlay. Use for a lighter loading indication.

Accessibility

  • List.Item.Action uses role="button" so assistive technologies announce it as a button. It is focusable (tabIndex={0}) and activates on Enter and Space. When pending is true, it is not focusable and has aria-disabled="true". You can override the role via the role prop (e.g. role="link").
  • List.Item.Accordion exposes full ARIA for expand/collapse: the header has id, aria-controls, and aria-expanded; the content region has id, aria-labelledby, aria-hidden, and aria-expanded. Pass an id prop for stable references, or leave it unset for an auto-generated id. When pending is true, the header is not focusable and has aria-disabled="true".
  • Use aria-label or other ARIA attributes on the container or items when needed for screen readers.