reflex/docs/library/datadisplay/list.md

components
rx.radix.themes.list_item rx.radix.themes.ordered_list rx.radix.themes.unordered_list

import reflex as rx

List

A list is a component that is used to display a list of items, stacked vertically by default. A list which can be either ordered or unordered. It is based on the flex component and therefore inherits all of its props.

An unordered_list has bullet points to display the list items. The list_item component

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

An ordered_list has numbers to display the list items.

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

An unordered_list or an ordered_list can have no bullet points or numbers by setting the list_style_type prop to none.

rx.unordered_list(
    rx.list_item("Example 1"),
    rx.list_item("Example 2"),
    rx.list_item("Example 3"),
    list_style_type="none",
)

Lists can also be used with icons.

rx.unordered_list(
    rx.list_item(
        rx.icon("check_circle", color="green", style={"display": "inline"}), "Allowed",
    ),
    rx.list_item(
        rx.icon("x-octagon", color="red", style={"display": "inline"}), "Not",
    ),
    rx.list_item(
        rx.icon("settings", color="grey", style={"display": "inline"}), "Settings"
    ),
    list_style_type="none",
)