Learn

Components

API Reference

Onboarding

Getting Started

Tutorial

Hosting

Reflex Deploy

Self Hosting

Library

/

Datadisplay

/

List

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

list.unordered has bullet points to display the list items.

Example 1
Example 2
Example 3

rx.list.unordered(
    rx.list.item("Example 1"),
    rx.list.item("Example 2"),
    rx.list.item("Example 3"),
)

list.ordered has numbers to display the list items.

Example 1
Example 2
Example 3

rx.list.ordered(
    rx.list.item("Example 1"),
    rx.list.item("Example 2"),
    rx.list.item("Example 3"),
)

list.unordered() and list.ordered() can have no bullet points or numbers by setting the list_style_type prop to none. This is effectively the same as using the list() component.

Example 1
Example 2
Example 3

Example 1
Example 2
Example 3

rx.hstack(
    rx.list(
        rx.list.item("Example 1"),
        rx.list.item("Example 2"),
        rx.list.item("Example 3"),
    ),
    rx.list.unordered(
        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.

Allowed
Not
Settings

rx.list(
    rx.list.item(
        rx.icon("circle_check_big", color="green"),
        " Allowed",
    ),
    rx.list.item(
        rx.icon("octagon_x", color="red"),
        " Not",
    ),
    rx.list.item(
        rx.icon("settings", color="grey"), " Settings"
    ),
    list_style_type="none",
)