Lists

Cosmos list components organize data in ordered, unordered, and CSV formats. All of the list components from Cosmos require an array of items. They also accept a heading string that renders as h3 Text.

For more information on how to use the features and props for this component, check out the developer documentation.

UnorderedLists will render all of the items with non-ordered symbols such as bullets, hollow bullets, and square bullets. If the array of items contains nested arrays, those nested arrays will be rendered as nested lists with the appropriate symbols to match.

If you like to limit the number of items to display, pass a count to the component. If you pass an onToggleShow callback function, a Show more action will render below the list items. Utilize this function to show/hide the full list.

OrderedLists will render all of the items with ordered symbols such as numbers, letters, and roman numerals. If the array of items contains nested arrays, those nested arrays will be rendered as nested lists with the appropriate symbols to match.

If you like to limit the number of items to display, pass a count to the component. If you pass an onToggleShow callback function, a Show more action will render below the list items. Utilize this function to show/hide the full list.

CommaSeparatedLists will render items in CSV format. If the array of items contains nested arrays, all of the items will be flattened into one list. There is no show/hide capabilities with the CommaSeparatedList component.

NameTypeDefaultDescription
items*ReactNode[]List content.
classNamestringAdditional CSS classes.
countnumberNumber of list items that need to be shown.
headingstringList Heading.
onToggleShow() => voidCallback to display more/less items.
refRef<HTMLDivElement>Ref forwarded to the wrapping element.