<ol>elements. This means it accepts all the standard HTML props in addition to a few extras provided by Chakra, like styling props.
The List component should be used whenever you need to display an array of similar items. This could be a list of menu items in a sidebar, a list of posts on a blog, or a list of user's comments on a post.
A list in Chakra UI consists of the List component, which acts as a container for ListItem components. By default, List renders an
<ul> element, although you can also create ordered lists using
In Chakra UI, List, UnorderedList, and OrderedList are components that you can use to create lists in your UI, but each serves a different purpose and creates a different kind of list. List is a flexible base component that you can use to create either ordered or unordered lists, while UnorderedList and OrderedList are more specialized components used for explicitly creating unordered and ordered lists, respectively.
List: a base component that renders an HTML
<ul>(unordered list) element by default. This component serves as a wrapper around list items (ListItem). When you use List without specifying any specific type, you're creating an unordered list, which means the list items will be marked with bullets.
UnorderedList: a special case of the List component. It explicitly renders an HTML
<ul>element, indicating an unordered list. The list items under UnorderedList are marked with bullets by default. This is typically used when the order of list items doesn't matter.
OrderedList: another specific case of the List component. It explicitly renders an HTML
<ol>element, which represents an ordered list. This means the list items will be numbered, indicating a sequence or ranking. This is used when the order of list items is important.
The List components can be imported as follows:
You can also use the UnorderedList component to achieve the same result. The UnorderedList component is just an alias for the List component with the styleType prop set to disc.
This is a similar implementation, but using OrderedList:
In this example, we're using List components inside ListItem components to create nested lists. The styleType prop is used to control the marker style, and the paddingLeft prop is used to add a left margin to the nested list, providing a visual indication of the hierarchy.
Decorating Lists with Icons
Did you know?
Creative Idea No. 1
Creative Idea No. 2
Creative Idea No. 3