- 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
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"] |
|