List

List is used to create ordered
and unordered lists.

Ordered lists should be used where the items have an inherent order, priority or sequence that needs to be communicated.

  • Use lists to allow a user to quickly scan information that has been categorised (by alphabetical, numerical or chronological order for example).
  • Do not display lists in a horizontal layout — they should always be vertically orientated.
  • Do not use if the list requires labes — consider using the DescriptionList component instead.

Live example

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

Availabile platforms

Platform

Available

Figma

Web (@ovotech/element)

App (@ovotech/element-native)


Properties

Ul

Name

Values

Default

showBulletsApply to Ul element to affect child Li's

true false

true


Checking for accessibility

User stories

The following user stories can be used to understand when this component should be used, and how to know when it's been implemented correctly.

  • As a screen reader user, I want to be able to know the number of list items present, and the current position of the item that I am reading.

Test steps

Use these steps to check that the list component has been implemented correctly:

  1. Turn on a screen reader.
  2. Verify that when reading list content, that the number of list items and their position, is announced.

Related components