Lists group related items together in sequential or non-sequential order.

Structure

List renders a native HTML <ul> or <ol> element depending on the type prop, with each ListItem rendering a native <li> element. These elements are inherently recognized by assistive technology, which announces the list role along with the total item count and each item's position within it, such as "list, 3 items" and "item 2 of 3".

Hidden markers

Setting styleType to none removes the visible bullet or number by applying list-style-type: none to the list. In some browser and screen reader combinations, most notably Safari with VoiceOver, this strips the list's implicit list and listitem roles, so it's no longer announced as a list. When markers are hidden and list semantics still need to be communicated, we recommend passing an explicit role="list" to List and role="listitem" to each ListItem to restore the announcement.

On this page