Skip to content
Home

List

Info
Demos
Properties
Events

Demos

Rows with cells like Start, Center, End, Title

This example demonstrates different cell layouts and their placement.

  • Start
    Center
    End
  • Title
    End
  • Overline
    Title
    Subline
    End

    Footer

<List.Container>
  <List.Item.Basic>
    <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 title="Title" icon={fish_medium}>
    <List.Cell.End>End</List.Cell.End>
  </List.Item.Basic>

  <List.Item.Basic>
    <List.Cell.Title>
      <List.Cell.Title.Overline>Overline</List.Cell.Title.Overline>
      Title
      <List.Cell.Title.Subline variant="description">
        Subline
      </List.Cell.Title.Subline>
    </List.Cell.Title>
    <List.Cell.End>End</List.Cell.End>
    <List.Cell.Footer
      style={{
        background: 'var(--token-color-background-neutral-subtle)',
      }}
    >
      <P>Footer</P>
    </List.Cell.Footer>
  </List.Item.Basic>
</List.Container>

Navigable item

  • Navigate to details
  • Left aligned chevron
<List.Container>
  <List.Item.Action
    icon={fish_medium}
    title="Navigate to details"
    onClick={() => console.log('Clicked')}
  >
    <List.Cell.End>
      <NumberFormat.Currency value={1234} />
    </List.Cell.End>
  </List.Item.Action>

  <List.Item.Action
    chevronPosition="left"
    title="Left aligned chevron"
    onClick={() => console.log('Clicked')}
  >
    <List.Cell.End>
      <NumberFormat.Currency value={1234} />
    </List.Cell.End>
  </List.Item.Action>
</List.Container>

Navigable item with href

Use the href property on List.Item.Action to render a native link. Use target and rel for external links (e.g. target="_blank" with rel="noopener noreferrer").

<List.Container>
  <List.Item.Action
    icon={fish_medium}
    title="Link to details"
    href="#details"
  >
    <List.Cell.End>
      <NumberFormat.Currency value={1234} />
    </List.Cell.End>
  </List.Item.Action>

  <List.Item.Action
    icon={fish_medium}
    title="External link (opens in new tab)"
    href="https://eufemia.dnb.no/"
    target="_blank"
    rel="noopener noreferrer"
  >
    <List.Cell.End>
      <NumberFormat.Currency value={5678} />
    </List.Cell.End>
  </List.Item.Action>
</List.Container>

With anchor

List items containing Anchor links.

<List.Container>
  <List.Item.Basic title={<Anchor href="#">Link to page one</Anchor>} />

  <List.Item.Basic
    icon={fish_medium}
    title={<Anchor href="#">Link with icon and end value</Anchor>}
  >
    <List.Cell.End>
      <NumberFormat.Currency value={1234} />
    </List.Cell.End>
  </List.Item.Basic>
</List.Container>

Accordion

Expandable list items using List.Item.Accordion with optional icon and title properties and List.Item.Accordion.Content for the expandable section. Use the open property to set the initial open state.

  • Opened by default

    This section is open initially.

<List.Container>
  <List.Item.Accordion icon={fish_medium} title="Accordion title">
    <List.Item.Accordion.Header>
      <List.Cell.End>
        <NumberFormat.Currency value={1234} />
      </List.Cell.End>
    </List.Item.Accordion.Header>

    <List.Item.Accordion.Content innerSpace>
      <P>Accordion content goes here.</P>
    </List.Item.Accordion.Content>
  </List.Item.Accordion>

  <List.Item.Accordion open title="Opened by default">
    <List.Item.Accordion.Content innerSpace>
      <P>This section is open initially.</P>
    </List.Item.Accordion.Content>
  </List.Item.Accordion>

  <List.Item.Accordion chevronPosition="left" title="Chevron on the left">
    <List.Item.Accordion.Header>
      <List.Cell.End>
        <NumberFormat.Currency value={1234} />
      </List.Cell.End>
    </List.Item.Accordion.Header>
    <List.Item.Accordion.Content innerSpace>
      <P>
        Use <Code>chevronPosition="left"</Code> to place the chevron on the
        left.
      </P>
    </List.Item.Accordion.Content>
  </List.Item.Accordion>
</List.Container>

With Badge

Use Badge in List.Cell.End to show status or counts.

  • In Action Item
    Badge
<List.Container>
  <List.Item.Action title="In Action Item" icon={fish_medium}>
    <List.Cell.End>
      <Badge content="Badge" />
    </List.Cell.End>
  </List.Item.Action>

  <List.Item.Accordion title="In Accordion Item" icon={fish_medium}>
    <List.Item.Accordion.Header>
      <List.Cell.End>
        <Flex.Horizontal>
          <Badge
            content={3}
            label="Notifications"
            variant="notification"
          />
          <Value.Currency value={1234} />
        </Flex.Horizontal>
      </List.Cell.End>
    </List.Item.Accordion.Header>
    <List.Item.Accordion.Content innerSpace>
      <P>Accordion content goes here.</P>
    </List.Item.Accordion.Content>
  </List.Item.Accordion>
</List.Container>

Footer with buttons

Use List.Cell.Footer to place actions such as Button in the list row.

  • Item with actions
  • Action item with footer
    Do not put interactive elements (e.g. Button) inside a footer when using List.Item.Action.

  • Do not put interactive elements (e.g. Button) inside a footer when using List.Item.Accordion.

<List.Container>
  <List.Item.Basic title="Item with actions" icon={fish_medium}>
    <List.Cell.End>
      <NumberFormat.Currency value={1234} />
    </List.Cell.End>
    <List.Cell.Footer>
      <Flex.Horizontal>
        <Button text="Save" />
        <Button variant="tertiary" text="Delete" />
      </Flex.Horizontal>
    </List.Cell.Footer>
  </List.Item.Basic>

  <List.Item.Action icon={fish_medium} title="Action item with footer">
    <List.Cell.End>
      <Value.Currency value={5678} />
    </List.Cell.End>
    <List.Cell.Footer>
      <Span>
        Do not put interactive elements (e.g. Button) inside a footer when
        using List.Item.Action.
      </Span>
    </List.Cell.Footer>
  </List.Item.Action>

  <List.Item.Accordion chevronPosition="left" title="Accordion title">
    <List.Item.Accordion.Header>
      <List.Cell.End>
        <NumberFormat.Currency value={1234} />
      </List.Cell.End>
    </List.Item.Accordion.Header>
    <List.Cell.Footer
      style={{
        background: 'var(--token-color-background-neutral-subtle)',
      }}
    >
      <P>
        Do not put interactive elements (e.g. Button) inside a footer when
        using List.Item.Accordion.
      </P>
    </List.Cell.Footer>

    <List.Item.Accordion.Content innerSpace>
      <P>Accordion content goes here.</P>
    </List.Item.Accordion.Content>
  </List.Item.Accordion>
</List.Container>

Responsive Grid Layout

Using Grid.Container with Grid.Item for a 12-column responsive grid.

  • Navigate to details
  • Navigate to details

Second Grid Item

<Grid.Container
  rowGap
  columnGap
  style={{
    marginInline: 'auto',
    maxInlineSize: 'var(--layout-medium)',
  }}
>
  <Grid.Item
    span={{
      small: 'full',
      medium: [1, 4],
      large: [5, 12],
    }}
  >
    <List.Container>
      <List.Item.Action icon={fish_medium} title="Navigate to details">
        <List.Cell.End>
          <NumberFormat.Currency value={1234} />
        </List.Cell.End>
      </List.Item.Action>

      <List.Item.Action icon={fish_medium} title="Navigate to details">
        <List.Cell.End>
          <NumberFormat.Currency value={1234} />
        </List.Cell.End>
      </List.Item.Action>
    </List.Container>
  </Grid.Item>

  <Grid.Item
    span={{
      small: 'full',
      medium: [5, 6],
      large: [1, 4],
    }}
    style={{
      display: 'gid',
      placeContent: 'center',
      textAlign: 'center',
      background: 'var(--token-color-background-neutral-subtle)',
    }}
  >
    <P>Second Grid Item</P>
  </Grid.Item>
</Grid.Container>

Separated lists

Use the separated property on List.Container to add row gap between list items.

  • Title 1
  • Title 2
<List.Container separated>
  <List.Item.Basic icon={fish_medium} title="Title 1">
    <List.Cell.End>
      <Value.Currency value={1234} />
    </List.Cell.End>
  </List.Item.Basic>

  <List.Item.Basic icon={fish_medium} title="Title 2">
    <List.Cell.End>
      <Value.Currency value={4567} />
    </List.Cell.End>
  </List.Item.Basic>
</List.Container>

Dynamic list

  • List item 1
  • List item 2
  • List item 3
const myList = [
  {
    name: 'List item 1',
    amount: 10000,
  },
  {
    name: 'List item 2',
    amount: 5000,
  },
  {
    name: 'List item 3',
    amount: 7500,
  },
]
render(
  <List.Container>
    {myList.map((account) => (
      <List.Item.Basic key={account.name} title={account.name}>
        <List.Cell.End>
          <Value.Currency value={account.amount} />
        </List.Cell.End>
      </List.Item.Basic>
    ))}
  </List.Container>
)

With DateFormat

Use DateFormat in List.Cell.Start to show dates in the list row.

  • In Basic Item
  • In Action Item
<List.Container>
  <List.Item.Basic title="In Basic Item">
    <List.Cell.Start fontSize="small">
      <DateFormat
        value={new Date('2026-02-07')}
        dateStyle="medium"
        hideCurrentYear
      />
    </List.Cell.Start>
    <List.Cell.End>
      <Value.Currency value={1234} />
    </List.Cell.End>
  </List.Item.Basic>

  <List.Item.Action>
    <List.Cell.Title>
      <List.Cell.Title.Overline>
        <DateFormat
          value={new Date('2026-02-07')}
          dateStyle="medium"
          hideCurrentYear
        />
      </List.Cell.Title.Overline>
      In Action Item
    </List.Cell.Title>
    <List.Cell.End>
      <Value.Currency value={5678} />
    </List.Cell.End>
  </List.Item.Action>

  <List.Item.Accordion>
    <List.Item.Accordion.Header>
      <List.Cell.Title>
        <List.Cell.Title.Overline>
          <DateFormat
            value={new Date('2026-02-07')}
            dateStyle="medium"
            hideCurrentYear
          />
        </List.Cell.Title.Overline>
        In Accordion Item
      </List.Cell.Title>
      <List.Cell.End>
        <Value.Currency value={1234} />
      </List.Cell.End>
    </List.Item.Accordion.Header>
    <List.Item.Accordion.Content innerSpace>
      <P>
        Use <Code>chevronPosition="left"</Code> to place the chevron on the
        left.
      </P>
    </List.Item.Accordion.Content>
  </List.Item.Accordion>
</List.Container>

With Subline

Use List.Cell.Title.Subline to add supporting text below the title. The variant="description" option uses smaller text for secondary information.

  • Item 1
  • Title
    Subline
<List.Container>
  <List.Item.Action icon={fish_medium}>
    <List.Cell.Title>
      <span>Item 1</span>
      <List.Cell.Title.Subline>
        <DateFormat
          value={new Date('2026-02-07')}
          dateStyle="medium"
          hideCurrentYear
        />
      </List.Cell.Title.Subline>
    </List.Cell.Title>
    <List.Cell.End>
      <Value.Currency value={5678} />
    </List.Cell.End>
  </List.Item.Action>

  <List.Item.Accordion icon={fish_medium}>
    <List.Item.Accordion.Header>
      <List.Cell.Title>
        <span>Item 2</span>
        <List.Cell.Title.Subline>Detail 1</List.Cell.Title.Subline>
        <List.Cell.Title.Subline variant="description">
          Detail 2
        </List.Cell.Title.Subline>
        <List.Cell.Title.Subline>
          <Flex.Horizontal rowGap="x-small">
            <Badge status="neutral" subtle content="Detail 3" />
            <Badge status="neutral" subtle content="Detail 3" />
          </Flex.Horizontal>
        </List.Cell.Title.Subline>
      </List.Cell.Title>
      <List.Cell.End>
        <Value.Currency value={5678} />
      </List.Cell.End>
    </List.Item.Accordion.Header>
    <List.Item.Accordion.Content innerSpace>
      <P>Accordion content goes here.</P>
    </List.Item.Accordion.Content>
  </List.Item.Accordion>

  <List.Item.Action title="Title" icon={fish_medium}>
    <List.Cell.End>
      <Value.Currency value={5678} />
      <List.Cell.Title.Subline variant="description">
        Subline
      </List.Cell.Title.Subline>
    </List.Cell.End>
  </List.Item.Action>
</List.Container>

With form elements

Use Field.Selection and Field.ArraySelection render prop children to compose list rows and selected state.

Place them inside List.Cell.Start to align them to the left side of the list row.

Single choice
Multiple choice
render(
  <Form.Handler
    defaultData={{
      mySelection: 'bar',
      myArraySelection: ['bar'],
      myDataPath: [
        {
          value: 'foo',
          title: 'Foo!',
          amount: 1234,
        },
        {
          value: 'bar',
          title: 'Baar!',
          amount: 5678,
        },
        {
          value: 'baz',
          title: 'Baz!',
          amount: 9999,
        },
      ],
    }}
  >
    <Flex.Stack>
      <Field.Selection
        label="Single choice"
        variant="radio"
        path="/mySelection"
        dataPath="/myDataPath"
        width="large"
      >
        {({ value: selectedValue, options = [] }) => {
          return (
            <List.Container>
              {options.map(({ value, title, amount }) => {
                return (
                  <List.Item.Basic
                    key={value}
                    selected={value === selectedValue}
                  >
                    <List.Cell.Start>
                      <Field.Option value={value} title={title} />
                    </List.Cell.Start>
                    <List.Cell.End>
                      <Value.Currency value={amount} />
                    </List.Cell.End>
                  </List.Item.Basic>
                )
              })}
            </List.Container>
          )
        }}
      </Field.Selection>

      <Field.ArraySelection
        label="Multiple choice"
        variant="checkbox"
        path="/myArraySelection"
        dataPath="/myDataPath"
        width="large"
      >
        {({ value = [], options = [] }) => {
          return (
            <List.Container>
              {options.map(({ value: optionValue, title, amount }) => {
                return (
                  <List.Item.Basic
                    key={optionValue}
                    selected={value.includes(optionValue)}
                  >
                    <List.Cell.Start>
                      <Field.Option value={optionValue} title={title} />
                    </List.Cell.Start>
                    <List.Cell.End>
                      <Value.Currency value={amount} />
                    </List.Cell.End>
                  </List.Item.Basic>
                )
              })}
            </List.Container>
          )
        }}
      </Field.ArraySelection>
    </Flex.Stack>
  </Form.Handler>
)

With avatar

Use Avatar in List.Cell.Start as the left content.

  • Alice Andersen
    A
  • Bob Berg
    B
<List.Container>
  <List.Item.Basic title="Alice Andersen">
    <List.Cell.Start>
      <Avatar size="medium">A</Avatar>
    </List.Cell.Start>
    <List.Cell.End>
      <NumberFormat.Currency value={1234} />
    </List.Cell.End>
  </List.Item.Basic>

  <List.Item.Action title="Bob Berg" onClick={() => {}}>
    <List.Cell.Start>
      <Avatar size="medium">B</Avatar>
    </List.Cell.Start>
    <List.Cell.End>
      <Value.Currency value={5678} />
    </List.Cell.End>
  </List.Item.Action>

  <List.Item.Accordion title="Carol with image">
    <List.Item.Accordion.Header>
      <List.Cell.Start>
        <Avatar size="medium">C</Avatar>
      </List.Cell.Start>
      <List.Cell.End>Value</List.Cell.End>
    </List.Item.Accordion.Header>
    <List.Item.Accordion.Content innerSpace>
      <P>Content goes here.</P>
    </List.Item.Accordion.Content>
  </List.Item.Accordion>
</List.Container>

Selected state

Provide the selected property on List.Item.Basic for selectable rows. When a checkbox or radio is nested inside the row, this also enables the full-row hit area behavior.

  • Normal row
  • Selected row
  • Another normal row
<List.Container>
  <List.Item.Basic>Normal row</List.Item.Basic>

  <List.Item.Basic selected>Selected row</List.Item.Basic>

  <List.Item.Basic>Another normal row</List.Item.Basic>
</List.Container>

With custom background color

  • Normal row
  • Custom background color (not selected)
  • Another normal row
<List.Container>
  <List.Item.Basic>Normal row</List.Item.Basic>

  <List.Item.Basic
    style={{
      ['--item-background-color' as string]: 'var(--color-mint-green-12)',
    }}
  >
    Custom background color (not selected)
  </List.Item.Basic>

  <List.Item.Basic>Another normal row</List.Item.Basic>
</List.Container>

Pending state

Use the pending property on List.Item.Basic or List.Item.Action to show a skeleton overlay. Click and keyboard are disabled while pending.

  • Pending item ...
<List.Container>
  <List.Item.Action icon={fish_medium} title="Pending item ..." pending>
    <List.Cell.End>
      <NumberFormat.Currency value={1234} />
    </List.Cell.End>
  </List.Item.Action>
</List.Container>

Progress indicator

A single list item with a circular progress indicator in List.Cell.Start.

  • Vennligst vent ...
<List.Container>
  <List.Item.Basic>
    <List.Cell.Start>
      <ProgressIndicator
        size="medium"
        showDefaultLabel
        labelDirection="horizontal"
      />
    </List.Cell.Start>
  </List.Item.Basic>
</List.Container>

Skeleton

Use the skeleton property on List.Item.Basic, List.Item.Action or List.Item.Accordion to show a skeleton overlay while content is loading.

  • Loading item…
<List.Container>
  <List.Item.Action icon={fish_medium} title="Loading item…" skeleton>
    <List.Cell.End>
      <NumberFormat.Currency value={1234} />
    </List.Cell.End>
  </List.Item.Action>
</List.Container>

Inside a Card

Use List.Card to wrap a list inside a Card with built-in styling. Add List.ScrollView for a scrollable area with a maxVisibleListItems property.

Transactions

  • Payment received
  • Transfer sent
  • Subscription
  • Refund
  • Salary
  • Groceries
<List.Card>
  <Heading size="medium">Transactions</Heading>

  <List.ScrollView maxVisibleListItems={4}>
    <List.Container>
      <List.Item.Action icon={fish_medium} title="Payment received">
        <List.Cell.End>
          <Value.Currency value={1234} />
        </List.Cell.End>
      </List.Item.Action>

      <List.Item.Action icon={fish_medium} title="Transfer sent">
        <List.Cell.End>
          <Value.Currency value={-500} />
        </List.Cell.End>
      </List.Item.Action>

      <List.Item.Action icon={fish_medium} title="Subscription">
        <List.Cell.End>
          <Value.Currency value={-99} />
        </List.Cell.End>
      </List.Item.Action>

      <List.Item.Action icon={fish_medium} title="Refund">
        <List.Cell.End>
          <Value.Currency value={250} />
        </List.Cell.End>
      </List.Item.Action>

      <List.Item.Action icon={fish_medium} title="Salary">
        <List.Cell.End>
          <Value.Currency value={45000} />
        </List.Cell.End>
      </List.Item.Action>

      <List.Item.Action icon={fish_medium} title="Groceries">
        <List.Cell.End>
          <Value.Currency value={-320} />
        </List.Cell.End>
      </List.Item.Action>
    </List.Container>
  </List.ScrollView>
</List.Card>

Inside a Card without ScrollView

List.Card also works without List.ScrollView. Side borders and redundant top/bottom borders on the first and last items are automatically removed.

  • Payment received
  • Transfer sent
  • Subscription
<List.Card innerSpace="x-small">
  <List.Container>
    <List.Item.Action
      icon={fish_medium}
      title="Payment received"
      onClick={() => {}}
    >
      <List.Cell.End>
        <Value.Currency value={1234} />
      </List.Cell.End>
    </List.Item.Action>

    <List.Item.Action
      icon={fish_medium}
      title="Transfer sent"
      onClick={() => {}}
    >
      <List.Cell.End>
        <Value.Currency value={-500} />
      </List.Cell.End>
    </List.Item.Action>

    <List.Item.Basic icon={fish_medium} title="Subscription">
      <List.Cell.End>
        <Value.Currency value={-99} />
      </List.Cell.End>
    </List.Item.Basic>
  </List.Container>
</List.Card>

With ShowMoreButton and visibleCount

Use List.ShowMoreButton to add a "Show more" / "Show less" toggle outside the list. Link it to List.Container by giving both the same id. Set visibleCount on the container to limit how many items are visible when collapsed.

Transactions

  • Payment received
  • Subscription
<Flex.Horizontal justify="space-between" align="center" bottom>
  <Heading size="medium" top={false} bottom={false}>
    Transactions
  </Heading>
  <List.ShowMoreButton id="my-limited-list" />
</Flex.Horizontal>
<List.Container id="my-limited-list" visibleCount={3}>
  <List.Item.Action icon={fish_medium} title="Payment received">
    <List.Cell.End>
      <Value.Currency value={1234} />
    </List.Cell.End>
  </List.Item.Action>
   <List.Item.Accordion
    icon={fish_medium}
    title="Transfer sent (Accordion)"
  >
    <List.Item.Accordion.Header>
      <List.Cell.End>
        <Value.Currency value={-500} />
      </List.Cell.End>
    </List.Item.Accordion.Header>
    <List.Item.Accordion.Content innerSpace>
      <P>Details about the transfer go here.</P>
    </List.Item.Accordion.Content>
  </List.Item.Accordion>
   <List.Item.Basic icon={fish_medium} title="Subscription">
    <List.Cell.End>
      <Value.Currency value={-99} />
    </List.Cell.End>
  </List.Item.Basic>
   <List.Item.Action icon={fish_medium} title="Refund">
    <List.Cell.End>
      <Value.Currency value={250} />
    </List.Cell.End>
  </List.Item.Action>
   <List.Item.Action icon={fish_medium} title="Salary">
    <List.Cell.End>
      <Value.Currency value={45000} />
    </List.Cell.End>
  </List.Item.Action>
   <List.Item.Accordion icon={fish_medium} title="Groceries (Accordion)">
    <List.Item.Accordion.Header>
      <List.Cell.End>
        <Value.Currency value={-320} />
      </List.Cell.End>
    </List.Item.Accordion.Header>
    <List.Item.Accordion.Content innerSpace>
      <P>Details about the transfer go here.</P>
    </List.Item.Accordion.Content>
  </List.Item.Accordion>
</List.Container>