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

Unordered have bullet points to display the list items.

  • Example 1
  • Example 2
  • Example 3
rc.unordered_list(
    rc.list_item("Example 1"),
    rc.list_item("Example 2"),
    rc.list_item("Example 3"),
)

Ordered lists have numbers to display the list items.

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

Lists can also be used with icons.

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

rc.List

Display a list of items.

PropType | ValuesDefault
spacing
str
style_position
str
style_type
str

Event Triggers

See the full list of default event triggers

rc.ListItem

A single list item.

Props

No component specific props

rc.UnorderedList

An unordered list component with bullets.

PropType | ValuesDefault
spacing
str
style_position
str
style_type
str

rc.OrderedList

An ordered list component with numbers.

PropType | ValuesDefault
spacing
str
style_position
str
style_type
str