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
Shared HTML props
Components linked to this section accept these HTML props. Component-specific additions and overrides are listed below.
Props
| Prop | Type | Description |
|---|---|---|
access_key | str | Provides a hint for generating a keyboard shortcut for the current element. |
auto_capitalize | "off""none""on""sentences""words""characters" | Controls whether and how text input is automatically capitalized as it is entered/edited by the user. |
content_editable | "inherit""plaintext-only" | Indicates whether the element's content is editable. |
context_menu | str | Defines the ID of a <menu> element which will serve as the element's context menu. |
dir | str | Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left). |
draggable | bool | Defines whether the element can be dragged. |
enter_key_hint | "enter""done""go""next""previous""search""send" | Hints what media types the media element is able to play. |
hidden | bool | Defines whether the element is hidden. |
input_mode | "none""text""tel""url""email""numeric""decimal""search" | Defines the type of the element. |
item_prop | str | Defines the name of the element for metadata purposes. |
lang | str | Defines the language used in the element. |
role | "alert""alertdialog""application""article""banner""button""cell""checkbox""columnheader""combobox""complementary""contentinfo""definition""dialog""directory""document""feed""figure""form""grid""gridcell""group""heading""img""link""list""listbox""listitem""log""main""marquee""math""menu""menubar""menuitem""menuitemcheckbox""menuitemradio""navigation""none""note""option""presentation""progressbar""radio""radiogroup""region""row""rowgroup""rowheader""scrollbar""search""searchbox""separator""slider""spinbutton""status""switch""tab""table""tablist""tabpanel""term""textbox""timer""toolbar""tooltip""tree""treegrid""treeitem" | Defines the role of the element. |
slot | str | Assigns a slot in a shadow DOM shadow tree to an element. |
spell_check | bool | Defines whether the element may be checked for spelling errors. |
tab_index | int | Defines the position of the current element in the tabbing order. |
title | str | Defines a tooltip for the element. |
rx.list.item
Display an item of an ordered or unordered list.
Props
No component specific props
Also accepts the shared HTML props.
Event Triggers
See the full list of default event triggersrx.list.ordered
Display an ordered list.
Props
| Prop | Type | Description |
|---|---|---|
reversed | bool | Reverses the order of the list. |
start | int | Specifies the start value of the first list item in an ordered list. |
type | "1""a""A""i""I" | Specifies the kind of marker to use in the list (letters or numbers). |
list_style_type | "none""disc""circle""square""none""decimal""decimal-leading-zero""lower-roman""upper-roman""lower-greek""lower-latin""upper-latin""armenian""georgian""lower-alpha""upper-alpha""hiragana""katakana" | The style of the list. Default to "none". |
items | Iterable | A list of items to add to the list. |
Also accepts the shared HTML props.
Event Triggers
See the full list of default event triggersrx.list.unordered
Display an unordered list.
Props
| Prop | Type | Description |
|---|---|---|
list_style_type | "none""disc""circle""square""none""decimal""decimal-leading-zero""lower-roman""upper-roman""lower-greek""lower-latin""upper-latin""armenian""georgian""lower-alpha""upper-alpha""hiragana""katakana" | The style of the list. Default to "none". |
items | Iterable | A list of items to add to the list. |
Also accepts the shared HTML props.