Array

class marimo.ui.array(elements: Sequence[UIElement[Any, Any]], *, label: str = '', on_change: Callable[[Sequence[object]], None] | None = None)

An array of UI elements.

Use an array to

  • create a dynamic number of UI elements at runtime

  • group together logically related UI elements

  • keep the number of global variables in your program small

Access the values of the elements using the value attribute of the array (array.value).

The elements in the array can be accessed using square brackets (array[index]) and embedded in other marimo outputs. You can also iterate over the UI elements using the in operator (for element in array).

Note: The UI elements in the array are clones of the original elements: interacting with the array will not update the original elements, and vice versa.

Examples.

A heterogeneous collection of UI elements:

array = mo.ui.array([mo.ui.slider(1, 10), mo.ui.text(), mo.ui.date()])

Get the values of the slider, text, and date elements via array.value:

# array.value returns a list with the values of the elements
array.value

Access and output a UI element in the array:

mo.md(f"This is a slider: array[0]")

Some number of UI elements, determined at runtime:

mo.ui.array([mo.ui.slider(1, 10) for _ in range random.randint(4, 8)])

Attributes.

  • value: a list containing the values of the array’s entries

  • elements: a list of the wrapped elements (clones of the originals)

Initialization Args.

  • elements: the UI elements to include

  • label: a descriptive name for the array

  • on_change: optional callback to run when this element’s value changes

Public methods

hstack(**kwargs)

Stack the elements horizontally.

vstack(**kwargs)

Stack the elements vertically.
Inherited from UIElement

form([label, bordered, loading, ...])

Create a submittable form out of this UIElement.

send_message(message, buffers)

Send a message to the element rendered on the frontend from the backend.
Inherited from Html

batch(**elements)

Convert an HTML object with templated text into a UI element.

center()

Center an item.

right()

Right-justify.

left()

Left-justify.

callout([kind])

Create a callout containing this HTML element.

style(style)

Wrap an object in a styled container.

Public Data Attributes:

elements

Inherited from UIElement

value

The element’s current value.
Inherited from Html

text

A string of HTML representing this element.
hstack(**kwargs: Any) → Html

Stack the elements horizontally.

For kwargs, see marimo.hstack.

vstack(**kwargs: Any) → Html

Stack the elements vertically.

For kwargs, see marimo.vstack.