<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5HGSQD2L" height="0" width="0" style="display:none;visibility:hidden" title="GTM"></iframe>

List

Related items that are organized vertically.

Use List...

  • To display related items in a vertical arrangement.
  • To place a series of links inside Left Hand Navigation.
  • To describe steps, instructions, or rules.

Don't use List...

  • To present unrelated items.

The preview has been updated.

Checkmarks

Use skin="checkmark" to replace the bullets with checkmark icons.

The preview has been updated.

Minimal

Use skin="minimal" to remove the bullets from the list. This is useful for accessibility, as it allows you to use proper list semantics without visible list styling.

The preview has been updated.

Ordered List

Use <Ol> to replace the bullets with stylized numbers.

The preview has been updated.

Use <LinkList> to provide standard styling for a series of links, such as inside Left Hand Navigation.

The preview has been updated.

Icon Bullet List

Use <BulletListIcon> to set a custom icon for each item instead of a "bullet".

The preview has been updated.

Alternates

We provide alternative names to some of our List components. This is just for user convenience and we do not prefer one over another.

<List>

<Ul>

<OrderedList>

<Ol>

<ListItem>

<Li>

Accessibility

If a List has a heading, the List itself should have an aria-labelledby attribute whose value is the id of the heading.

Content

  • Don't make a list too long or cause unnecessary scrolling.
  • Keep lists uniform by keeping to single lines, double lines, or nested lists.
  • When labeling lists and list items, do not mix passive and active voices.

List Items

  • Group list items in a logical and meaningful manner.
  • Ensure they carry the same weight of importance.
  • Aim for items to be of similar length.

Design

  • Lists have no inherent font size and can use whatever font size is appropriate for the design.
  • Avoid mixing list types.

Props

Ul
This component is implemented using the <ul /> as the root element. You can utilize the native attributes supported by <ul /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
proptyperequireddescriptiondefault
skin"standard" | "checkmark" | "minimal" | nullfalse
The visual style of the list. One of: "standard", "checkmark", "minimal".
standard
Ol
This component is implemented using the <ol /> as the root element. You can utilize the native attributes supported by <ol /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
proptyperequireddescriptiondefault
skin"standard" | "checkmark" | "minimal" | "shaded" | nullfalse
The visual style of the Ordered List. One of: "standard", "checkmark", "shaded", "minimal".
standard
Li
This component is implemented using the <li /> as the root element. You can utilize the native attributes supported by <li /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
proptyperequireddescriptiondefault
selectedboolean | nullfalse
Whether the List Item is selected.
null
LinkListHeading
This component is implemented using the <h3 /> as the root element. You can utilize the native attributes supported by <h3 /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
LinkList
This component is implemented using the <ul /> as the root element. You can utilize the native attributes supported by <ul /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
Was this page useful?

Thanks for your feedback!

Feel free to include your name if you wish to have a follow up conversation.


Published: Jan 22, 2022Last updated: Sep 18, 2024