Reflex Logo

Intro

Gallery

Hosting

Components

New

Learn

Components

API Reference

Onboarding

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.

  1. Example 1
  2. Example 2
  3. 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",
)

Display an item of an ordered or unordered list.

Props

No component specific props

Event Triggers

No component specific event triggers

Display an ordered list.

PropTypeDescriptionValues
list_style_typeUnion

The style of the list. Default to "none".

Event Triggers

No component specific event triggers

Display an unordered list.

PropTypeDescriptionValues
list_style_typeUnion

The style of the list. Default to "none".

Event Triggers

No component specific event triggers

← IconProgress →

Did you find this useful?