Skip to content
Home

ListFormat

Info
Demos
Properties

Import

import { ListFormat } from '@dnb/eufemia'

Description

A ready-to-use list formatter. Use it wherever you have to display a list of strings, numbers, or React components (JSX).

Good reasons for why we have this is to:

  • uniform the creation and formatting of lists.
  • Supports translation and localization.
  • Built on top of web standards.

The component is designed to maximum display 10-20 items. If you need to display more items than that, consider a different design, and perhaps using Pagination and/or InfinityScroller

Demos

Value

A, B, C, D, 123, Link to Eufemia's Github Repo og Text Info Text
Code Editor
<ListFormat
  value={[
    <React.Fragment>A</React.Fragment>,
    <>
      <b>B</b>
    </>,
    <>C</>,
    'D',
    123,
    <a
      target="_blank"
      href="https://github.com/dnbexperience/eufemia"
      className="dnb-anchor"
      rel="noopener noreferrer"
      key="github"
    >
      Link to Eufemia's Github Repo
    </a>,
    <>
      Text <Badge content="Info" variant="information" /> Text
    </>,
  ]}
/>

Custom format

A, B, C, D, 123, Link to Eufemia's Github Repo or Text Info Text
Code Editor
<Provider locale="en-GB">
  <ListFormat
    value={[
      <React.Fragment>A</React.Fragment>,
      <>
        <b>B</b>
      </>,
      <>C</>,
      'D',
      123,
      <a
        target="_blank"
        href="https://github.com/dnbexperience/eufemia"
        className="dnb-anchor"
        rel="noopener noreferrer"
        key="github"
      >
        Link to Eufemia's Github Repo
      </a>,
      <>
        Text <Badge content="Info" variant="information" /> Text
      </>,
    ]}
    format={{
      type: 'disjunction',
    }}
  />
</Provider>

Inline

This is before the component 123, Link to Eufemia's Github Repo og Text Info Text This is after the component

Code Editor
<P>
  This is before the component{' '}
  <ListFormat
    value={[
      123,
      <a
        target="_blank"
        href="https://github.com/dnbexperience/eufemia"
        className="dnb-anchor"
        rel="noopener noreferrer"
        key="github"
      >
        Link to Eufemia's Github Repo
      </a>,
      <>
        Text <Badge content="Info" variant="information" /> Text
      </>,
    ]}
  />{' '}
  This is after the component
</P>

List variants

Ordered List:

  1. Foo
  2. Bar
  3. Baz

Unordered List:

  • Foo
  • Bar
  • Baz
Code Editor
<P>Ordered List:</P>
<ListFormat value={['Foo', 'Bar', 'Baz']} variant="ol" />
<P>Unordered List:</P>
<ListFormat value={['Foo', 'Bar', 'Baz']} variant="ul" />

List types

Ordered List a:

  1. Foo
  2. Bar
  3. Baz

Ordered List A:

  1. Foo
  2. Bar
  3. Baz

Ordered List i:

  1. Foo
  2. Bar
  3. Baz

Ordered List I:

  1. Foo
  2. Bar
  3. Baz

Unordered List square:

  • Foo
  • Bar
  • Baz

Unordered List circle:

  • Foo
  • Bar
  • Baz
Code Editor
<P>Ordered List a:</P>
<ListFormat value={['Foo', 'Bar', 'Baz']} variant="ol" listType="a" />
<P>Ordered List A:</P>
<ListFormat value={['Foo', 'Bar', 'Baz']} variant="ol" listType="A" />
<P>Ordered List i:</P>
<ListFormat value={['Foo', 'Bar', 'Baz']} variant="ol" listType="i" />
<P>Ordered List I:</P>
<ListFormat value={['Foo', 'Bar', 'Baz']} variant="ol" listType="I" />
<P>Unordered List square:</P>
<ListFormat
  value={['Foo', 'Bar', 'Baz']}
  variant="ul"
  listType="square"
/>
<P>Unordered List circle:</P>
<ListFormat
  value={['Foo', 'Bar', 'Baz']}
  variant="ul"
  listType="circle"
/>