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

list.ordered has numbers to display the list items.

Example 1
Example 2
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

Lists can also be used with icons.

Allowed
Not
Settings

API Reference

rx.list.item

Display an item of an ordered or unordered list.

Prop	Type \| Values	Default
`access_key`	`str`	`-`
`auto_capitalize`	`"off" \| "none" \| ...`	`-`
`content_editable`	`Union["inherit" \| "plaintext-only", bool]`	`-`
`context_menu`	`str`	`-`
`dir`	`str`	`-`
`draggable`	`bool`	`-`
`enter_key_hint`	`"enter" \| "done" \| ...`	`-`
`hidden`	`bool`	`-`
`input_mode`	`"none" \| "text" \| ...`	`-`
`item_prop`	`str`	`-`
`lang`	`str`	`-`
`role`	`"alert" \| "alertdialog" \| ...`	`-`
`slot`	`str`	`-`
`spell_check`	`bool`	`-`
`tab_index`	`int`	`-`
`title`	`str`	`-`

Event Triggers

See the full list of default event triggers

rx.list.ordered

Display an ordered list.

Prop	Type \| Values	Default
`access_key`	`str`	`-`
`auto_capitalize`	`"off" \| "none" \| ...`	`-`
`content_editable`	`Union["inherit" \| "plaintext-only", bool]`	`-`
`context_menu`	`str`	`-`
`dir`	`str`	`-`
`draggable`	`bool`	`-`
`enter_key_hint`	`"enter" \| "done" \| ...`	`-`
`hidden`	`bool`	`-`
`input_mode`	`"none" \| "text" \| ...`	`-`
`item_prop`	`str`	`-`
`lang`	`str`	`-`
`role`	`"alert" \| "alertdialog" \| ...`	`-`
`slot`	`str`	`-`
`spell_check`	`bool`	`-`
`tab_index`	`int`	`-`
`title`	`str`	`-`
`reversed`	`bool`	`-`
`start`	`int`	`-`
`type`	`"1" \| "a" \| ...`	`-`
`list_style_type`	`"none" \| "disc" \| ...`	`-`
`items`	`Iterable`	`-`

Event Triggers

See the full list of default event triggers

rx.list.unordered

Display an unordered list.

Prop	Type \| Values	Default
`access_key`	`str`	`-`
`auto_capitalize`	`"off" \| "none" \| ...`	`-`
`content_editable`	`Union["inherit" \| "plaintext-only", bool]`	`-`
`context_menu`	`str`	`-`
`dir`	`str`	`-`
`draggable`	`bool`	`-`
`enter_key_hint`	`"enter" \| "done" \| ...`	`-`
`hidden`	`bool`	`-`
`input_mode`	`"none" \| "text" \| ...`	`-`
`item_prop`	`str`	`-`
`lang`	`str`	`-`
`role`	`"alert" \| "alertdialog" \| ...`	`-`
`slot`	`str`	`-`
`spell_check`	`bool`	`-`
`tab_index`	`int`	`-`
`title`	`str`	`-`
`list_style_type`	`"none" \| "disc" \| ...`	`-`
`items`	`Iterable`	`-`

Event Triggers

See the full list of default event triggers