Learn

Components

Recipes

API Reference

Onboarding

Getting Started

Tutorial

Hosting

Reflex Deploy

Self Hosting

Library

/

Chakra

/

Datadisplay

/

List

There are three types of lists: regular lists, ordered, unordered.

The shorthand syntax used to create a list is by passing in a list of items. These items can be components or Python primitives.

Example 1
Example 2
Example 3

rx.chakra.list(
    items=["Example 1", "Example 2", "Example 3"],
    spacing=".25em",
)

The examples below have the explicit syntax of list and list_items. Regular lists are used to display a list of items. They have no bullet points or numbers and stack the list items vertically.

Example 1
Example 2
Example 3

rx.chakra.list(
    rx.chakra.list_item("Example 1"),
    rx.chakra.list_item("Example 2"),
    rx.chakra.list_item("Example 3"),
)

Unordered have bullet points to display the list items.

Example 1
Example 2
Example 3

rx.chakra.unordered_list(
    rx.chakra.list_item("Example 1"),
    rx.chakra.list_item("Example 2"),
    rx.chakra.list_item("Example 3"),
)

Ordered lists have numbers to display the list items.

Example 1
Example 2
Example 3

rx.chakra.ordered_list(
    rx.chakra.list_item("Example 1"),
    rx.chakra.list_item("Example 2"),
    rx.chakra.list_item("Example 3"),
)

Lists can also be used with icons.

Allowed
Not
Settings

rx.chakra.list(
    rx.chakra.list_item(
        rx.chakra.icon(tag="check_circle", color="green"),
        "Allowed",
    ),
    rx.chakra.list_item(
        rx.chakra.icon(tag="not_allowed", color="red"),
        "Not",
    ),
    rx.chakra.list_item(
        rx.chakra.icon(tag="settings", color="grey"),
        "Settings",
    ),
    spacing=".25em",
)