Chakra-UI

I♥️Components

List

|

Chakra Docs

|

⦾ Underneath, Chakra's List component is just a wrapper around the standard HTML <ul> or <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 <ol> elements.

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:

Examples

Basic Usage

⦾ You can use the List and ListItem components to construct your list. Here's an example of a simple unordered list. In this example, we create a list of fruits. The spacing prop adds some space between each ListItem.
  • Orange
  • Apple
  • Banana

Code

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.

  • Inception
  • Interstellar
  • The Dark Knight
  • Memento

Code

Ordered Lists

⦾ Chakra UI also supports ordered lists through the List component by using the styleType prop and setting it to decimal.
  • First Task
  • Second Task
  • Third Task

Code

This is a similar implementation, but using OrderedList:

  1. Boil water
  2. Add tea leaves to teapot
  3. Pour boiled water into teapot
  4. Steep for desired time
  5. Enjoy your tea

Code

Nested Lists

⦾ In the case that you need to display hierarchical data, you can nest List components to create a multi-level list. In this example, we've created a nested list under 'Item 1' with a circular bullet point style.

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.

  • Item 1
    • Sub Item 1
    • Sub Item 2
  • Item 2
  • Item 3

Code

Decorating Lists with Icons

⦾ Lists can be enhanced with icons using the ListIcon component. Icons can help users quickly understand the context of a list item, making your lists more engaging, visually appealing, and meaningful. Here is an example using custom icons from react-icons.
  • Bike to the park
  • Finish reading a novel
  • Try out a new recipe

Code

Did you know?

Creative Idea No. 1

Interactive List Items: While lists are often used for displaying static content, they can also be interactive, with list items triggering actions when clicked. This is especially useful for navigational menus or selectable items.
In this example, we're giving each ListItem a cursor style of pointer to indicate that it's clickable. The _hover prop adds a background color when the item is hovered over, providing a visual feedback to users. Voilá, a navigation menu!

Code

Creative Idea No. 2

Multiline List Items with Icons: Chakra UI's List component supports multiline list items with icons. You could use this feature to create complex list layouts, such as a list of user profiles, where each list item shows user's avatar and their details.

  • Jane Doe

    janedoe@example.com

Code

Creative Idea No. 3

Breadcrumbs with List: The Listcomponent is a great way to create breadcrumbs, which can provide navigation aid in user interfaces. A breadcrumb can be particularly beneficial for complex interfaces with hierarchical structures.
In this example, we're using the List and ListItem components to create a breadcrumb navigation. Each ListItem is either a navigational link created using a Link component, or a divider represented by /. We use the mx prop to add horizontal margin to the dividers, and display="flex" on the List to align the items horizontally.
  • Home
  • /
  • Blog
  • /
  • Post 1

Code

copyright © 2023 IHeartComponents | evanmarie.com

created with love by the I♥️Components team using

Chakra-UIRemix

Special thanks to Stefan Bohacek / Generative Placeholders.