# Widgets

The Ff widget library: typed wrappers of the React components in the committed dist.

## femforge\_workbench.widgets

The Ff widget library: typed wrappers of the React components in the built dist, one module per family.

Modules:

- **`accordion`** –

  The accordion: collapsible sections, one or several open at a time.
- **`badge`** –

  The badge.
- **`button`** –

  Buttons: the shadcn button and button group.
- **`card`** –

  Cards: a bordered box with header, content and footer.
- **`checkbox`** –

  The checkbox.
- **`code`** –

  The code editor: Monaco over a text value.
- **`combobox`** –

  The combobox: a searchable single choice narrowed by group toggles.
- **`dialog`** –

  Dialogs: a modal and its trigger, content, header, footer and close.
- **`dock`** –

  The dock: a dockview host rendering one server template per panel.
- **`dropdown_menu`** –

  Dropdown menus: a Radix menu and its trigger, content, items and groups.
- **`element`** –

  The Element base: a wrapper's declared parameters become React props by name, those named on\_\* events.
- **`field`** –

  Fields: a labelled control with its description and error.
- **`icon`** –

  The icon: one of the curated lucide names.
- **`input`** –

  Text inputs: uncontrolled, committing to the state on blur and Enter, named after the state key they bind.
- **`label`** –

  The label.
- **`module`** –

  The Ff client module: the built dist under serve/, its trame descriptor and the URLs of its files.
- **`plot`** –

  The plot: a plotly figure reporting restyle, relayout and click events.
- **`progress`** –

  The progress bar.
- **`scene`** –

  The scene widgets: the browser-side companion of a mirrored view.
- **`scroll_area`** –

  Scroll areas: a viewport with styled scrollbars.
- **`select`** –

  Selects: a Radix select and its trigger, value, content and items.
- **`separator`** –

  The separator.
- **`slider`** –

  The slider.
- **`switch`** –

  The switch.
- **`table`** –

  The table: a TanStack table over columns, rows and options, reporting its layout, row clicks and the selection.
- **`tabs`** –

  Tabs: a tab list and the content panes it switches.
- **`term`** –

  The terminal: an xterm fed from the server.
- **`theme`** –

  The theme switch: `.dark` on , where the Radix portals outside the layout root see it.
- **`toggle`** –

  Toggles: a pressed button and a group of them choosing one or many values.
- **`tooltip`** –

  Tooltips: a provider, a tooltip and its trigger and content.
- **`tree`** –

  The tree: collapsible items with leaf checkboxes.

Functions:

- **`asset_url`** –

  The URL of a file under the served directory.
- **`initialize`** –

  Enables the module before the first client connects.

### asset\_url

```python
asset_url(name: str) -> str
```

The URL of a file under the served directory.

### initialize

```python
initialize(server: Server) -> None
```

Enables the module before the first client connects.

### accordion

The accordion: collapsible sections, one or several open at a time.

Classes:

- **`Accordion`** –

  Sections opened one at a time (`type_` single) or several; `model` binds the open ids to a state variable.
- **`AccordionItem`** –

  One section, named by `value`.
- **`AccordionTrigger`** –

  The header that opens and closes a section.
- **`AccordionContent`** –

  The body of a section.

#### Accordion

```python
Accordion(children: object = None, *, model: str | None = None, type_: Prop[AccordionType] = None, value: Prop[str | Sequence[str]] = None, default_value: Prop[str | Sequence[str]] = None, on_value_change: Event = None, disabled: Prop[bool] = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

Sections opened one at a time (`type_` single) or several; `model` binds the open ids to a state variable.

Parameters:

- **`children`** (`object`, default: `None` ) –

  The accordion's sections.
- **`model`** (`str | None`, default: `None` ) –

  A state variable to bind the open section ids to, unless `on_value_change` is given.
- **`type_`** (`Prop[AccordionType]`, default: `None` ) –

  Whether one section opens at a time or several.
- **`value`** (`Prop[str | Sequence[str]]`, default: `None` ) –

  The open section's id, or the open ids of a multiple accordion.
- **`default_value`** (`Prop[str | Sequence[str]]`, default: `None` ) –

  The sections open at mount while `value` is unset.
- **`on_value_change`** (`Event`, default: `None` ) –

  Receives the open ids after a section opens or closes.
- **`disabled`** (`Prop[bool]`, default: `None` ) –

  Disables every section.
- **`kwargs`** (`Unpack[Shared]`, default: `{}` ) –

  Shared trame props and events, such as `classes`, `style` and `on_click`.

#### AccordionItem

```python
AccordionItem(children: object = None, *, value: Prop[str] = None, disabled: Prop[bool] = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

One section, named by `value`.

Parameters:

- **`children`** (`object`, default: `None` ) –

  The section's trigger and content.
- **`value`** (`Prop[str]`, default: `None` ) –

  The section's id.
- **`disabled`** (`Prop[bool]`, default: `None` ) –

  Disables the section.
- **`kwargs`** (`Unpack[Shared]`, default: `{}` ) –

  Shared trame props and events, such as `classes`, `style` and `on_click`.

#### AccordionTrigger

```python
AccordionTrigger(children: object = None, *, disabled: Prop[bool] = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

The header that opens and closes a section.

Parameters:

- **`children`** (`object`, default: `None` ) –

  The header's text.
- **`disabled`** (`Prop[bool]`, default: `None` ) –

  Disables the trigger.
- **`kwargs`** (`Unpack[Shared]`, default: `{}` ) –

  Shared trame props and events, such as `classes`, `style` and `on_click`.

#### AccordionContent

```python
AccordionContent(children: object = None, *, force_mount: Prop[bool] = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

The body of a section.

Parameters:

- **`children`** (`object`, default: `None` ) –

  The section's content.
- **`force_mount`** (`Prop[bool]`, default: `None` ) –

  Keeps the content mounted while the section is closed.
- **`kwargs`** (`Unpack[Shared]`, default: `{}` ) –

  Shared trame props and events, such as `classes`, `style` and `on_click`.

### badge

The badge.

Classes:

- **`Badge`** –

  A small status label.

#### Badge

```python
Badge(children: object = None, *, variant: Prop[BadgeVariant] = None, as_child: Prop[bool] = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

A small status label.

Parameters:

- **`children`** (`object`, default: `None` ) –

  The badge's text.
- **`variant`** (`Prop[BadgeVariant]`, default: `None` ) –

  The badge's style.
- **`as_child`** (`Prop[bool]`, default: `None` ) –

  Renders the child element itself, styled as the badge.
- **`kwargs`** (`Unpack[Shared]`, default: `{}` ) –

  Shared trame props and events, such as `classes`, `style` and `on_click`.

### button

Buttons: the shadcn button and button group.

Classes:

- **`Button`** –

  A button whose children are its label or icon.
- **`ButtonGroup`** –

  Buttons joined into one row or column.
- **`ButtonGroupSeparator`** –

  A separator between grouped buttons.
- **`ButtonGroupText`** –

  Text set beside grouped buttons.

#### Button

```python
Button(children: object = None, *, variant: Prop[ButtonVariant] = None, size: Prop[ButtonSize] = None, disabled: Prop[bool] = None, type_: Prop[ButtonType] = None, as_child: Prop[bool] = None, aria_label: Prop[str] = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

A button whose children are its label or icon.

Parameters:

- **`children`** (`object`, default: `None` ) –

  The button's label or icon.
- **`variant`** (`Prop[ButtonVariant]`, default: `None` ) –

  The button's style.
- **`size`** (`Prop[ButtonSize]`, default: `None` ) –

  The button's size; the icon sizes make it square.
- **`disabled`** (`Prop[bool]`, default: `None` ) –

  Disables the button.
- **`type_`** (`Prop[ButtonType]`, default: `None` ) –

  The HTML button type.
- **`as_child`** (`Prop[bool]`, default: `None` ) –

  Renders the child element itself, styled as the button.
- **`aria_label`** (`Prop[str]`, default: `None` ) –

  The accessible name, needed when the button shows only an icon.
- **`kwargs`** (`Unpack[Shared]`, default: `{}` ) –

  Shared trame props and events, such as `classes`, `style` and `on_click`.

#### ButtonGroup

```python
ButtonGroup(children: object = None, *, orientation: Prop[Orientation] = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

Buttons joined into one row or column.

Parameters:

- **`children`** (`object`, default: `None` ) –

  The grouped buttons.
- **`orientation`** (`Prop[Orientation]`, default: `None` ) –

  Whether the buttons join in a row or a column.
- **`kwargs`** (`Unpack[Shared]`, default: `{}` ) –

  Shared trame props and events, such as `classes`, `style` and `on_click`.

#### ButtonGroupSeparator

```python
ButtonGroupSeparator(*, orientation: Prop[Orientation] = None, decorative: Prop[bool] = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

A separator between grouped buttons.

Parameters:

- **`orientation`** (`Prop[Orientation]`, default: `None` ) –

  The direction the separator runs.
- **`decorative`** (`Prop[bool]`, default: `None` ) –

  Hides the separator from assistive technology.
- **`kwargs`** (`Unpack[Shared]`, default: `{}` ) –

  Shared trame props and events, such as `classes`, `style` and `on_click`.

#### ButtonGroupText

```python
ButtonGroupText(children: object = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

Text set beside grouped buttons.

### card

Cards: a bordered box with header, content and footer.

Classes:

- **`Card`** –

  A bordered box.
- **`CardHeader`** –

  The title row of a card.
- **`CardTitle`** –

  A card's title.
- **`CardDescription`** –

  A card's description.
- **`CardAction`** –

  A control set in the header's corner.
- **`CardContent`** –

  A card's body.
- **`CardFooter`** –

  A card's action row.

#### Card

```python
Card(children: object = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

A bordered box.

#### CardHeader

```python
CardHeader(children: object = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

The title row of a card.

#### CardTitle

```python
CardTitle(children: object = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

A card's title.

#### CardDescription

```python
CardDescription(children: object = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

A card's description.

#### CardAction

```python
CardAction(children: object = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

A control set in the header's corner.

#### CardContent

```python
CardContent(children: object = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

A card's body.

#### CardFooter

```python
CardFooter(children: object = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

A card's action row.

### checkbox

The checkbox.

Classes:

- **`Checkbox`** –

  A checkbox; `model` binds its checked state to a state variable.

#### Checkbox

```python
Checkbox(*, model: str | None = None, checked: Prop[bool] = None, default_checked: Prop[bool] = None, on_checked_change: Event = None, disabled: Prop[bool] = None, required: Prop[bool] = None, name: Prop[str] = None, value: Prop[str] = None, aria_label: Prop[str] = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

A checkbox; `model` binds its checked state to a state variable.

Parameters:

- **`model`** (`str | None`, default: `None` ) –

  A state variable to bind the checked state to, unless `on_checked_change` is given.
- **`checked`** (`Prop[bool]`, default: `None` ) –

  Whether the box is checked.
- **`default_checked`** (`Prop[bool]`, default: `None` ) –

  Whether the box is checked at mount while `checked` is unset.
- **`on_checked_change`** (`Event`, default: `None` ) –

  Receives the new checked state.
- **`disabled`** (`Prop[bool]`, default: `None` ) –

  Disables the checkbox.
- **`required`** (`Prop[bool]`, default: `None` ) –

  Marks the checkbox as required in a form.
- **`name`** (`Prop[str]`, default: `None` ) –

  The form field name.
- **`value`** (`Prop[str]`, default: `None` ) –

  The value a form submits while the box is checked.
- **`aria_label`** (`Prop[str]`, default: `None` ) –

  The accessible name.
- **`kwargs`** (`Unpack[Shared]`, default: `{}` ) –

  Shared trame props and events, such as `classes`, `style` and `on_click`.

### code

The code editor: Monaco over a text value.

Classes:

- **`Code`** –

  An editor over `value` in `language`; `on_change` (shared) carries the edited text.

#### Code

```python
Code(*, value: Prop[str] = None, language: Prop[str] = None, theme: Prop[str] = None, options: Prop[Mapping[str, object]] = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

An editor over `value` in `language`; `on_change` (shared) carries the edited text.

Parameters:

- **`value`** (`Prop[str]`, default: `None` ) –

  The text to edit.
- **`language`** (`Prop[str]`, default: `None` ) –

  The Monaco language that highlights the text.
- **`theme`** (`Prop[str]`, default: `None` ) –

  The Monaco theme.
- **`options`** (`Prop[Mapping[str, object]]`, default: `None` ) –

  Monaco editor options.
- **`kwargs`** (`Unpack[Shared]`, default: `{}` ) –

  Shared trame props and events, such as `classes`, `style` and `on_click`.

### combobox

The combobox: a searchable single choice narrowed by group toggles.

Classes:

- **`ComboboxItem`** –

  One option: its value, label, the groups it belongs to and an optional CSS background swatch.
- **`Combobox`** –

  A searchable select whose `filters` toggle its groups on and off and whose `compact` face shows only the swatch; `model` binds its value to a state variable.

#### ComboboxItem

Bases: `TypedDict`

One option: its value, label, the groups it belongs to and an optional CSS background swatch.

#### Combobox

```python
Combobox(*, model: str | None = None, items: Prop[Sequence[ComboboxItem]] = None, value: Prop[str] = None, on_value_change: Event = None, lead: Prop[ComboboxItem] = None, filters: Prop[Sequence[str]] = None, compact: Prop[bool] = None, placeholder: Prop[str] = None, search_placeholder: Prop[str] = None, empty_text: Prop[str] = None, disabled: Prop[bool] = None, aria_label: Prop[str] = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

A searchable select whose `filters` toggle its groups on and off and whose `compact` face shows only the swatch; `model` binds its value to a state variable.

Parameters:

- **`model`** (`str | None`, default: `None` ) –

  A state variable to bind the value to, unless `on_value_change` is given.
- **`items`** (`Prop[Sequence[ComboboxItem]]`, default: `None` ) –

  The options.
- **`value`** (`Prop[str]`, default: `None` ) –

  The chosen option's value.
- **`on_value_change`** (`Event`, default: `None` ) –

  Receives the chosen value.
- **`lead`** (`Prop[ComboboxItem]`, default: `None` ) –

  An option listed first, in a group of its own above the items.
- **`filters`** (`Prop[Sequence[str]]`, default: `None` ) –

  The group toggles that narrow the items.
- **`compact`** (`Prop[bool]`, default: `None` ) –

  Shows only the chosen option's swatch on the trigger.
- **`placeholder`** (`Prop[str]`, default: `None` ) –

  The trigger's text while nothing is chosen.
- **`search_placeholder`** (`Prop[str]`, default: `None` ) –

  The search field's placeholder.
- **`empty_text`** (`Prop[str]`, default: `None` ) –

  The text shown when no option matches the search.
- **`disabled`** (`Prop[bool]`, default: `None` ) –

  Disables the combobox.
- **`aria_label`** (`Prop[str]`, default: `None` ) –

  The accessible name.
- **`kwargs`** (`Unpack[Shared]`, default: `{}` ) –

  Shared trame props and events, such as `classes`, `style` and `on_click`.

### dialog

Dialogs: a modal and its trigger, content, header, footer and close.

Classes:

- **`Dialog`** –

  A dialog opened by its trigger or the `open_` prop.
- **`DialogTrigger`** –

  The control opening the dialog; `as_child` renders the child element itself.
- **`DialogContent`** –

  The dialog's box.
- **`DialogHeader`** –

  The title and description block.
- **`DialogFooter`** –

  The action row.
- **`DialogTitle`** –

  The dialog's title.
- **`DialogDescription`** –

  The dialog's description.
- **`DialogClose`** –

  A control closing the dialog.

#### Dialog

```python
Dialog(children: object = None, *, open_: Prop[bool] = None, default_open: Prop[bool] = None, on_open_change: Event = None, modal: Prop[bool] = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

A dialog opened by its trigger or the `open_` prop.

Parameters:

- **`children`** (`object`, default: `None` ) –

  The dialog's trigger and content.
- **`open_`** (`Prop[bool]`, default: `None` ) –

  Whether the dialog is open.
- **`default_open`** (`Prop[bool]`, default: `None` ) –

  Whether the dialog opens at mount while `open_` is unset.
- **`on_open_change`** (`Event`, default: `None` ) –

  Receives the new open state, as when Escape or the backdrop closes the dialog.
- **`modal`** (`Prop[bool]`, default: `None` ) –

  Blocks the page behind the dialog while it is open.
- **`kwargs`** (`Unpack[Shared]`, default: `{}` ) –

  Shared trame props and events, such as `classes`, `style` and `on_click`.

#### DialogTrigger

```python
DialogTrigger(children: object = None, *, as_child: Prop[bool] = None, disabled: Prop[bool] = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

The control opening the dialog; `as_child` renders the child element itself.

Parameters:

- **`children`** (`object`, default: `None` ) –

  The trigger's content.
- **`as_child`** (`Prop[bool]`, default: `None` ) –

  Renders the child element itself as the trigger.
- **`disabled`** (`Prop[bool]`, default: `None` ) –

  Disables the trigger.
- **`kwargs`** (`Unpack[Shared]`, default: `{}` ) –

  Shared trame props and events, such as `classes`, `style` and `on_click`.

#### DialogContent

```python
DialogContent(children: object = None, *, show_close_button: Prop[bool] = None, force_mount: Prop[bool] = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

The dialog's box.

Parameters:

- **`children`** (`object`, default: `None` ) –

  The dialog's header, body and footer.
- **`show_close_button`** (`Prop[bool]`, default: `None` ) –

  Shows the close button in the corner.
- **`force_mount`** (`Prop[bool]`, default: `None` ) –

  Keeps the content mounted while the dialog is closed.
- **`kwargs`** (`Unpack[Shared]`, default: `{}` ) –

  Shared trame props and events, such as `classes`, `style` and `on_click`.

#### DialogHeader

```python
DialogHeader(children: object = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

The title and description block.

#### DialogFooter

```python
DialogFooter(children: object = None, *, show_close_button: Prop[bool] = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

The action row.

Parameters:

- **`children`** (`object`, default: `None` ) –

  The dialog's actions.
- **`show_close_button`** (`Prop[bool]`, default: `None` ) –

  Adds a Close button to the row.
- **`kwargs`** (`Unpack[Shared]`, default: `{}` ) –

  Shared trame props and events, such as `classes`, `style` and `on_click`.

#### DialogTitle

```python
DialogTitle(children: object = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

The dialog's title.

#### DialogDescription

```python
DialogDescription(children: object = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

The dialog's description.

#### DialogClose

```python
DialogClose(children: object = None, *, as_child: Prop[bool] = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

A control closing the dialog.

Parameters:

- **`children`** (`object`, default: `None` ) –

  The control's content.
- **`as_child`** (`Prop[bool]`, default: `None` ) –

  Renders the child element itself as the close control.
- **`kwargs`** (`Unpack[Shared]`, default: `{}` ) –

  Shared trame props and events, such as `classes`, `style` and `on_click`.

### dock

The dock: a dockview host rendering one server template per panel.

Classes:

- **`Dock`** –

  Hosts panels whose bodies are the server templates `render_panel` names; the panel methods reach the mounted dock through its ref.

#### Dock

```python
Dock(*, render_panel: Slot | None = None, dark: Prop[bool] = None, popout_url: Prop[str] = None, floating_group_bounds: Prop[FloatingGroupBounds] = None, on_ready: Event = None, on_layout_change: Event = None, on_visibility: Event = None, on_active_panel: Event = None, on_panel_removed: Event = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

Hosts panels whose bodies are the server templates `render_panel` names; the panel methods reach the mounted dock through its ref.

Parameters:

- **`render_panel`** (`Slot | None`, default: `None` ) –

  The slot rendering a panel's body from its params.
- **`dark`** (`Prop[bool]`, default: `None` ) –

  Whether the dock paints its dark theme.
- **`popout_url`** (`Prop[str]`, default: `None` ) –

  The page a popped-out group opens in.
- **`floating_group_bounds`** (`Prop[FloatingGroupBounds]`, default: `None` ) –

  Where a floating group may move: wholly within the viewport, or keeping the given minimum width and height in view.
- **`on_ready`** (`Event`, default: `None` ) –

  Fires once the dock is mounted and can take panels.
- **`on_layout_change`** (`Event`, default: `None` ) –

  Receives the serialized layout once a burst of changes settles.
- **`on_visibility`** (`Event`, default: `None` ) –

  Receives a panel's id and whether it became visible.
- **`on_active_panel`** (`Event`, default: `None` ) –

  Receives the id of the panel that became active.
- **`on_panel_removed`** (`Event`, default: `None` ) –

  Receives the id of the panel the user closed.
- **`kwargs`** (`Unpack[Shared]`, default: `{}` ) –

  Shared trame props and events, such as `classes`, `style` and `on_click`.

Methods:

- **`add_panel`** –

  Adds a panel showing a template; an id already present is left alone.
- **`remove_panel`** –

  Removes the panel from the dock.
- **`active_panel`** –

  Activates the panel's tab.
- **`restore_layout`** –

  Replaces the arrangement with a serialized dockview layout.
- **`move_to`** –

  Moves a panel into the group of another.
- **`set_panel_title`** –

  Renames the panel's tab.
- **`maximize`** –

  Maximizes the panel's group.
- **`restore_maximized`** –

  Returns the maximized group to its place.

##### add\_panel

```python
add_panel(panel_id: str, title: str, template_name: str, **add_on: object) -> None
```

Adds a panel showing a template; an id already present is left alone.

Parameters:

- **`panel_id`** (`str`) –

  The new panel's id.
- **`title`** (`str`) –

  The tab title.
- **`template_name`** (`str`) –

  The server template the panel's body renders.
- **`add_on`** (`object`, default: `{}` ) –

  dockview's placement options, such as `position`, `inactive` and the initial size.

##### remove\_panel

```python
remove_panel(panel_id: str) -> None
```

Removes the panel from the dock.

##### active\_panel

```python
active_panel(panel_id: str) -> None
```

Activates the panel's tab.

##### restore\_layout

```python
restore_layout(layout: Layout) -> None
```

Replaces the arrangement with a serialized dockview layout.

##### move\_to

```python
move_to(panel_id: str, target_id: str) -> None
```

Moves a panel into the group of another.

##### set\_panel\_title

```python
set_panel_title(panel_id: str, title: str) -> None
```

Renames the panel's tab.

##### maximize

```python
maximize(panel_id: str) -> None
```

Maximizes the panel's group.

##### restore\_maximized

```python
restore_maximized() -> None
```

Returns the maximized group to its place.

### dropdown\_menu

Dropdown menus: a Radix menu and its trigger, content, items and groups.

Classes:

- **`DropdownMenu`** –

  A menu opened by its trigger.
- **`DropdownMenuTrigger`** –

  The control opening the menu; `as_child` renders the child element itself.
- **`DropdownMenuContent`** –

  The floating list of items.
- **`DropdownMenuItem`** –

  One item; `on_select` fires when it is chosen.
- **`DropdownMenuCheckboxItem`** –

  An item with a check mark.
- **`DropdownMenuRadioGroup`** –

  Radio items choosing one value.
- **`DropdownMenuRadioItem`** –

  One radio item.
- **`DropdownMenuLabel`** –

  A heading inside the menu.
- **`DropdownMenuSeparator`** –

  A rule between items.
- **`DropdownMenuShortcut`** –

  The key hint at an item's end.
- **`DropdownMenuGroup`** –

  Items under one label.
- **`DropdownMenuSub`** –

  A nested menu.
- **`DropdownMenuSubTrigger`** –

  The item opening a nested menu.
- **`DropdownMenuSubContent`** –

  The nested menu's list.

#### DropdownMenu

```python
DropdownMenu(children: object = None, *, open_: Prop[bool] = None, default_open: Prop[bool] = None, on_open_change: Event = None, modal: Prop[bool] = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

A menu opened by its trigger.

Parameters:

- **`children`** (`object`, default: `None` ) –

  The menu's trigger and content.
- **`open_`** (`Prop[bool]`, default: `None` ) –

  Whether the menu is open.
- **`default_open`** (`Prop[bool]`, default: `None` ) –

  Whether the menu opens at mount while `open_` is unset.
- **`on_open_change`** (`Event`, default: `None` ) –

  Receives the new open state.
- **`modal`** (`Prop[bool]`, default: `None` ) –

  Blocks the page outside the menu while it is open.
- **`kwargs`** (`Unpack[Shared]`, default: `{}` ) –

  Shared trame props and events, such as `classes`, `style` and `on_click`.

#### DropdownMenuTrigger

```python
DropdownMenuTrigger(children: object = None, *, as_child: Prop[bool] = None, disabled: Prop[bool] = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

The control opening the menu; `as_child` renders the child element itself.

Parameters:

- **`children`** (`object`, default: `None` ) –

  The trigger's content.
- **`as_child`** (`Prop[bool]`, default: `None` ) –

  Renders the child element itself as the trigger.
- **`disabled`** (`Prop[bool]`, default: `None` ) –

  Disables the trigger.
- **`kwargs`** (`Unpack[Shared]`, default: `{}` ) –

  Shared trame props and events, such as `classes`, `style` and `on_click`.

#### DropdownMenuContent

```python
DropdownMenuContent(children: object = None, *, side: Prop[Side] = None, align: Prop[Align] = None, side_offset: Prop[float] = None, align_offset: Prop[float] = None, loop: Prop[bool] = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

The floating list of items.

Parameters:

- **`children`** (`object`, default: `None` ) –

  The menu's items.
- **`side`** (`Prop[Side]`, default: `None` ) –

  The side of the trigger the list opens on.
- **`align`** (`Prop[Align]`, default: `None` ) –

  How the list aligns against the trigger.
- **`side_offset`** (`Prop[float]`, default: `None` ) –

  The gap between the trigger and the list, in pixels.
- **`align_offset`** (`Prop[float]`, default: `None` ) –

  The shift along the aligned edge, in pixels.
- **`loop`** (`Prop[bool]`, default: `None` ) –

  Whether keyboard navigation wraps from the last item to the first.
- **`kwargs`** (`Unpack[Shared]`, default: `{}` ) –

  Shared trame props and events, such as `classes`, `style` and `on_click`.

#### DropdownMenuItem

```python
DropdownMenuItem(children: object = None, *, on_select: Event = None, disabled: Prop[bool] = None, inset: Prop[bool] = None, variant: Prop[MenuItemVariant] = None, text_value: Prop[str] = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

One item; `on_select` fires when it is chosen.

Parameters:

- **`children`** (`object`, default: `None` ) –

  The item's label.
- **`on_select`** (`Event`, default: `None` ) –

  Fires when the item is chosen.
- **`disabled`** (`Prop[bool]`, default: `None` ) –

  Disables the item.
- **`inset`** (`Prop[bool]`, default: `None` ) –

  Indents the item to line up with items that carry an icon.
- **`variant`** (`Prop[MenuItemVariant]`, default: `None` ) –

  The item's style.
- **`text_value`** (`Prop[str]`, default: `None` ) –

  The text typeahead matches, for a label that is not plain text.
- **`kwargs`** (`Unpack[Shared]`, default: `{}` ) –

  Shared trame props and events, such as `classes`, `style` and `on_click`.

#### DropdownMenuCheckboxItem

```python
DropdownMenuCheckboxItem(children: object = None, *, checked: Prop[bool] = None, on_checked_change: Event = None, on_select: Event = None, disabled: Prop[bool] = None, text_value: Prop[str] = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

An item with a check mark.

Parameters:

- **`children`** (`object`, default: `None` ) –

  The item's label.
- **`checked`** (`Prop[bool]`, default: `None` ) –

  Whether the item is checked.
- **`on_checked_change`** (`Event`, default: `None` ) –

  Receives the new checked state.
- **`on_select`** (`Event`, default: `None` ) –

  Fires when the item is chosen.
- **`disabled`** (`Prop[bool]`, default: `None` ) –

  Disables the item.
- **`text_value`** (`Prop[str]`, default: `None` ) –

  The text typeahead matches, for a label that is not plain text.
- **`kwargs`** (`Unpack[Shared]`, default: `{}` ) –

  Shared trame props and events, such as `classes`, `style` and `on_click`.

#### DropdownMenuRadioGroup

```python
DropdownMenuRadioGroup(children: object = None, *, value: Prop[str] = None, on_value_change: Event = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

Radio items choosing one value.

Parameters:

- **`children`** (`object`, default: `None` ) –

  The radio items.
- **`value`** (`Prop[str]`, default: `None` ) –

  The chosen item's value.
- **`on_value_change`** (`Event`, default: `None` ) –

  Receives the chosen value.
- **`kwargs`** (`Unpack[Shared]`, default: `{}` ) –

  Shared trame props and events, such as `classes`, `style` and `on_click`.

#### DropdownMenuRadioItem

```python
DropdownMenuRadioItem(children: object = None, *, value: Prop[str] = None, disabled: Prop[bool] = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

One radio item.

Parameters:

- **`children`** (`object`, default: `None` ) –

  The item's label.
- **`value`** (`Prop[str]`, default: `None` ) –

  The value the item chooses.
- **`disabled`** (`Prop[bool]`, default: `None` ) –

  Disables the item.
- **`kwargs`** (`Unpack[Shared]`, default: `{}` ) –

  Shared trame props and events, such as `classes`, `style` and `on_click`.

#### DropdownMenuLabel

```python
DropdownMenuLabel(children: object = None, *, inset: Prop[bool] = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

A heading inside the menu.

Parameters:

- **`children`** (`object`, default: `None` ) –

  The heading's text.
- **`inset`** (`Prop[bool]`, default: `None` ) –

  Indents the heading to line up with items that carry an icon.
- **`kwargs`** (`Unpack[Shared]`, default: `{}` ) –

  Shared trame props and events, such as `classes`, `style` and `on_click`.

#### DropdownMenuSeparator

```python
DropdownMenuSeparator(**kwargs: Unpack[Shared])
```

Bases: `Element`

A rule between items.

#### DropdownMenuShortcut

```python
DropdownMenuShortcut(children: object = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

The key hint at an item's end.

#### DropdownMenuGroup

```python
DropdownMenuGroup(children: object = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

Items under one label.

#### DropdownMenuSub

```python
DropdownMenuSub(children: object = None, *, open_: Prop[bool] = None, default_open: Prop[bool] = None, on_open_change: Event = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

A nested menu.

Parameters:

- **`children`** (`object`, default: `None` ) –

  The nested menu's trigger and content.
- **`open_`** (`Prop[bool]`, default: `None` ) –

  Whether the nested menu is open.
- **`default_open`** (`Prop[bool]`, default: `None` ) –

  Whether the nested menu opens at mount while `open_` is unset.
- **`on_open_change`** (`Event`, default: `None` ) –

  Receives the new open state.
- **`kwargs`** (`Unpack[Shared]`, default: `{}` ) –

  Shared trame props and events, such as `classes`, `style` and `on_click`.

#### DropdownMenuSubTrigger

```python
DropdownMenuSubTrigger(children: object = None, *, inset: Prop[bool] = None, disabled: Prop[bool] = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

The item opening a nested menu.

Parameters:

- **`children`** (`object`, default: `None` ) –

  The item's label.
- **`inset`** (`Prop[bool]`, default: `None` ) –

  Indents the item to line up with items that carry an icon.
- **`disabled`** (`Prop[bool]`, default: `None` ) –

  Disables the item.
- **`kwargs`** (`Unpack[Shared]`, default: `{}` ) –

  Shared trame props and events, such as `classes`, `style` and `on_click`.

#### DropdownMenuSubContent

```python
DropdownMenuSubContent(children: object = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

The nested menu's list.

### element

The Element base: a wrapper's declared parameters become React props by name, those named on\_\* events.

Type Aliases:

- **`Event`** –

  An event handler, or unset.
- **`Prop`** –

  A prop: a static value, a state binding, or unset.

Classes:

- **`Shared`** –

  The trame-shared props and events a wrapper accepts beside its own.
- **`Element`** –

  A component of the Ff library: its wrapper's parameters are its props and events, trame's shared names pass through.

Functions:

- **`react_name`** –

  The React prop of a parameter: one trailing underscore stripped, then the rename map, else camelCase.
- **`is_event`** –

  Whether a parameter is an event handler: its name starts with `on_`.
- **`next_ref`** –

  A name for trame.refs, unique for the process.
- **`setter`** –

  A client-side handler writing the event payload into the state variable.

Attributes:

- **`RESERVED`** –

  Names of a wrapper's locals that are never props.
- **`MODEL`** –

  The Python-only parameter of the control wrappers: the state variable the control binds and writes client-side.
- **`RENAMES`** (`Mapping[str, str]`) –

  Parameters whose React prop is not their camelCase.
- **`SHARED`** –

  The props and events trame registers on every React element.

#### RESERVED

```python
RESERVED = frozenset({'self', 'children', 'kwargs', '__class__'})
```

Names of a wrapper's locals that are never props.

#### MODEL

```python
MODEL = 'model'
```

The Python-only parameter of the control wrappers: the state variable the control binds and writes client-side.

#### RENAMES

```python
RENAMES: Mapping[str, str] = {'aria_label': 'aria-label'}
```

Parameters whose React prop is not their camelCase.

#### SHARED

```python
SHARED = frozenset(name if isinstance(name, str) else name[0] for name in (*SHARED_PROPS, *SHARED_EVENTS))
```

The props and events trame registers on every React element.

#### Prop

```python
Prop = T | Bind | None
```

A prop: a static value, a state binding, or unset.

#### Event

```python
Event = Callback | None
```

An event handler, or unset.

#### Shared

Bases: `TypedDict`

The trame-shared props and events a wrapper accepts beside its own.

#### Element

```python
Element(tag: str, params: Mapping[str, object], children: object = None, *, rename: Mapping[str, str] = RENAMES, **kwargs: Unpack[Shared])
```

Bases: `AbstractElement`

A component of the Ff library: its wrapper's parameters are its props and events, trame's shared names pass through.

Parameters:

- **`tag`** (`str`) –

  The element's custom tag, such as `ff-button`.
- **`params`** (`Mapping[str, object]`) –

  The wrapper's locals; each declared parameter becomes a prop, or an event when named `on_*`.
- **`children`** (`object`, default: `None` ) –

  The content nested inside the element.
- **`rename`** (`Mapping[str, str]`, default: `RENAMES` ) –

  Parameters whose React prop is not their camelCase.
- **`kwargs`** (`Unpack[Shared]`, default: `{}` ) –

  Shared trame props and events, passed through as they are.

Methods:

- **`call`** –

  Calls a method of the mounted component through its ref.

Attributes:

- **`reference`** (`str`) –

  The name the client registers this element under on trame.refs; KeyError when it has none.

##### reference

```python
reference: str
```

The name the client registers this element under on trame.refs; KeyError when it has none.

##### call

```python
call(method: str, *args: object) -> None
```

Calls a method of the mounted component through its ref.

#### react\_name

```python
react_name(name: str, rename: Mapping[str, str] = RENAMES) -> str
```

The React prop of a parameter: one trailing underscore stripped, then the rename map, else camelCase.

#### is\_event

```python
is_event(name: str) -> bool
```

Whether a parameter is an event handler: its name starts with `on_`.

#### next\_ref

```python
next_ref(kind: str) -> str
```

A name for trame.refs, unique for the process.

#### setter

```python
setter(model: str, value: str = EVENT) -> Callback
```

A client-side handler writing the event payload into the state variable.

### field

Fields: a labelled control with its description and error.

Classes:

- **`Field`** –

  A control with its label, laid out along `orientation`.
- **`FieldLabel`** –

  The label of a field.
- **`FieldContent`** –

  The column holding a field's control and description.
- **`FieldDescription`** –

  Help text under a field.
- **`FieldError`** –

  The error text of a field, or the `errors` it lists.
- **`FieldGroup`** –

  A stack of fields.
- **`FieldSet`** –

  A fieldset of related fields.
- **`FieldLegend`** –

  The legend of a fieldset.
- **`FieldSeparator`** –

  A rule between fields, with optional text.
- **`FieldTitle`** –

  A title styled like a label without being one.

#### Field

```python
Field(children: object = None, *, orientation: Prop[FieldOrientation] = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

A control with its label, laid out along `orientation`.

Parameters:

- **`children`** (`object`, default: `None` ) –

  The field's label and control.
- **`orientation`** (`Prop[FieldOrientation]`, default: `None` ) –

  The direction the label and the control lay out along.
- **`kwargs`** (`Unpack[Shared]`, default: `{}` ) –

  Shared trame props and events, such as `classes`, `style` and `on_click`.

#### FieldLabel

```python
FieldLabel(children: object = None, *, html_for: Prop[str] = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

The label of a field.

Parameters:

- **`children`** (`object`, default: `None` ) –

  The label's text.
- **`html_for`** (`Prop[str]`, default: `None` ) –

  The id of the control the label names.
- **`kwargs`** (`Unpack[Shared]`, default: `{}` ) –

  Shared trame props and events, such as `classes`, `style` and `on_click`.

#### FieldContent

```python
FieldContent(children: object = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

The column holding a field's control and description.

#### FieldDescription

```python
FieldDescription(children: object = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

Help text under a field.

#### FieldError

```python
FieldError(children: object = None, *, errors: Prop[list[dict[str, str]]] = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

The error text of a field, or the `errors` it lists.

Parameters:

- **`children`** (`object`, default: `None` ) –

  The error's text.
- **`errors`** (`Prop[list[dict[str, str]]]`, default: `None` ) –

  Errors listed by their `message` when no children are given.
- **`kwargs`** (`Unpack[Shared]`, default: `{}` ) –

  Shared trame props and events, such as `classes`, `style` and `on_click`.

#### FieldGroup

```python
FieldGroup(children: object = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

A stack of fields.

#### FieldSet

```python
FieldSet(children: object = None, *, disabled: Prop[bool] = None, name: Prop[str] = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

A fieldset of related fields.

Parameters:

- **`children`** (`object`, default: `None` ) –

  The fieldset's legend and fields.
- **`disabled`** (`Prop[bool]`, default: `None` ) –

  Disables every control in the fieldset.
- **`name`** (`Prop[str]`, default: `None` ) –

  The fieldset's form name.
- **`kwargs`** (`Unpack[Shared]`, default: `{}` ) –

  Shared trame props and events, such as `classes`, `style` and `on_click`.

#### FieldLegend

```python
FieldLegend(children: object = None, *, variant: Prop[FieldLegendVariant] = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

The legend of a fieldset.

Parameters:

- **`children`** (`object`, default: `None` ) –

  The legend's text.
- **`variant`** (`Prop[FieldLegendVariant]`, default: `None` ) –

  Whether the legend reads as a legend or as a label.
- **`kwargs`** (`Unpack[Shared]`, default: `{}` ) –

  Shared trame props and events, such as `classes`, `style` and `on_click`.

#### FieldSeparator

```python
FieldSeparator(children: object = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

A rule between fields, with optional text.

#### FieldTitle

```python
FieldTitle(children: object = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

A title styled like a label without being one.

### icon

The icon: one of the curated lucide names.

Type Aliases:

- **`IconName`** –

  The names in the dist's icons.json.

Classes:

- **`Icon`** –

  A lucide icon; an unknown name draws circle-help with a console warning.

#### IconName

```python
IconName = Literal['app-window', 'box', 'check', 'chevron-down', 'chevron-right', 'circle-help', 'columns-3', 'copy', 'external-link', 'eye', 'eye-off', 'file', 'filter', 'folder', 'grip-vertical', 'layout-grid', 'maximize-2', 'minimize-2', 'minus', 'picture-in-picture-2', 'play', 'plus', 'refresh-cw', 'search', 'settings', 'sliders-horizontal', 'square', 'terminal', 'trash-2', 'x']
```

The names in the dist's icons.json.

#### Icon

```python
Icon(name: IconName, *, size: Prop[float] = None, color: Prop[str] = None, stroke_width: Prop[float] = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

A lucide icon; an unknown name draws circle-help with a console warning.

Parameters:

- **`name`** (`IconName`) –

  The lucide icon's name.
- **`size`** (`Prop[float]`, default: `None` ) –

  The icon's width and height, in pixels.
- **`color`** (`Prop[str]`, default: `None` ) –

  The stroke colour; the text colour by default.
- **`stroke_width`** (`Prop[float]`, default: `None` ) –

  The stroke width, in pixels.
- **`kwargs`** (`Unpack[Shared]`, default: `{}` ) –

  Shared trame props and events, such as `classes`, `style` and `on_click`.

### input

Text inputs: uncontrolled, committing to the state on blur and Enter, named after the state key they bind.

Classes:

- **`Input`** –

  A text input seeded from `model` and writing it back on blur and Enter; a controlled value would drop keystrokes on the round trip.
- **`Textarea`** –

  A multi-line input seeded from `model` and writing it back on blur.
- **`InputGroup`** –

  An input with addons on its sides.
- **`InputGroupAddon`** –

  An addon of an input group, aligned to one side.
- **`InputGroupText`** –

  Text inside an input group addon.
- **`InputGroupInput`** –

  The input of an input group, with the same commit rule as Input.
- **`ColorInput`** –

  A native color picker writing its hex value to `model` on every change; controlled, since a pick sends whole values, not keystrokes.

Functions:

- **`committing`** –

  A key handler writing the input text into the state variable on Enter.

#### Input

```python
Input(*, model: str | None = None, default_value: Prop[str] = None, placeholder: Prop[str] = None, type_: Prop[str] = None, name: str | None = None, disabled: Prop[bool] = None, read_only: Prop[bool] = None, min_: Prop[float] = None, max_: Prop[float] = None, step: Prop[float] = None, aria_label: Prop[str] = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

A text input seeded from `model` and writing it back on blur and Enter; a controlled value would drop keystrokes on the round trip.

Parameters:

- **`model`** (`str | None`, default: `None` ) –

  A state variable that seeds the text and takes it back on blur and Enter; it also names the input.
- **`default_value`** (`Prop[str]`, default: `None` ) –

  The text at mount.
- **`placeholder`** (`Prop[str]`, default: `None` ) –

  The text shown while the input is empty.
- **`type_`** (`Prop[str]`, default: `None` ) –

  The HTML input type.
- **`name`** (`str | None`, default: `None` ) –

  The form field name; `model` by default.
- **`disabled`** (`Prop[bool]`, default: `None` ) –

  Disables the input.
- **`read_only`** (`Prop[bool]`, default: `None` ) –

  Makes the text read-only.
- **`min_`** (`Prop[float]`, default: `None` ) –

  The smallest value of a number input.
- **`max_`** (`Prop[float]`, default: `None` ) –

  The largest value of a number input.
- **`step`** (`Prop[float]`, default: `None` ) –

  The step of a number input.
- **`aria_label`** (`Prop[str]`, default: `None` ) –

  The accessible name.
- **`kwargs`** (`Unpack[Shared]`, default: `{}` ) –

  Shared trame props and events, such as `classes`, `style` and `on_click`.

#### Textarea

```python
Textarea(*, model: str | None = None, default_value: Prop[str] = None, placeholder: Prop[str] = None, rows: Prop[int] = None, name: str | None = None, disabled: Prop[bool] = None, read_only: Prop[bool] = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

A multi-line input seeded from `model` and writing it back on blur.

Parameters:

- **`model`** (`str | None`, default: `None` ) –

  A state variable that seeds the text and takes it back on blur; it also names the textarea.
- **`default_value`** (`Prop[str]`, default: `None` ) –

  The text at mount.
- **`placeholder`** (`Prop[str]`, default: `None` ) –

  The text shown while the textarea is empty.
- **`rows`** (`Prop[int]`, default: `None` ) –

  The visible line count.
- **`name`** (`str | None`, default: `None` ) –

  The form field name; `model` by default.
- **`disabled`** (`Prop[bool]`, default: `None` ) –

  Disables the textarea.
- **`read_only`** (`Prop[bool]`, default: `None` ) –

  Makes the text read-only.
- **`kwargs`** (`Unpack[Shared]`, default: `{}` ) –

  Shared trame props and events, such as `classes`, `style` and `on_click`.

#### InputGroup

```python
InputGroup(children: object = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

An input with addons on its sides.

#### InputGroupAddon

```python
InputGroupAddon(children: object = None, *, align: Prop[AddonAlign] = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

An addon of an input group, aligned to one side.

Parameters:

- **`children`** (`object`, default: `None` ) –

  The addon's text, icon or button.
- **`align`** (`Prop[AddonAlign]`, default: `None` ) –

  The side of the input the addon sits on.
- **`kwargs`** (`Unpack[Shared]`, default: `{}` ) –

  Shared trame props and events, such as `classes`, `style` and `on_click`.

#### InputGroupText

```python
InputGroupText(children: object = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

Text inside an input group addon.

#### InputGroupInput

```python
InputGroupInput(*, model: str | None = None, default_value: Prop[str] = None, placeholder: Prop[str] = None, type_: Prop[str] = None, name: str | None = None, disabled: Prop[bool] = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

The input of an input group, with the same commit rule as Input.

Parameters:

- **`model`** (`str | None`, default: `None` ) –

  A state variable that seeds the text and takes it back on blur and Enter; it also names the input.
- **`default_value`** (`Prop[str]`, default: `None` ) –

  The text at mount.
- **`placeholder`** (`Prop[str]`, default: `None` ) –

  The text shown while the input is empty.
- **`type_`** (`Prop[str]`, default: `None` ) –

  The HTML input type.
- **`name`** (`str | None`, default: `None` ) –

  The form field name; `model` by default.
- **`disabled`** (`Prop[bool]`, default: `None` ) –

  Disables the input.
- **`kwargs`** (`Unpack[Shared]`, default: `{}` ) –

  Shared trame props and events, such as `classes`, `style` and `on_click`.

#### ColorInput

```python
ColorInput(*, model: str | None = None, value: Prop[str] = None, disabled: Prop[bool] = None, aria_label: Prop[str] = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

A native color picker writing its hex value to `model` on every change; controlled, since a pick sends whole values, not keystrokes.

Parameters:

- **`model`** (`str | None`, default: `None` ) –

  A state variable bound to the colour and written on every change.
- **`value`** (`Prop[str]`, default: `None` ) –

  The colour as `#rrggbb`.
- **`disabled`** (`Prop[bool]`, default: `None` ) –

  Disables the picker.
- **`aria_label`** (`Prop[str]`, default: `None` ) –

  The accessible name.
- **`kwargs`** (`Unpack[Shared]`, default: `{}` ) –

  Shared trame props and events, such as `classes`, `style` and `on_click`.

#### committing

```python
committing(model: str) -> Callback
```

A key handler writing the input text into the state variable on Enter.

### label

The label.

Classes:

- **`Label`** –

  A label for the control `html_for` names.

#### Label

```python
Label(children: object = None, *, html_for: Prop[str] = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

A label for the control `html_for` names.

Parameters:

- **`children`** (`object`, default: `None` ) –

  The label's text.
- **`html_for`** (`Prop[str]`, default: `None` ) –

  The id of the control the label names.
- **`kwargs`** (`Unpack[Shared]`, default: `{}` ) –

  Shared trame props and events, such as `classes`, `style` and `on_click`.

### module

The Ff client module: the built dist under serve/, its trame descriptor and the URLs of its files.

Classes:

- **`VersionKey`** –

  The fields of version.json.

Functions:

- **`version`** –

  The dist's version.json: the source hash and the bundle and stylesheet names.
- **`asset_url`** –

  The URL of a file under the served directory.
- **`served`** –

  The route-relative URL of a built file with the source hash as its cache buster.
- **`assets`** –

  The absolute URLs of the bundle and the stylesheet as the page loads them.
- **`descriptor`** –

  The trame module: the served directory, the bundle and stylesheet to load, and the global to install.
- **`initialize`** –

  Enables the module before the first client connects.

Attributes:

- **`LIBRARY`** –

  The window global whose install(registerTag) registers the tags.

#### LIBRARY

```python
LIBRARY = 'Ff'
```

The window global whose install(registerTag) registers the tags.

#### VersionKey

Bases: `StrEnum`

The fields of version.json.

#### version

```python
version() -> dict[str, str]
```

The dist's version.json: the source hash and the bundle and stylesheet names.

#### asset\_url

```python
asset_url(name: str) -> str
```

The URL of a file under the served directory.

#### served

```python
served(name: str) -> str
```

The route-relative URL of a built file with the source hash as its cache buster.

#### assets

```python
assets() -> list[str]
```

The absolute URLs of the bundle and the stylesheet as the page loads them.

#### descriptor

```python
descriptor() -> dict[str, object]
```

The trame module: the served directory, the bundle and stylesheet to load, and the global to install.

#### initialize

```python
initialize(server: Server) -> None
```

Enables the module before the first client connects.

### plot

The plot: a plotly figure reporting restyle, relayout and click events.

Classes:

- **`Plot`** –

  A figure whose `figure` holds data, layout and config; `on_click` (shared) carries the picked points.

#### Plot

```python
Plot(*, figure: Prop[Mapping[str, object]] = None, on_restyle: Event = None, on_relayout: Event = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

A figure whose `figure` holds data, layout and config; `on_click` (shared) carries the picked points.

Parameters:

- **`figure`** (`Prop[Mapping[str, object]]`, default: `None` ) –

  The plotly figure as JSON: data, layout and config.
- **`on_restyle`** (`Event`, default: `None` ) –

  Receives `[update, trace_indices]` after a trace changed, as when the legend toggles one.
- **`on_relayout`** (`Event`, default: `None` ) –

  Receives the changed layout keys after a zoom, a pan or a resize.
- **`kwargs`** (`Unpack[Shared]`, default: `{}` ) –

  Shared trame props and events, such as `classes`, `style` and `on_click`.

### progress

The progress bar.

Classes:

- **`Progress`** –

  A determinate bar filled to `value` out of `max_`.

#### Progress

```python
Progress(*, value: Prop[float] = None, max_: Prop[float] = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

A determinate bar filled to `value` out of `max_`.

Parameters:

- **`value`** (`Prop[float]`, default: `None` ) –

  How far the bar is filled.
- **`max_`** (`Prop[float]`, default: `None` ) –

  The value of a full bar.
- **`kwargs`** (`Unpack[Shared]`, default: `{}` ) –

  Shared trame props and events, such as `classes`, `style` and `on_click`.

### scene

The scene widgets: the browser-side companion of a mirrored view.

Classes:

- **`SceneSync`** –

  Turns the mirror's triad with its camera in the browser and reports the canvas size in device pixels through `on_resize`.

#### SceneSync

```python
SceneSync(*, view_ref: Prop[str] = None, camera_id: Prop[int] = None, matrix_id: Prop[int] = None, on_resize: Event = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

Turns the mirror's triad with its camera in the browser and reports the canvas size in device pixels through `on_resize`.

Parameters:

- **`view_ref`** (`Prop[str]`, default: `None` ) –

  The trame ref of the mirrored view whose camera turns the triad and whose canvas is measured.
- **`camera_id`** (`Prop[int]`, default: `None` ) –

  The wasm id of the main renderer's camera.
- **`matrix_id`** (`Prop[int]`, default: `None` ) –

  The wasm id of the matrix the triad's actor carries.
- **`on_resize`** (`Event`, default: `None` ) –

  Receives the canvas's width, height and pixel ratio whenever they change.
- **`kwargs`** (`Unpack[Shared]`, default: `{}` ) –

  Shared trame props and events, such as `classes`, `style` and `on_click`.

### scroll\_area

Scroll areas: a viewport with styled scrollbars.

Classes:

- **`ScrollArea`** –

  A scrolling viewport; `type_` says when its bars show.
- **`ScrollBar`** –

  A scrollbar of the area along `orientation`.

#### ScrollArea

```python
ScrollArea(children: object = None, *, type_: Prop[ScrollAreaType] = None, scroll_hide_delay: Prop[float] = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

A scrolling viewport; `type_` says when its bars show.

Parameters:

- **`children`** (`object`, default: `None` ) –

  The scrolled content.
- **`type_`** (`Prop[ScrollAreaType]`, default: `None` ) –

  When the scrollbars show.
- **`scroll_hide_delay`** (`Prop[float]`, default: `None` ) –

  How long the scrollbars stay after scrolling stops, in milliseconds.
- **`kwargs`** (`Unpack[Shared]`, default: `{}` ) –

  Shared trame props and events, such as `classes`, `style` and `on_click`.

#### ScrollBar

```python
ScrollBar(*, orientation: Prop[Orientation] = None, force_mount: Prop[bool] = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

A scrollbar of the area along `orientation`.

Parameters:

- **`orientation`** (`Prop[Orientation]`, default: `None` ) –

  The direction the bar scrolls.
- **`force_mount`** (`Prop[bool]`, default: `None` ) –

  Keeps the bar mounted while it is hidden.
- **`kwargs`** (`Unpack[Shared]`, default: `{}` ) –

  Shared trame props and events, such as `classes`, `style` and `on_click`.

### select

Selects: a Radix select and its trigger, value, content and items.

Classes:

- **`Select`** –

  A single-choice select; `model` binds its value to a state variable.
- **`SelectTrigger`** –

  The button showing the chosen value.
- **`SelectValue`** –

  The chosen value inside the trigger, or `placeholder` while none is.
- **`SelectContent`** –

  The dropdown holding the items.
- **`SelectItem`** –

  One option; `children` is its label.
- **`SelectGroup`** –

  Items under one label.
- **`SelectLabel`** –

  The label of a group.
- **`SelectSeparator`** –

  A rule between items.

#### Select

```python
Select(children: object = None, *, model: str | None = None, value: Prop[str] = None, default_value: Prop[str] = None, on_value_change: Event = None, open_: Prop[bool] = None, default_open: Prop[bool] = None, on_open_change: Event = None, disabled: Prop[bool] = None, required: Prop[bool] = None, name: Prop[str] = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

A single-choice select; `model` binds its value to a state variable.

Parameters:

- **`children`** (`object`, default: `None` ) –

  The select's trigger and content.
- **`model`** (`str | None`, default: `None` ) –

  A state variable to bind the value to, unless `on_value_change` is given.
- **`value`** (`Prop[str]`, default: `None` ) –

  The chosen item's value.
- **`default_value`** (`Prop[str]`, default: `None` ) –

  The value at mount while `value` is unset.
- **`on_value_change`** (`Event`, default: `None` ) –

  Receives the chosen value.
- **`open_`** (`Prop[bool]`, default: `None` ) –

  Whether the dropdown is open.
- **`default_open`** (`Prop[bool]`, default: `None` ) –

  Whether the dropdown opens at mount while `open_` is unset.
- **`on_open_change`** (`Event`, default: `None` ) –

  Receives the new open state.
- **`disabled`** (`Prop[bool]`, default: `None` ) –

  Disables the select.
- **`required`** (`Prop[bool]`, default: `None` ) –

  Marks the select as required in a form.
- **`name`** (`Prop[str]`, default: `None` ) –

  The form field name.
- **`kwargs`** (`Unpack[Shared]`, default: `{}` ) –

  Shared trame props and events, such as `classes`, `style` and `on_click`.

#### SelectTrigger

```python
SelectTrigger(children: object = None, *, size: Prop[SelectTriggerSize] = None, disabled: Prop[bool] = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

The button showing the chosen value.

Parameters:

- **`children`** (`object`, default: `None` ) –

  The trigger's content, usually a SelectValue.
- **`size`** (`Prop[SelectTriggerSize]`, default: `None` ) –

  The trigger's height.
- **`disabled`** (`Prop[bool]`, default: `None` ) –

  Disables the trigger.
- **`kwargs`** (`Unpack[Shared]`, default: `{}` ) –

  Shared trame props and events, such as `classes`, `style` and `on_click`.

#### SelectValue

```python
SelectValue(*, placeholder: Prop[str] = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

The chosen value inside the trigger, or `placeholder` while none is.

#### SelectContent

```python
SelectContent(children: object = None, *, position: Prop[SelectPosition] = None, side: Prop[Side] = None, align: Prop[Align] = None, side_offset: Prop[float] = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

The dropdown holding the items.

Parameters:

- **`children`** (`object`, default: `None` ) –

  The select's items.
- **`position`** (`Prop[SelectPosition]`, default: `None` ) –

  Whether the list sits over the chosen item or floats beside the trigger.
- **`side`** (`Prop[Side]`, default: `None` ) –

  The side of the trigger the list opens on, in popper position.
- **`align`** (`Prop[Align]`, default: `None` ) –

  How the list aligns against the trigger, in popper position.
- **`side_offset`** (`Prop[float]`, default: `None` ) –

  The gap between the trigger and the list in pixels, in popper position.
- **`kwargs`** (`Unpack[Shared]`, default: `{}` ) –

  Shared trame props and events, such as `classes`, `style` and `on_click`.

#### SelectItem

```python
SelectItem(children: object = None, *, value: Prop[str] = None, disabled: Prop[bool] = None, text_value: Prop[str] = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

One option; `children` is its label.

Parameters:

- **`children`** (`object`, default: `None` ) –

  The option's label.
- **`value`** (`Prop[str]`, default: `None` ) –

  The value the option chooses.
- **`disabled`** (`Prop[bool]`, default: `None` ) –

  Disables the option.
- **`text_value`** (`Prop[str]`, default: `None` ) –

  The text typeahead matches, for a label that is not plain text.
- **`kwargs`** (`Unpack[Shared]`, default: `{}` ) –

  Shared trame props and events, such as `classes`, `style` and `on_click`.

#### SelectGroup

```python
SelectGroup(children: object = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

Items under one label.

#### SelectLabel

```python
SelectLabel(children: object = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

The label of a group.

#### SelectSeparator

```python
SelectSeparator(**kwargs: Unpack[Shared])
```

Bases: `Element`

A rule between items.

### separator

The separator.

Classes:

- **`Separator`** –

  A rule between content.

#### Separator

```python
Separator(*, orientation: Prop[Orientation] = None, decorative: Prop[bool] = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

A rule between content.

Parameters:

- **`orientation`** (`Prop[Orientation]`, default: `None` ) –

  The direction the rule runs.
- **`decorative`** (`Prop[bool]`, default: `None` ) –

  Hides the rule from assistive technology.
- **`kwargs`** (`Unpack[Shared]`, default: `{}` ) –

  Shared trame props and events, such as `classes`, `style` and `on_click`.

### slider

The slider.

Classes:

- **`Slider`** –

  A one- or two-thumb slider over a list of values, its thumbs named after `aria_label`; `model` binds the values to a state variable.

#### Slider

```python
Slider(*, model: str | None = None, value: Prop[Sequence[float]] = None, default_value: Prop[Sequence[float]] = None, on_value_change: Event = None, on_value_commit: Event = None, min_: Prop[float] = None, max_: Prop[float] = None, step: Prop[float] = None, min_steps_between_thumbs: Prop[int] = None, orientation: Prop[Orientation] = None, inverted: Prop[bool] = None, disabled: Prop[bool] = None, aria_label: Prop[str] = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

A one- or two-thumb slider over a list of values, its thumbs named after `aria_label`; `model` binds the values to a state variable.

Parameters:

- **`model`** (`str | None`, default: `None` ) –

  A state variable to bind the values to, unless `on_value_change` is given.
- **`value`** (`Prop[Sequence[float]]`, default: `None` ) –

  The thumb values, one per thumb.
- **`default_value`** (`Prop[Sequence[float]]`, default: `None` ) –

  The thumb values at mount while `value` is unset.
- **`on_value_change`** (`Event`, default: `None` ) –

  Receives the thumb values while a thumb moves.
- **`on_value_commit`** (`Event`, default: `None` ) –

  Receives the thumb values when a thumb is released.
- **`min_`** (`Prop[float]`, default: `None` ) –

  The low end of the range.
- **`max_`** (`Prop[float]`, default: `None` ) –

  The high end of the range.
- **`step`** (`Prop[float]`, default: `None` ) –

  The step between values.
- **`min_steps_between_thumbs`** (`Prop[int]`, default: `None` ) –

  The fewest steps two thumbs keep between them.
- **`orientation`** (`Prop[Orientation]`, default: `None` ) –

  The direction the slider runs.
- **`inverted`** (`Prop[bool]`, default: `None` ) –

  Runs the range from high to low.
- **`disabled`** (`Prop[bool]`, default: `None` ) –

  Disables the slider.
- **`aria_label`** (`Prop[str]`, default: `None` ) –

  The accessible name the thumbs are named after.
- **`kwargs`** (`Unpack[Shared]`, default: `{}` ) –

  Shared trame props and events, such as `classes`, `style` and `on_click`.

### switch

The switch.

Classes:

- **`Switch`** –

  An on/off switch; `model` binds its checked state to a state variable.

#### Switch

```python
Switch(*, model: str | None = None, checked: Prop[bool] = None, default_checked: Prop[bool] = None, on_checked_change: Event = None, size: Prop[SwitchSize] = None, disabled: Prop[bool] = None, name: Prop[str] = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

An on/off switch; `model` binds its checked state to a state variable.

Parameters:

- **`model`** (`str | None`, default: `None` ) –

  A state variable to bind the checked state to, unless `on_checked_change` is given.
- **`checked`** (`Prop[bool]`, default: `None` ) –

  Whether the switch is on.
- **`default_checked`** (`Prop[bool]`, default: `None` ) –

  Whether the switch is on at mount while `checked` is unset.
- **`on_checked_change`** (`Event`, default: `None` ) –

  Receives the new checked state.
- **`size`** (`Prop[SwitchSize]`, default: `None` ) –

  The switch's size.
- **`disabled`** (`Prop[bool]`, default: `None` ) –

  Disables the switch.
- **`name`** (`Prop[str]`, default: `None` ) –

  The form field name.
- **`kwargs`** (`Unpack[Shared]`, default: `{}` ) –

  Shared trame props and events, such as `classes`, `style` and `on_click`.

### table

The table: a TanStack table over columns, rows and options, reporting its layout, row clicks and the selection.

Type Aliases:

- **`Selectable`** –

  Whether the user selects no rows, one or several.

Classes:

- **`ColumnSpec`** –

  One column: its row field, header title, whether it sorts and filters as a number, how its header facets, and its width.
- **`LayoutDefaults`** –

  The authored layout a missing document and Reset fall back to; the keys are the document's.
- **`TableOptions`** –

  The table options; the keys are the React prop's fields.
- **`Table`** –

  Columns over rows; `options` carries the persisted layout, the authored defaults and the switches.

#### Selectable

```python
Selectable = Literal['multiple', 'none', 'single']
```

Whether the user selects no rows, one or several.

#### ColumnSpec

Bases: `TypedDict`

One column: its row field, header title, whether it sorts and filters as a number, how its header facets, and its width.

#### LayoutDefaults

Bases: `TypedDict`

The authored layout a missing document and Reset fall back to; the keys are the document's.

#### TableOptions

Bases: `TypedDict`

The table options; the keys are the React prop's fields.

#### Table

```python
Table(*, columns: Prop[Sequence[ColumnSpec]] = None, rows: Prop[Sequence[Row]] = None, options: Prop[TableOptions] = None, on_layout_change: Event = None, on_row_click: Event = None, on_selection_change: Event = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

Columns over rows; `options` carries the persisted layout, the authored defaults and the switches.

Parameters:

- **`columns`** (`Prop[Sequence[ColumnSpec]]`, default: `None` ) –

  The column specs, in the order sent.
- **`rows`** (`Prop[Sequence[Row]]`, default: `None` ) –

  The data rows.
- **`options`** (`Prop[TableOptions]`, default: `None` ) –

  The persisted layout, the authored defaults and the switches.
- **`on_layout_change`** (`Event`, default: `None` ) –

  Receives the layout document once a burst of the user's changes settles.
- **`on_row_click`** (`Event`, default: `None` ) –

  Receives a clicked data row.
- **`on_selection_change`** (`Event`, default: `None` ) –

  Receives the selection, its rows under `rows`.
- **`kwargs`** (`Unpack[Shared]`, default: `{}` ) –

  Shared trame props and events, such as `classes`, `style` and `on_click`.

Methods:

- **`restore`** –

  Applies a layout document, or the authored defaults for None.
- **`reset_layout`** –

  Returns to the authored defaults.
- **`scroll_to_end`** –

  Scrolls to the last row.
- **`scroll_to_row`** –

  Scrolls a row of the shown row model into view.
- **`open_config`** –

  Shows, or hides, the column configuration panel.

##### restore

```python
restore(layout: Layout | None) -> None
```

Applies a layout document, or the authored defaults for None.

##### reset\_layout

```python
reset_layout() -> None
```

Returns to the authored defaults.

##### scroll\_to\_end

```python
scroll_to_end() -> None
```

Scrolls to the last row.

##### scroll\_to\_row

```python
scroll_to_row(index: int) -> None
```

Scrolls a row of the shown row model into view.

##### open\_config

```python
open_config(open: bool = True) -> None
```

Shows, or hides, the column configuration panel.

### tabs

Tabs: a tab list and the content panes it switches.

Classes:

- **`Tabs`** –

  Tabbed panes; `model` binds the active tab to a state variable.
- **`TabsList`** –

  The row of tab triggers.
- **`TabsTrigger`** –

  The tab selecting `value`.
- **`TabsContent`** –

  The pane shown while `value` is the active tab.

#### Tabs

```python
Tabs(children: object = None, *, model: str | None = None, value: Prop[str] = None, default_value: Prop[str] = None, on_value_change: Event = None, orientation: Prop[Orientation] = None, activation_mode: Prop[ActivationMode] = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

Tabbed panes; `model` binds the active tab to a state variable.

Parameters:

- **`children`** (`object`, default: `None` ) –

  The tab list and the panes.
- **`model`** (`str | None`, default: `None` ) –

  A state variable to bind the active tab to, unless `on_value_change` is given.
- **`value`** (`Prop[str]`, default: `None` ) –

  The active tab's value.
- **`default_value`** (`Prop[str]`, default: `None` ) –

  The active tab at mount while `value` is unset.
- **`on_value_change`** (`Event`, default: `None` ) –

  Receives the newly active tab's value.
- **`orientation`** (`Prop[Orientation]`, default: `None` ) –

  The direction the tab list runs.
- **`activation_mode`** (`Prop[ActivationMode]`, default: `None` ) –

  Whether an arrow key activates a tab or only focuses it.
- **`kwargs`** (`Unpack[Shared]`, default: `{}` ) –

  Shared trame props and events, such as `classes`, `style` and `on_click`.

#### TabsList

```python
TabsList(children: object = None, *, variant: Prop[TabsListVariant] = None, loop: Prop[bool] = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

The row of tab triggers.

Parameters:

- **`children`** (`object`, default: `None` ) –

  The tab triggers.
- **`variant`** (`Prop[TabsListVariant]`, default: `None` ) –

  The list's style.
- **`loop`** (`Prop[bool]`, default: `None` ) –

  Whether keyboard navigation wraps from the last tab to the first.
- **`kwargs`** (`Unpack[Shared]`, default: `{}` ) –

  Shared trame props and events, such as `classes`, `style` and `on_click`.

#### TabsTrigger

```python
TabsTrigger(children: object = None, *, value: Prop[str] = None, disabled: Prop[bool] = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

The tab selecting `value`.

Parameters:

- **`children`** (`object`, default: `None` ) –

  The tab's label.
- **`value`** (`Prop[str]`, default: `None` ) –

  The value the tab activates.
- **`disabled`** (`Prop[bool]`, default: `None` ) –

  Disables the tab.
- **`kwargs`** (`Unpack[Shared]`, default: `{}` ) –

  Shared trame props and events, such as `classes`, `style` and `on_click`.

#### TabsContent

```python
TabsContent(children: object = None, *, value: Prop[str] = None, force_mount: Prop[bool] = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

The pane shown while `value` is the active tab.

Parameters:

- **`children`** (`object`, default: `None` ) –

  The pane's content.
- **`value`** (`Prop[str]`, default: `None` ) –

  The tab value the pane shows for.
- **`force_mount`** (`Prop[bool]`, default: `None` ) –

  Keeps the pane mounted while another tab is active.
- **`kwargs`** (`Unpack[Shared]`, default: `{}` ) –

  Shared trame props and events, such as `classes`, `style` and `on_click`.

### term

The terminal: an xterm fed from the server.

Classes:

- **`Term`** –

  An xterm whose `options` are read at mount; `on_data` carries typed text, `on_resize` the new size.

#### Term

```python
Term(*, options: Prop[Mapping[str, object]] = None, on_data: Event = None, on_resize: Event = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

An xterm whose `options` are read at mount; `on_data` carries typed text, `on_resize` the new size.

Parameters:

- **`options`** (`Prop[Mapping[str, object]]`, default: `None` ) –

  xterm options, read once at mount.
- **`on_data`** (`Event`, default: `None` ) –

  Receives the text the user types.
- **`on_resize`** (`Event`, default: `None` ) –

  Receives the terminal's new size in columns and rows.
- **`kwargs`** (`Unpack[Shared]`, default: `{}` ) –

  Shared trame props and events, such as `classes`, `style` and `on_click`.

Methods:

- **`write`** –

  Writes `text` to the terminal.
- **`clear`** –

  Clears the terminal.
- **`fit`** –

  Fits the grid to the host's size.
- **`scroll_to_bottom`** –

  Scrolls to the newest line.

##### write

```python
write(text: str) -> None
```

Writes `text` to the terminal.

##### clear

```python
clear() -> None
```

Clears the terminal.

##### fit

```python
fit() -> None
```

Fits the grid to the host's size.

##### scroll\_to\_bottom

```python
scroll_to_bottom() -> None
```

Scrolls to the newest line.

### theme

The theme switch: `.dark` on , where the Radix portals outside the layout root see it.

Classes:

- **`Theme`** –

  Sets the colour scheme of the page; mount it first in the layout root.

#### Theme

```python
Theme(*, dark: Prop[bool] = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

Sets the colour scheme of the page; mount it first in the layout root.

### toggle

Toggles: a pressed button and a group of them choosing one or many values.

Classes:

- **`Toggle`** –

  A button that stays pressed; `model` binds the pressed state to a state variable.
- **`ToggleGroup`** –

  Toggle items choosing one value (`type_` single) or a list of them; `model` binds the choice to a state variable.
- **`ToggleGroupItem`** –

  One item of a toggle group.

#### Toggle

```python
Toggle(children: object = None, *, model: str | None = None, pressed: Prop[bool] = None, default_pressed: Prop[bool] = None, on_pressed_change: Event = None, variant: Prop[ToggleVariant] = None, size: Prop[ToggleSize] = None, disabled: Prop[bool] = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

A button that stays pressed; `model` binds the pressed state to a state variable.

Parameters:

- **`children`** (`object`, default: `None` ) –

  The toggle's label or icon.
- **`model`** (`str | None`, default: `None` ) –

  A state variable to bind the pressed state to, unless `on_pressed_change` is given.
- **`pressed`** (`Prop[bool]`, default: `None` ) –

  Whether the toggle is pressed.
- **`default_pressed`** (`Prop[bool]`, default: `None` ) –

  Whether the toggle is pressed at mount while `pressed` is unset.
- **`on_pressed_change`** (`Event`, default: `None` ) –

  Receives the new pressed state.
- **`variant`** (`Prop[ToggleVariant]`, default: `None` ) –

  The toggle's style.
- **`size`** (`Prop[ToggleSize]`, default: `None` ) –

  The toggle's size.
- **`disabled`** (`Prop[bool]`, default: `None` ) –

  Disables the toggle.
- **`kwargs`** (`Unpack[Shared]`, default: `{}` ) –

  Shared trame props and events, such as `classes`, `style` and `on_click`.

#### ToggleGroup

```python
ToggleGroup(children: object = None, *, model: str | None = None, type_: Prop[ToggleType] = None, value: Prop[str | Sequence[str]] = None, default_value: Prop[str | Sequence[str]] = None, on_value_change: Event = None, variant: Prop[ToggleVariant] = None, size: Prop[ToggleSize] = None, orientation: Prop[Orientation] = None, disabled: Prop[bool] = None, spacing: Prop[float] = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

Toggle items choosing one value (`type_` single) or a list of them; `model` binds the choice to a state variable.

Parameters:

- **`children`** (`object`, default: `None` ) –

  The group's items.
- **`model`** (`str | None`, default: `None` ) –

  A state variable to bind the choice to, unless `on_value_change` is given.
- **`type_`** (`Prop[ToggleType]`, default: `None` ) –

  Whether one item or several can be pressed.
- **`value`** (`Prop[str | Sequence[str]]`, default: `None` ) –

  The pressed item's value, or the values of a multiple group.
- **`default_value`** (`Prop[str | Sequence[str]]`, default: `None` ) –

  The choice at mount while `value` is unset.
- **`on_value_change`** (`Event`, default: `None` ) –

  Receives the new choice.
- **`variant`** (`Prop[ToggleVariant]`, default: `None` ) –

  The items' style.
- **`size`** (`Prop[ToggleSize]`, default: `None` ) –

  The items' size.
- **`orientation`** (`Prop[Orientation]`, default: `None` ) –

  The direction the items run.
- **`disabled`** (`Prop[bool]`, default: `None` ) –

  Disables every item.
- **`spacing`** (`Prop[float]`, default: `None` ) –

  The gap between items in Tailwind spacing units; 0 joins them.
- **`kwargs`** (`Unpack[Shared]`, default: `{}` ) –

  Shared trame props and events, such as `classes`, `style` and `on_click`.

#### ToggleGroupItem

```python
ToggleGroupItem(children: object = None, *, value: Prop[str] = None, disabled: Prop[bool] = None, variant: Prop[ToggleVariant] = None, size: Prop[ToggleSize] = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

One item of a toggle group.

Parameters:

- **`children`** (`object`, default: `None` ) –

  The item's label or icon.
- **`value`** (`Prop[str]`, default: `None` ) –

  The value the item stands for.
- **`disabled`** (`Prop[bool]`, default: `None` ) –

  Disables the item.
- **`variant`** (`Prop[ToggleVariant]`, default: `None` ) –

  The item's style, over the group's.
- **`size`** (`Prop[ToggleSize]`, default: `None` ) –

  The item's size, over the group's.
- **`kwargs`** (`Unpack[Shared]`, default: `{}` ) –

  Shared trame props and events, such as `classes`, `style` and `on_click`.

### tooltip

Tooltips: a provider, a tooltip and its trigger and content.

Classes:

- **`TooltipProvider`** –

  Shares the open delay across the tooltips inside it.
- **`Tooltip`** –

  A tooltip around its trigger.
- **`TooltipTrigger`** –

  The element the tooltip describes; `as_child` renders the child element itself.
- **`TooltipContent`** –

  The tooltip's bubble.

#### TooltipProvider

```python
TooltipProvider(children: object = None, *, delay_duration: Prop[float] = None, skip_delay_duration: Prop[float] = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

Shares the open delay across the tooltips inside it.

Parameters:

- **`children`** (`object`, default: `None` ) –

  The tooltips that share the delay.
- **`delay_duration`** (`Prop[float]`, default: `None` ) –

  How long the pointer rests on a trigger before its tooltip opens, in milliseconds.
- **`skip_delay_duration`** (`Prop[float]`, default: `None` ) –

  How soon after a tooltip closes another opens without the delay, in milliseconds.
- **`kwargs`** (`Unpack[Shared]`, default: `{}` ) –

  Shared trame props and events, such as `classes`, `style` and `on_click`.

#### Tooltip

```python
Tooltip(children: object = None, *, open_: Prop[bool] = None, default_open: Prop[bool] = None, on_open_change: Event = None, delay_duration: Prop[float] = None, disable_hoverable_content: Prop[bool] = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

A tooltip around its trigger.

Parameters:

- **`children`** (`object`, default: `None` ) –

  The trigger and the content.
- **`open_`** (`Prop[bool]`, default: `None` ) –

  Whether the tooltip is open.
- **`default_open`** (`Prop[bool]`, default: `None` ) –

  Whether the tooltip opens at mount while `open_` is unset.
- **`on_open_change`** (`Event`, default: `None` ) –

  Receives the new open state.
- **`delay_duration`** (`Prop[float]`, default: `None` ) –

  The open delay in milliseconds, over the provider's.
- **`disable_hoverable_content`** (`Prop[bool]`, default: `None` ) –

  Closes the tooltip once the pointer leaves the trigger, even for the content.
- **`kwargs`** (`Unpack[Shared]`, default: `{}` ) –

  Shared trame props and events, such as `classes`, `style` and `on_click`.

#### TooltipTrigger

```python
TooltipTrigger(children: object = None, *, as_child: Prop[bool] = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

The element the tooltip describes; `as_child` renders the child element itself.

Parameters:

- **`children`** (`object`, default: `None` ) –

  The element the tooltip describes.
- **`as_child`** (`Prop[bool]`, default: `None` ) –

  Renders the child element itself as the trigger.
- **`kwargs`** (`Unpack[Shared]`, default: `{}` ) –

  Shared trame props and events, such as `classes`, `style` and `on_click`.

#### TooltipContent

```python
TooltipContent(children: object = None, *, side: Prop[Side] = None, align: Prop[Align] = None, side_offset: Prop[float] = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

The tooltip's bubble.

Parameters:

- **`children`** (`object`, default: `None` ) –

  The tooltip's text.
- **`side`** (`Prop[Side]`, default: `None` ) –

  The side of the trigger the bubble opens on.
- **`align`** (`Prop[Align]`, default: `None` ) –

  How the bubble aligns against the trigger.
- **`side_offset`** (`Prop[float]`, default: `None` ) –

  The gap between the trigger and the bubble, in pixels.
- **`kwargs`** (`Unpack[Shared]`, default: `{}` ) –

  Shared trame props and events, such as `classes`, `style` and `on_click`.

### tree

The tree: collapsible items with leaf checkboxes.

Classes:

- **`TreeItem`** –

  One node: its id, title and children.
- **`Tree`** –

  Nested items whose leaves can be checked; `model` binds the checked ids to a state variable.

#### TreeItem

Bases: `TypedDict`

One node: its id, title and children.

#### Tree

```python
Tree(*, model: str | None = None, items: Prop[Sequence[TreeItem]] = None, value: Prop[Sequence[str]] = None, on_value_change: Event = None, selectable: Prop[TreeSelectable] = None, open_all: Prop[bool] = None, **kwargs: Unpack[Shared])
```

Bases: `Element`

Nested items whose leaves can be checked; `model` binds the checked ids to a state variable.

Parameters:

- **`model`** (`str | None`, default: `None` ) –

  A state variable to bind the checked ids to, unless `on_value_change` is given.
- **`items`** (`Prop[Sequence[TreeItem]]`, default: `None` ) –

  The root nodes.
- **`value`** (`Prop[Sequence[str]]`, default: `None` ) –

  The ids of the checked leaves.
- **`on_value_change`** (`Event`, default: `None` ) –

  Receives the checked ids.
- **`selectable`** (`Prop[TreeSelectable]`, default: `None` ) –

  Whether the leaves carry checkboxes.
- **`open_all`** (`Prop[bool]`, default: `None` ) –

  Opens every node at mount.
- **`kwargs`** (`Unpack[Shared]`, default: `{}` ) –

  Shared trame props and events, such as `classes`, `style` and `on_click`.