DescriptionList

Displays a list of values with labels.

  • to display structured data to users, for example the sort code and account number for a bank account
  • a glossary of terms
  • as headings to display unrelated pieces of information in a single area
  • if there's only one piece of information to display - it's likely a heading would work better
  • if your list doesn't require labels - consider using the List component (ordered or unordered) instead

Live example

Storybook failed to load. Please connect to the VPN to access.

Availabile platforms

Platform

Available

Figma

v1+

Web (@ovotech/element)

v1+

App (@ovotech/element-native)

v1+


How to use it

Label

Write a short, concise description of the property listed, for example 'Account number'.

Avoid 'your' or 'my'.

Value

Just enter the data, for example for account number, '1234 5678'.

Do not repeat the label, for example 'Your account number is 1234 5678'.

Format the value in a readable and conventional. For example, phone numbers with conventional spaces, and monetary amounts with currency symbols and decimal points.


Properties

DescriptionList consists of the list wrapper and its internal items.

DescriptionList

Name

Values

Default

children

DescriptionItem[]

 

DescriptionItem

Name

Values

Default

label (required)

ReactNode

 

...

JSX.IntrinsicElements["dd"]

 


Related components