ui.* catalogue
The whole `ui.*` surface read live from the code — signature, bindable props, events, slots, imperative methods. This page introspects the classes at render time: it cannot fall out of step with the framework.See them rendered: the component gallery
Every component in real uses, with the code that renders it, under a theme you can switch and tune.
102 components12 helpers
Component or helper?
`ui.*` is not homogeneous. A component renders and carries a contract (bindable props, events, slots, imperative methods). A helper — `ui.each` (iteration), `ui.notification` (toast), `ui.column` (a column descriptor) — is only a function. Both are listed, but not mixed.Primitives
12Render a native audio player with visible controls by default.
Audio<audio>leaf
| Parameter | Type | Default |
|---|---|---|
| src | str | None | None |
| controls | bool | None | None |
| autoplay | bool | None | None |
| loop | bool | None | None |
| muted | bool | None | None |
Block code with Pygments syntax highlighting.
Code<pre>leaf
| Parameter | Type | Default |
|---|---|---|
| text | str | ClientBinding | None | None |
| lang | str | None | None |
BINDABLE_PROPS :text
Horizontal or vertical separator. ``orientation="vertical"``
Divider<div>leaf
| Parameter | Type | Default |
|---|---|---|
| orientation | str | None | None |
| label | str | ClientBinding | None | None |
| color | str | None | None |
BINDABLE_PROPS :label
Semantic heading. Pass text positionally, set ``level=`` (int
Heading<h2>leaf
| Parameter | Type | Default |
|---|---|---|
| text | str | ClientBinding | None | None |
| level | int | None | None |
| size | str | None | None |
| weight | str | None | None |
| color | str | None | None |
BINDABLE_PROPS :text
Inject trusted HTML verbatim without escaping it.
Html<div>leaf
| Parameter | Type | Default |
|---|---|---|
| text | str | None | None |
Inline icon. ``name`` accepts ``"save"`` (resolved against the
Icon<iconify-icon>leaf
| Parameter | Type | Default |
|---|---|---|
| name | str | None | None |
| size | str | None | None |
| color | str | None | None |
| set | str | None | None |
| icon_style | str | None | None |
BINDABLE_PROPS :name
Embed a titled document with a secure sandbox by default.
Iframe<iframe>leaf
| Parameter | Type | Default |
|---|---|---|
| src | str | None | None |
| title | str | — (requis) |
| ratio | str | None | None |
| sandbox | str | None | 'allow-scripts allow-same-origin allow-forms allow-popups' |
Render an image and optionally reserve its layout with ``ratio=``.
Image<img>leaf
| Parameter | Type | Default |
|---|---|---|
| src | str | None | None |
| alt | str | — (requis) |
| ratio | str | None | None |
| fit | str | None | None |
Block markdown rendering with bretzel typography. Server-only.
Markdown<div>leaf
| Parameter | Type | Default |
|---|---|---|
| text | str | None | None |
Loading indicator. Pass ``size=`` for the scale, ``color=`` for
Spinner<span>leaf
| Parameter | Type | Default |
|---|---|---|
| size | str | None | None |
| color | str | None | None |
Inline / block text with typographic modifiers.
Text<span>leaf
| Parameter | Type | Default |
|---|---|---|
| text | Any | None |
| size | str | None | None |
| weight | str | None | None |
| align | str | None | None |
| italic | bool | None | None |
| decoration | str | None | None |
| truncate | bool | None | None |
| color | str | None | None |
BINDABLE_PROPS :text
Render a native video player with reserved layout space.
Video<video>leaf
| Parameter | Type | Default |
|---|---|---|
| src | str | None | None |
| poster | str | None | None |
| ratio | str | None | None |
| fit | str | None | None |
| controls | bool | None | None |
| autoplay | bool | None | None |
| loop | bool | None | None |
| muted | bool | None | None |
| tracks | Iterable[Track] | () |
Layout
13Surface wrapper. Pass ``href=`` to make the whole card a link
Card<div>container
| Parameter | Type | Default |
|---|---|---|
| color | str | None | None |
| padding | str | None | None |
| hoverable | bool | None | None |
| href | str | None | None |
| on_click | Callable[..., Any] | str | None | None |
| on_mouseenter | Callable[..., Any] | str | None | None |
| on_mouseleave | Callable[..., Any] | str | None | None |
EVENTS :clickmouseentermouseleave
Render a snapping track whose direct children are slides.
Carousel<div>containername auto ← value
| Parameter | Type | Default |
|---|---|---|
| value | Any | None |
| per_view | int | dict | str | None | None |
| autoplay | float | None | None |
| gap | str | None | None |
| size | str | None | None |
| color | str | None | None |
| name | str | None | None |
| on_change | Callable[..., Any] | str | None | None |
BINDABLE_PROPS :value
EVENTS :change
IMPERATIVE :setnextprev
Centered max-width column. Pass ``width=`` to pick the clamp.
Container<div>container
| Parameter | Type | Default |
|---|---|---|
| width | str | None | None |
A grabbable wrapper around one item of a dropzone.
Draggable<div>container
| Parameter | Type | Default |
|---|---|---|
| key | str | None | None |
| group | str | None | None |
| handle | bool | False |
| disabled | bool | None | None |
| color | str | None | None |
Render a drop target whose ``on_move`` handler receives a typed ``Move``.
Dropzone<div>container
| Parameter | Type | Default |
|---|---|---|
| name | str | None | None |
| accepts | Iterable[str] | None | None |
| holds | str | None | None |
| locked | bool | None | None |
| terminal | bool | None | None |
| color | str | None | None |
| on_move | Callable[..., Any] | str | None | None |
EVENTS :move
A flex container with the full Tailwind axis API exposed.
Flex<div>container
| Parameter | Type | Default |
|---|---|---|
| direction | str | dict | None | None |
| align | str | None | None |
| justify | str | None | None |
| gap | str | dict | None | None |
| wrap | bool | None | None |
| grow | bool | str | None | None |
Two-dimensional layout container.
Grid<div>container
| Parameter | Type | Default |
|---|---|---|
| cols | int | dict | str | None | None |
| min_col | str | None | None |
| gap | str | dict | None | None |
Horizontal stack — :class:`Flex` with ``direction="row"`` baked in.
HStack<div>container
| Parameter | Type | Default |
|---|---|---|
| gap | str | dict | None | None |
| align | str | None | None |
| grow | Any | None |
| justify | str | 'start' |
| wrap | bool | False |
Render a scrolling column that occupies the remaining space.
Pane<div>container
| Parameter | Type | Default |
|---|---|---|
| gap | str | dict | None | None |
| padding | str | None | None |
| align | str | None | None |
| justify | str | None | None |
| grow | Any | None |
Render a group of panels separated by resize handles.
Resizable<div>containername auto ← sizes
| Parameter | Type | Default |
|---|---|---|
| sizes | Any | None |
| orientation | str | None | None |
| gap | str | dict | None | None |
| disabled | bool | None | None |
| size | str | None | None |
| color | str | None | None |
| name | str | None | None |
| on_change | Callable[..., Any] | str | None | None |
BINDABLE_PROPS :sizes
EVENTS :change
IMPERATIVE :setreset
Render one panel inside a resizable group.
ResizablePanel<div>container
| Parameter | Type | Default |
|---|---|---|
| min_size | float | None | None |
| max_size | float | None | None |
| collapsible | bool | None | None |
Render a full-screen frame whose regions scroll independently.
Viewport<div>container
| Parameter | Type | Default |
|---|---|---|
| direction | str | dict | None | None |
| align | str | None | None |
| gap | str | dict | None | None |
| grow | Any | None |
| justify | str | 'start' |
| wrap | bool | False |
Vertical stack — :class:`Flex` with ``direction="col"`` baked in.
VStack<div>container
| Parameter | Type | Default |
|---|---|---|
| gap | str | dict | None | None |
| align | str | None | None |
| grow | Any | None |
| justify | str | 'start' |
| wrap | bool | False |
Actions
3Action button with variant / size / color theming + named slots.
Button<button>leaf
| Parameter | Type | Default |
|---|---|---|
| label | str | ClientBinding | None | None |
| variant | str | None | None |
| size | str | None | None |
| color | str | None | None |
| type | str | None | None |
| href | str | ClientBinding | None | None |
| external | bool | False |
| disabled | Any | None |
| loading | Any | None |
| icon_left | Component | str | None | None |
| icon_right | Component | str | None | None |
| on_click | Callable[..., Any] | str | None | None |
| on_focus | Callable[..., Any] | str | None | None |
| on_blur | Callable[..., Any] | str | None | None |
| on_mouseenter | Callable[..., Any] | str | None | None |
| on_mouseleave | Callable[..., Any] | str | None | None |
BINDABLE_PROPS :labeldisabledloadinghref
EVENTS :clickfocusblurmouseentermouseleave
NAMED_SLOTS :icon_lefticon_right
Icon-only button. Pass the icon name positionally + an
IconButton<button>leaf
| Parameter | Type | Default |
|---|---|---|
| icon | str | Component | None | None |
| variant | str | None | None |
| size | str | None | None |
| color | str | None | None |
| type | str | None | None |
| disabled | Any | None |
| loading | Any | None |
| href | str | ClientBinding | None | None |
| external | bool | False |
| on_click | Callable[..., Any] | str | None | None |
| on_focus | Callable[..., Any] | str | None | None |
| on_blur | Callable[..., Any] | str | None | None |
| on_mouseenter | Callable[..., Any] | str | None | None |
| on_mouseleave | Callable[..., Any] | str | None | None |
BINDABLE_PROPS :disabledloadinghref
EVENTS :clickfocusblurmouseentermouseleave
Anchor element with semantic colour, three variants
Link<a>container
| Parameter | Type | Default |
|---|---|---|
| label | str | ClientBinding | None | None |
| href | str | ClientBinding | None | None |
| variant | str | None | None |
| color | str | None | None |
| external | bool | False |
| download | bool | False |
| disabled | bool | False |
BINDABLE_PROPS :labelhref
Inputs
23Month-grid date picker, single or range. Web Component-backed.
Calendar<bz-calendar>leafname auto ← value
| Parameter | Type | Default |
|---|---|---|
| value | Any | None |
| mode | str | None | None |
| min | Any | None |
| max | Any | None |
| disabled_dates | list[_dt.date] | None | None |
| marks | Any | None |
| month | Any | None |
| weekstart | int | None | None |
| weekday_names | list[str] | None | None |
| month_names | list[str] | None | None |
| color | str | None | None |
| size | str | None | None |
| disabled | bool | None | None |
| required | bool | None | None |
| name | str | None | None |
| on_change | Callable[..., Any] | str | None | None |
| on_month_change | Callable[..., Any] | str | None | None |
| on_focus | Callable[..., Any] | str | None | None |
| on_blur | Callable[..., Any] | str | None | None |
BINDABLE_PROPS :valuemonthminmaxdisabled
EVENTS :changemonth_changefocusblur
IMPERATIVE :setclearfocusblurnext_monthprev_month
Boolean toggle input with optional inline label.
Checkbox<label>leafname auto ← checked
| Parameter | Type | Default |
|---|---|---|
| checked | Any | None |
| name | str | None | None |
| value | str | None | None |
| label | str | None | None |
| disabled | bool | None | None |
| required | bool | None | None |
| color | str | None | None |
| size | str | None | None |
| on_change | Callable[..., Any] | str | None | None |
| on_focus | Callable[..., Any] | str | None | None |
| on_blur | Callable[..., Any] | str | None | None |
BINDABLE_PROPS :checkeddisabled
EVENTS :changefocusblur
IMPERATIVE :settoggle
Render a color field with a swatch selection panel.
ColorPicker<div>leafname auto ← value
| Parameter | Type | Default |
|---|---|---|
| value | Any | None |
| name | str | None | None |
| placeholder | str | None | None |
| clearable | bool | False |
| disabled | bool | None | None |
| required | bool | None | None |
| color | str | None | None |
| size | str | None | None |
| on_change | Callable[..., Any] | str | None | None |
| on_focus | Callable[..., Any] | str | None | None |
| on_blur | Callable[..., Any] | str | None | None |
BINDABLE_PROPS :valuedisabled
EVENTS :changefocusblur
IMPERATIVE :openclosetogglesetclearfocusblur
Search-as-you-type select with single / multi modes.
Combobox<div>leafname auto ← value
| Parameter | Type | Default |
|---|---|---|
| options | Iterable[Any] | () |
| render | Callable[[Any, Any], Any] | None | None |
| value | Any | None |
| multiple | bool | None | None |
| bulk_actions | bool | None | None |
| empty_text | str | None | None |
| name | str | None | None |
| placeholder | str | None | None |
| trigger | Component | None | None |
| disabled | bool | None | None |
| required | bool | None | None |
| color | str | None | None |
| size | str | None | None |
| on_change | Callable[..., Any] | str | None | None |
| on_focus | Callable[..., Any] | str | None | None |
| on_blur | Callable[..., Any] | str | None | None |
| on_search | Callable[..., Any] | str | None | None |
| on_close | Callable[..., Any] | str | None | None |
BINDABLE_PROPS :valuedisabled
EVENTS :changefocusblursearchclose
IMPERATIVE :openclosetogglesetclearfocusblurselect_alldeselect_all
Single-date input with an inline calendar popover.
DatePicker<div>leafname auto ← value
| Parameter | Type | Default |
|---|---|---|
| value | Any | None |
| placeholder | str | 'YYYY-MM-DD' |
| min | Any | None |
| max | Any | None |
| disabled_dates | list[_dt.date] | None | None |
| weekstart | int | 1 |
| marks | Any | None |
| weekday_names | list[str] | None | None |
| month_names | list[str] | None | None |
| color | str | None | None |
| size | str | None | None |
| disabled | bool | None | None |
| required | bool | None | None |
| clearable | bool | True |
| close_on_pick | bool | True |
| name | str | None | None |
| on_change | Callable[..., Any] | str | None | None |
| on_focus | Callable[..., Any] | str | None | None |
| on_blur | Callable[..., Any] | str | None | None |
BINDABLE_PROPS :valueminmaxdisabled
EVENTS :changefocusblur
IMPERATIVE :openclosetogglesetclearfocusblur
Start + end date input with shared calendar popover.
DateRangePicker<div>leafname auto ← value
| Parameter | Type | Default |
|---|---|---|
| value | Any | None |
| placeholder_start | str | 'Start' |
| placeholder_end | str | 'End' |
| separator | str | '→' |
| min | Any | None |
| max | Any | None |
| disabled_dates | list[_dt.date] | None | None |
| weekstart | int | 1 |
| marks | Any | None |
| weekday_names | list[str] | None | None |
| month_names | list[str] | None | None |
| color | str | None | None |
| size | str | None | None |
| disabled | bool | None | None |
| required | bool | None | None |
| clearable | bool | True |
| close_on_close | bool | True |
| name | str | None | None |
| on_change | Callable[..., Any] | str | None | None |
| on_focus | Callable[..., Any] | str | None | None |
| on_blur | Callable[..., Any] | str | None | None |
BINDABLE_PROPS :valueminmaxdisabled
EVENTS :changefocusblur
IMPERATIVE :openclosetogglesetclearfocusblur
Dropzone or compact-button file picker.
FileUpload<div>leaf
| Parameter | Type | Default |
|---|---|---|
| variant | str | 'dropzone' |
| list | str | 'tiles' |
| label | str | None | None |
| multiple | bool | None | None |
| accept | str | list[str] | None | None |
| max_size_mb | float | None | None |
| max_files | int | None | None |
| disabled | bool | None | None |
| required | bool | None | None |
| color | str | None | None |
| size | str | None | None |
| upload_url | str | None | None |
| show_previews | bool | True |
| paste | bool | False |
| name | str | None | None |
| on_change | Callable[..., Any] | str | None | None |
| on_upload_start | Callable[..., Any] | str | None | None |
| on_upload_complete | Callable[..., Any] | str | None | None |
| on_upload_error | Callable[..., Any] | str | None | None |
| on_focus | Callable[..., Any] | str | None | None |
| on_blur | Callable[..., Any] | str | None | None |
BINDABLE_PROPS :disabled
EVENTS :changeupload_startupload_completeupload_errorfocusblur
HTML form wrapper. Children are added via ``with`` block.
Form<form>container
| Parameter | Type | Default |
|---|---|---|
| on_submit | Callable[..., Any] | str | None | None |
EVENTS :submit
Field wrapper : label on top, child input in the middle,
FormField<div>container
| Parameter | Type | Default |
|---|---|---|
| label | str | None | None |
| hint | str | None | None |
| error | str | None | None |
| required | bool | None | None |
| name | str | None | None |
BINDABLE_PROPS :errorhint
Render a text input with distinct input and change events.
Input<input>leafname auto ← value
| Parameter | Type | Default |
|---|---|---|
| type | str | None | None |
| name | str | None | None |
| placeholder | str | None | None |
| value | Any | None |
| disabled | bool | None | None |
| readonly | bool | None | None |
| required | bool | None | None |
| min | Any | None |
| max | Any | None |
| step | Any | None |
| pattern | str | None | None |
| minlength | int | None | None |
| maxlength | int | None | None |
| autocomplete | str | None | None |
| color | str | None | None |
| size | str | None | None |
| prefix | str | Component | None | None |
| suffix | str | Component | None | None |
| icon_left | str | Component | None | None |
| icon_right | str | Component | None | None |
| clearable | bool | False |
| on_change | Callable[..., Any] | str | None | None |
| on_input | Callable[..., Any] | str | None | None |
| on_focus | Callable[..., Any] | str | None | None |
| on_blur | Callable[..., Any] | str | None | None |
| on_keydown | Callable[..., Any] | str | None | None |
| on_keyup | Callable[..., Any] | str | None | None |
BINDABLE_PROPS :valuedisabledreadonly
EVENTS :changeinputfocusblurkeydownkeyup
IMPERATIVE :setclearfocusblur
Render a month field with a year-grid popover.
MonthPicker<div>leafname auto ← value
| Parameter | Type | Default |
|---|---|---|
| value | Any | None |
| placeholder | str | 'YYYY-MM' |
| min | Any | None |
| max | Any | None |
| month_names | list[str] | None | None |
| color | str | None | None |
| size | str | None | None |
| disabled | bool | None | None |
| required | bool | None | None |
| clearable | bool | True |
| close_on_pick | bool | True |
| name | str | None | None |
| on_change | Callable[..., Any] | str | None | None |
| on_focus | Callable[..., Any] | str | None | None |
| on_blur | Callable[..., Any] | str | None | None |
BINDABLE_PROPS :valuedisabled
EVENTS :changefocusblur
IMPERATIVE :openclosetogglesetclearfocusblur
Numeric input with vertical ± stepper buttons.
NumberInput<div>leafname auto ← value
| Parameter | Type | Default |
|---|---|---|
| value | Any | None |
| min | float | None | None |
| max | float | None | None |
| step | float | None | None |
| name | str | None | None |
| placeholder | str | None | None |
| wheel | bool | None | None |
| disabled | bool | None | None |
| required | bool | None | None |
| color | str | None | None |
| size | str | None | None |
| on_change | Callable[..., Any] | str | None | None |
| on_focus | Callable[..., Any] | str | None | None |
| on_blur | Callable[..., Any] | str | None | None |
BINDABLE_PROPS :valuedisabled
EVENTS :changefocusblur
IMPERATIVE :setclearfocusblurincrementdecrement
One choice inside a :class:`RadioGroup`. Inherits ``name``,
Radio<label>leaf
| Parameter | Type | Default |
|---|---|---|
| value | str | '' |
| label | str | None | None |
| name | str | None | None |
| color | str | None | None |
| size | str | None | None |
| disabled | bool | None | None |
| required | bool | None | None |
| on_change | Callable[..., Any] | str | None | None |
| on_focus | Callable[..., Any] | str | None | None |
| on_blur | Callable[..., Any] | str | None | None |
BINDABLE_PROPS :disabled
EVENTS :changefocusblur
Container for a cluster of ``Radio`` items. Owns the ``name``
RadioGroup<div>containername auto ← value
| Parameter | Type | Default |
|---|---|---|
| name | str | None | None |
| value | Any | None |
| direction | str | None | None |
| color | str | None | None |
| size | str | None | None |
| disabled | bool | None | None |
| required | bool | None | None |
| on_change | Callable[..., Any] | str | None | None |
BINDABLE_PROPS :valuedisabled
EVENTS :change
IMPERATIVE :set
Styled combobox built on a button trigger + dropdown panel.
Select<div>leafname auto ← value
| Parameter | Type | Default |
|---|---|---|
| options | Iterable[Any] | () |
| render | Callable[[Any, Any], Any] | None | None |
| value | Any | None |
| name | str | None | None |
| placeholder | str | None | None |
| multiple | bool | None | None |
| bulk_actions | bool | None | None |
| disabled | bool | None | None |
| required | bool | None | None |
| color | str | None | None |
| size | str | None | None |
| on_change | Callable[..., Any] | str | None | None |
| on_focus | Callable[..., Any] | str | None | None |
| on_blur | Callable[..., Any] | str | None | None |
BINDABLE_PROPS :valuedisabled
EVENTS :changefocusblur
IMPERATIVE :openclosetogglesetclearfocusblurselect_alldeselect_all
Surface de signature — pointeur / doigt → PNG en data-URL.
SignaturePad<div>containername auto ← value
| Parameter | Type | Default |
|---|---|---|
| value | str | None | None |
| placeholder | str | None | None |
| clear_label | str | None | None |
| disabled | bool | None | None |
| size | str | None | None |
| color | str | None | None |
| name | str | None | None |
| on_change | Callable[..., Any] | str | None | None |
BINDABLE_PROPS :value
EVENTS :change
IMPERATIVE :clear
Drag-to-pick numeric input, single or range.
Slider<div>leafname auto ← value
| Parameter | Type | Default |
|---|---|---|
| value | Any | None |
| min | float | None | None |
| max | float | None | None |
| step | float | None | None |
| range | bool | None | None |
| name | str | None | None |
| disabled | bool | None | None |
| required | bool | None | None |
| color | str | None | None |
| size | str | None | None |
| on_change | Callable[..., Any] | str | None | None |
| on_focus | Callable[..., Any] | str | None | None |
| on_blur | Callable[..., Any] | str | None | None |
BINDABLE_PROPS :valuedisabled
EVENTS :changefocusblur
IMPERATIVE :setclearfocusblur
Boolean toggle rendered as a sliding rail.
Switch<label>leafname auto ← checked
| Parameter | Type | Default |
|---|---|---|
| checked | Any | None |
| name | str | None | None |
| value | str | None | None |
| label | str | None | None |
| disabled | bool | None | None |
| color | str | None | None |
| size | str | None | None |
| on_change | Callable[..., Any] | str | None | None |
| on_focus | Callable[..., Any] | str | None | None |
| on_blur | Callable[..., Any] | str | None | None |
BINDABLE_PROPS :checkeddisabled
EVENTS :changefocusblur
IMPERATIVE :settoggle
Multi-line text input.
Textarea<textarea>leafname auto ← value
| Parameter | Type | Default |
|---|---|---|
| name | str | None | None |
| placeholder | str | None | None |
| value | Any | None |
| rows | int | None | None |
| disabled | bool | None | None |
| readonly | bool | None | None |
| required | bool | None | None |
| minlength | int | None | None |
| maxlength | int | None | None |
| color | str | None | None |
| size | str | None | None |
| on_change | Callable[..., Any] | str | None | None |
| on_input | Callable[..., Any] | str | None | None |
| on_focus | Callable[..., Any] | str | None | None |
| on_blur | Callable[..., Any] | str | None | None |
| on_keydown | Callable[..., Any] | str | None | None |
| on_keyup | Callable[..., Any] | str | None | None |
BINDABLE_PROPS :valuedisabledreadonly
EVENTS :changeinputfocusblurkeydownkeyup
IMPERATIVE :setclearfocusblur
Render a time field with hour and minute panels.
TimePicker<div>leafname auto ← value
| Parameter | Type | Default |
|---|---|---|
| value | Any | None |
| placeholder | str | 'HH:MM' |
| step | int | 15 |
| min | Any | None |
| max | Any | None |
| color | str | None | None |
| size | str | None | None |
| disabled | bool | None | None |
| required | bool | None | None |
| clearable | bool | True |
| close_on_pick | bool | True |
| hour_label | str | 'H' |
| minute_label | str | 'M' |
| name | str | None | None |
| on_change | Callable[..., Any] | str | None | None |
| on_focus | Callable[..., Any] | str | None | None |
| on_blur | Callable[..., Any] | str | None | None |
BINDABLE_PROPS :valuedisabled
EVENTS :changefocusblur
IMPERATIVE :openclosetogglesetclearfocusblur
One item inside a :class:`ToggleGroup`.
ToggleButton<button>leaf
| Parameter | Type | Default |
|---|---|---|
| value | str | — (requis) |
| label | str | None | None |
| icon | str | Component | None | None |
| disabled | bool | None | None |
| tooltip | str | None | None |
BINDABLE_PROPS :disabled
Cluster of :class:`ToggleButton` items — single or multi-select.
ToggleGroup<div>containername auto ← value
| Parameter | Type | Default |
|---|---|---|
| value | Any | None |
| options | list[tuple[str, str]] | None | None |
| multiple | bool | None | None |
| color | str | None | None |
| size | str | None | None |
| disabled | bool | None | None |
| name | str | None | None |
| on_change | Callable[..., Any] | str | None | None |
| on_focus | Callable[..., Any] | str | None | None |
| on_blur | Callable[..., Any] | str | None | None |
BINDABLE_PROPS :valuedisabled
EVENTS :changefocusblur
IMPERATIVE :setclearfocusblurselect_alldeselect_all
Render a week field with row-based day selection.
WeekPicker<div>leafname auto ← value
| Parameter | Type | Default |
|---|---|---|
| value | Any | None |
| placeholder | str | 'YYYY-MM-DD' |
| min | Any | None |
| max | Any | None |
| weekstart | int | 1 |
| marks | Any | None |
| weekday_names | list[str] | None | None |
| month_names | list[str] | None | None |
| color | str | None | None |
| size | str | None | None |
| disabled | bool | None | None |
| required | bool | None | None |
| clearable | bool | True |
| close_on_pick | bool | True |
| name | str | None | None |
| on_change | Callable[..., Any] | str | None | None |
| on_focus | Callable[..., Any] | str | None | None |
| on_blur | Callable[..., Any] | str | None | None |
BINDABLE_PROPS :valuedisabled
EVENTS :changefocusblur
IMPERATIVE :openclosetogglesetclearfocusblur
Feedback
7Status panel : leading icon, optional title, message body,
Alert<div>leaf
| Parameter | Type | Default |
|---|---|---|
| message | str | Component | None | None |
| color | str | None | None |
| icon | str | Component | bool | None | None |
| title | str | None | None |
| dismissible | bool | None | None |
| on_close | Callable[..., Any] | str | None | None |
BINDABLE_PROPS :titlemessage
EVENTS :close
Round / square user chip with image or initials fallback.
Avatar<span>leaf
| Parameter | Type | Default |
|---|---|---|
| src | str | None | None |
| alt | str | None | None |
| name | str | None | None |
| initials | str | None | None |
| size | str | None | None |
| variant | str | None | None |
| shape | str | None | None |
| color | str | None | None |
| status | str | None | None |
BINDABLE_PROPS :status
Inline pill — count / status / tag / filter chip.
Badge<span>leaf
| Parameter | Type | Default |
|---|---|---|
| label | str | ClientBinding | None | None |
| variant | str | None | None |
| size | str | None | None |
| color | str | None | None |
| icon_left | str | Component | ClientBinding | None | None |
| icon_right | str | Component | ClientBinding | None | None |
| dismissible | bool | None | None |
| on_close | Callable[..., Any] | str | None | None |
BINDABLE_PROPS :label
EVENTS :close
Full-width page-level status strip.
Banner<div>container
| Parameter | Type | Default |
|---|---|---|
| message | Any | None |
| title | Any | None |
| icon | str | Component | None | None |
| color | str | None | None |
| size | str | None | None |
| dismissible | bool | None | None |
| on_close | Callable[..., Any] | str | None | None |
BINDABLE_PROPS :titlemessage
EVENTS :close
Centred placeholder for "nothing here yet" surfaces.
EmptyState<div>container
| Parameter | Type | Default |
|---|---|---|
| title | Any | None |
| icon | str | Component | None | None |
| description | Any | None |
| size | str | None | None |
| color | str | None | None |
BINDABLE_PROPS :titledescription
NAMED_SLOTS :icon
Horizontal progress bar.
Progress<div>leaf
| Parameter | Type | Default |
|---|---|---|
| value | Any | None |
| max | float | None | None |
| indeterminate | bool | None | None |
| color | str | None | None |
| size | str | None | None |
| show_label | bool | None | None |
| label | str | None | None |
BINDABLE_PROPS :valuelabel
Loading-placeholder block.
Skeleton<span>leaf
| Parameter | Type | Default |
|---|---|---|
| variant | str | None | None |
| width | str | None | None |
| height | str | None | None |
| animated | bool | None | None |
Data
7Stack of collapsible :class:`AccordionItem` panels.
Accordion<div>containername auto ← value
| Parameter | Type | Default |
|---|---|---|
| value | Any | None |
| multiple | bool | None | None |
| collapsible | bool | None | None |
| size | str | None | None |
| color | str | None | None |
| on_change | Callable[..., Any] | str | None | None |
BINDABLE_PROPS :value
EVENTS :change
IMPERATIVE :expandcollapsetoggleexpand_allcollapse_all
One collapsible row inside an :class:`Accordion`.
AccordionItem<div>container
| Parameter | Type | Default |
|---|---|---|
| value | str | '' |
| label | Any | None |
| icon | Any | None |
| disabled | bool | None | None |
NAMED_SLOTS :icon
Table with server-driven sort, pagination and search.
Datatable<div>leaf
| Parameter | Type | Default |
|---|---|---|
| state | type[DatatableState] | — (requis) |
| columns | Iterable[Column] | () |
| rows | Iterable[Any] | Callable[[Query], tuple[Any, int]] | () |
| search | bool | True |
| search_placeholder | str | 'Search…' |
| exportable | bool | False |
| export_filename | str | 'export.csv' |
| max_height | str | None | None |
| row_key | str | Callable[[Any], Any] | None | None |
| on_item_click | Callable[..., Any] | None | None |
| size | str | None | None |
| color | str | None | None |
| empty_text | str | 'No data.' |
| empty_icon | str | None | 'inbox' |
| empty_description | str | None | None |
| empty | Callable[[], Any] | None | None |
EVENTS :item_click
Render a server-laid-out directed graph in layers.
Diagram<div>leafname auto ← value
| Parameter | Type | Default |
|---|---|---|
| value | Any | None |
| edges | Iterable[Any] | () |
| nodes | Iterable[Any] | () |
| focus | str | None | None |
| depth | int | 1 |
| direction | str | 'right' |
| render | Callable[[GraphNode], Any] | None | None |
| on_item_click | Callable[..., Any] | str | list[Callable[..., Any] | str] | None | None |
| size | str | None | None |
| color | str | None | None |
| empty_text | str | 'No graph.' |
| empty_icon | str | None | 'workflow' |
| empty_description | str | None | None |
| empty | Callable[[], Any] | None | None |
BINDABLE_PROPS :value
EVENTS :item_click
Simple data table — header row + body rows, styled by theme.
Table<div>leaf
| Parameter | Type | Default |
|---|---|---|
| columns | Iterable[Column] | () |
| rows | Iterable[Any] | () |
| row_key | str | Callable[[Any], Any] | None | None |
| on_item_click | Callable[..., Any] | None | None |
| size | str | None | None |
| color | str | None | None |
| empty_text | str | 'No data.' |
| empty_icon | str | None | 'inbox' |
| empty_description | str | None | None |
| empty | Callable[[], Any] | None | None |
| head_render | Callable[[Column], Any] | None | None |
EVENTS :item_click
Root of a collapsible hierarchy of :class:`TreeNode`\s.
Tree<ul>containername auto ← value
| Parameter | Type | Default |
|---|---|---|
| value | Any | None |
| expanded | Sequence[str] | None | None |
| selectable | bool | None | None |
| size | str | None | None |
| color | str | None | None |
| on_change | Callable[..., Any] | str | None | None |
BINDABLE_PROPS :value
EVENTS :change
One node inside a :class:`Tree`.
TreeNode<li>container
| Parameter | Type | Default |
|---|---|---|
| value | str | '' |
| label | Any | None |
| icon | Any | None |
| disabled | bool | None | None |
Charts
5Categorical bar chart.
BarChart<div>leaf
| Parameter | Type | Default |
|---|---|---|
| data | Any | None |
| color | str | None | None |
| size | str | None | None |
| width | int | None | None |
| variant | str | None | None |
| orientation | str | None | None |
| show_values | bool | None | None |
| show_axis | bool | None | None |
| show_gridlines | bool | None | None |
| show_legend | bool | None | None |
| y_format | Any | None |
| y_unit | str | None | None |
| reference_lines | Any | None |
| on_item_click | Any | None |
| empty_text | str | None | None |
| empty_icon | str | None | 'bar-chart-3' |
| empty_description | str | None | None |
| empty | Callable[[], Any] | None | None |
EVENTS :item_click
Continuous-x line chart with crosshair hover.
LineChart<div>leaf
| Parameter | Type | Default |
|---|---|---|
| data | Any | None |
| color | str | None | None |
| size | str | None | None |
| width | int | None | None |
| smooth | bool | None | None |
| area_fill | bool | None | None |
| show_dots | bool | None | None |
| show_axis | bool | None | None |
| show_gridlines | bool | None | None |
| show_legend | bool | None | None |
| y_format | Any | None |
| x_format | Any | None |
| y_unit | str | None | None |
| x_unit | str | None | None |
| reference_lines | Any | None |
| empty_text | str | None | None |
| empty_icon | str | None | 'line-chart' |
| empty_description | str | None | None |
| empty | Callable[[], Any] | None | None |
Pie or donut chart.
PieChart<div>leaf
| Parameter | Type | Default |
|---|---|---|
| data | Any | None |
| colors | Any | None |
| size | str | None | None |
| variant | str | None | None |
| show_labels | bool | None | None |
| show_legend | bool | None | None |
| center_text | str | None | None |
| value_format | Any | None |
| value_unit | str | None | None |
| on_item_click | Any | None |
| empty_text | str | None | None |
| empty_icon | str | None | 'pie-chart' |
| empty_description | str | None | None |
| empty | Callable[[], Any] | None | None |
EVENTS :item_click
Continuous-X-Y scatter plot.
ScatterChart<div>leaf
| Parameter | Type | Default |
|---|---|---|
| data | Any | None |
| color | str | None | None |
| size | str | None | None |
| width | int | None | None |
| show_axis | bool | None | None |
| show_gridlines | bool | None | None |
| show_legend | bool | None | None |
| y_format | Any | None |
| x_format | Any | None |
| y_unit | str | None | None |
| x_unit | str | None | None |
| reference_lines | Any | None |
| empty_text | str | None | None |
| empty_icon | str | None | 'scatter-chart' |
| empty_description | str | None | None |
| empty | Callable[[], Any] | None | None |
Inline single-series trend indicator.
Sparkline<svg>leaf
| Parameter | Type | Default |
|---|---|---|
| data | Any | None |
| color | str | None | None |
| size | str | None | None |
| smooth | bool | None | None |
| area_fill | bool | None | None |
| show_last_dot | bool | None | None |
| width | int | None | None |
Navigation
21Render a bottom navigation bar that tracks the current path.
BottomBar<nav>container
Render a bottom-bar item with an icon, label, and optional badge.
BottomBarItem<div>leaf
| Parameter | Type | Default |
|---|---|---|
| label | str | '' |
| icon | Any | None |
| href | str | None | None |
| active | Any | None |
| badge | Any | None |
| disabled | bool | None | None |
| color | str | None | None |
| on_click | Callable[..., Any] | str | None | None |
BINDABLE_PROPS :activebadgedisabled
EVENTS :click
NAMED_SLOTS :icon
Page-location trail with chevron-separated parents.
Breadcrumb<nav>container
| Parameter | Type | Default |
|---|---|---|
| items | Sequence[Any] | () |
| separator | str | Component | 'chevron-right' |
| color | str | None | None |
| size | str | None | None |
Render one breadcrumb segment with an optional icon and link.
BreadcrumbItem<a>leaf
| Parameter | Type | Default |
|---|---|---|
| label | Any | None |
| icon | Any | None |
| href | str | None | None |
NAMED_SLOTS :icon
``<header>`` top bar. Owns ``current_path`` for active links.
Navbar<header>container
| Parameter | Type | Default |
|---|---|---|
| sticky | bool | None | None |
| variant | str | None | None |
Horizontal nav row — icon + label + optional badge.
NavbarItem<div>leaf
| Parameter | Type | Default |
|---|---|---|
| label | str | '' |
| icon | Any | None |
| href | str | None | None |
| active | Any | None |
| badge | Any | None |
| disabled | bool | None | None |
| color | str | None | None |
| on_click | Callable[..., Any] | str | None | None |
BINDABLE_PROPS :activebadgedisabled
EVENTS :click
NAMED_SLOTS :icon
One of three positional groupings inside a Navbar.
NavbarSection<div>container
| Parameter | Type | Default |
|---|---|---|
| side | str | None | None |
Page navigation : *Prev* — N page buttons — *Next*.
Pagination<nav>leafname auto ← value
| Parameter | Type | Default |
|---|---|---|
| value | Any | None |
| total_pages | Any | None |
| max_visible | Any | None |
| disabled | bool | None | None |
| color | str | None | None |
| size | str | None | None |
| name | str | None | None |
| on_change | Callable[..., Any] | str | None | None |
BINDABLE_PROPS :valuedisabled
EVENTS :change
IMPERATIVE :setnextprev
Render a collapsible application sidebar.
Sidebar<aside>container
| Parameter | Type | Default |
|---|---|---|
| open | Any | None |
| width | str | None | None |
| collapsible | str | None | None |
BINDABLE_PROPS :open
IMPERATIVE :openclosetoggle
Render the footer region of a sidebar.
SidebarFooter<div>container
| Parameter | Type | Default |
|---|---|---|
| name | str | '' |
| subtitle | str | None | None |
| avatar | str | Component | None | None |
| color | str | None | None |
A clickable row inside a :class:`SidebarFooter` popover.
SidebarFooterItem<button>leaf
| Parameter | Type | Default |
|---|---|---|
| label | str | Component | None | None |
| icon_left | str | Component | None | None |
| icon_right | str | Component | None | None |
| shortcut | str | None | None |
| href | str | None | None |
| color | str | None | None |
| disabled | bool | None | None |
| on_click | Callable[..., Any] | str | None | None |
BINDABLE_PROPS :disabled
EVENTS :click
One nav row : icon + label + optional badge.
SidebarItem<div>leaf
| Parameter | Type | Default |
|---|---|---|
| label | str | '' |
| icon | Any | None |
| href | str | None | None |
| active | Any | None |
| badge | Any | None |
| disabled | bool | None | None |
| color | str | None | None |
| on_click | Callable[..., Any] | str | None | None |
BINDABLE_PROPS :activebadgedisabled
EVENTS :click
NAMED_SLOTS :icon
Group of items with an optional uppercase label.
SidebarSection<div>container
| Parameter | Type | Default |
|---|---|---|
| label | str | None | None |
Render the sidebar title and optional home link.
SidebarTitle<div>leaf
| Parameter | Type | Default |
|---|---|---|
| title | str | '' |
| icon | str | Component | None | 'home' |
| href | str | None | None |
Render a button that opens or closes a sidebar.
SidebarTrigger<div>leaf
| Parameter | Type | Default |
|---|---|---|
| sidebar | Any | None |
| icon | str | Component | None | None |
| size | str | None | None |
Describe one step in a stepper.
Step<div>leaf
| Parameter | Type | Default |
|---|---|---|
| label | Any | '' |
| description | Any | None |
| icon | Any | None |
| status | str | None | None |
| disabled | bool | None | None |
NAMED_SLOTS :icon
Render content when its step is active.
StepPanel<div>container
Render an ordered sequence of steps with matching content panels.
Stepper<div>containername auto ← value
| Parameter | Type | Default |
|---|---|---|
| value | Any | None |
| orientation | str | None | None |
| clickable | bool | None | None |
| size | str | None | None |
| color | str | None | None |
| name | str | None | None |
| on_change | Callable[..., Any] | str | None | None |
BINDABLE_PROPS :value
EVENTS :change
IMPERATIVE :setnextprev
One button inside a :class:`Tabs` strip.
Tab<button>leaf
| Parameter | Type | Default |
|---|---|---|
| tab_id | str | '' |
| label | str | '' |
| icon | Any | None |
| disabled | bool | None | None |
NAMED_SLOTS :icon
Content shown when its ``tab`` matches the active id.
TabPanel<div>container
| Parameter | Type | Default |
|---|---|---|
| tab | str | '' |
Container that holds Tab buttons + TabPanel content.
Tabs<div>containername auto ← value
| Parameter | Type | Default |
|---|---|---|
| value | Any | None |
| size | str | None | None |
| color | str | None | None |
| name | str | None | None |
| url | str | None | None |
| on_change | Callable[..., Any] | str | None | None |
BINDABLE_PROPS :value
EVENTS :change
Overlay
6Centered modal with backdrop + escape + scroll lock.
Dialog<div>container
| Parameter | Type | Default |
|---|---|---|
| open | Any | None |
| title | str | None | None |
| width | str | None | None |
| dismissible | bool | None | None |
| persistent | bool | None | None |
| on_open | Callable[..., Any] | str | None | None |
| on_close | Callable[..., Any] | str | None | None |
BINDABLE_PROPS :open
EVENTS :openclose
IMPERATIVE :openclosetoggle
Side-anchored sliding panel.
Drawer<div>container
| Parameter | Type | Default |
|---|---|---|
| open | Any | None |
| title | str | None | None |
| side | str | None | None |
| width | str | None | None |
| dismissible | bool | None | None |
| persistent | bool | None | None |
| on_open | Callable[..., Any] | str | None | None |
| on_close | Callable[..., Any] | str | None | None |
BINDABLE_PROPS :open
EVENTS :openclose
IMPERATIVE :openclosetoggle
Anchored menu of clickable rows.
Dropdown<div>container
| Parameter | Type | Default |
|---|---|---|
| trigger | Component | None | None |
| open | Any | None |
| position | str | None | None |
| align | str | None | None |
| dismissible | bool | None | None |
| on_open | Callable[..., Any] | str | None | None |
| on_close | Callable[..., Any] | str | None | None |
BINDABLE_PROPS :open
EVENTS :openclose
IMPERATIVE :openclosetoggle
One clickable row inside a :class:`Dropdown`.
DropdownItem<button>leaf
| Parameter | Type | Default |
|---|---|---|
| label | str | Component | None | None |
| icon_left | str | Component | None | None |
| icon_right | str | Component | None | None |
| shortcut | str | None | None |
| href | str | None | None |
| color | str | None | None |
| disabled | bool | None | None |
| on_click | Callable[..., Any] | str | None | None |
BINDABLE_PROPS :disabled
EVENTS :click
Anchored floating panel toggled by a trigger element.
Popover<div>container
| Parameter | Type | Default |
|---|---|---|
| trigger | Component | None | None |
| open | Any | None |
| position | str | None | None |
| align | str | None | None |
| dismissible | bool | None | None |
| on_open | Callable[..., Any] | str | None | None |
| on_close | Callable[..., Any] | str | None | None |
BINDABLE_PROPS :open
EVENTS :openclose
IMPERATIVE :openclosetoggle
Hover-/focus-revealed text panel.
Tooltip<div>container
| Parameter | Type | Default |
|---|---|---|
| text | str | ClientBinding | None | None |
| position | str | None | None |
| delay | int | None | None |
| color | str | None | None |
| enabled | bool | ClientBinding | str | None | None |
BINDABLE_PROPS :text
Meta
5Wrap-less container — children render flat into the parent.
Fragment<div>container
Hidden recurring timer. Pairs with a ``ClientBinding`` gate so the
Interval<div>leaf
| Parameter | Type | Default |
|---|---|---|
| on_tick | Callable[..., Any] | str | None | None |
| seconds | float | 1.0 |
| active | ClientBinding | bool | True |
EVENTS :tick
``<meta>`` element pushed into the request's head_extras.
MetaTag<div>leaf
| Parameter | Type | Default |
|---|---|---|
| name | str | None | None |
| property | str | None | None |
| http_equiv | str | None | None |
| content | str | — (requis) |
``<main>`` slot where the page content lands inside a layout.
Outlet<main>container
| Parameter | Type | Default |
|---|---|---|
| id | str | None | None |
Page-level ``<title>`` override (side-effect component).
Title<div>leaf
| Parameter | Type | Default |
|---|---|---|
| text | str | — (requis) |
Helpers
12helpernot a component
Build a timed media track for ``ui.audio`` or ``ui.video``.| Parameter | Type | Default |
|---|---|---|
| src | str | — (requis) |
| srclang | str | — (requis) |
| label | str | — (requis) |
| kind | str | 'captions' |
| default | bool | False |
descripteurnot a component
Build a :class:`Column` — sugar so users can do ``ui.column(...)``| Parameter | Type | Default |
|---|---|---|
| key | str | — (requis) |
| label | str | '' |
| align | str | 'left' |
| width | str | None | None |
| render | Callable[[Any, Any], Any] | None | None |
| sortable | bool | False |
| filter | bool | Sequence[str] | False |
helpernot a component
Describe a graph node for ``ui.diagram``.| Parameter | Type | Default |
|---|---|---|
| key | str | — (requis) |
| label | str | '' |
| icon | str | None | None |
| color | str | None | None |
| badge | str | None | None |
| group | str | None | None |
| width | float | None | None |
helpernot a component
Describe a graph edge for ``ui.diagram``.| Parameter | Type | Default |
|---|---|---|
| source | str | — (requis) |
| target | str | — (requis) |
| label | str | '' |
| style | str | 'solid' |
| color | str | None | None |
fire-and-forgetnot a component
Queue a toast to fire at end-of-request.| Parameter | Type | Default |
|---|---|---|
| message | str | — (requis) |
| variant | str | 'info' |
| title | str | None | None |
| duration_ms | int | 4000 |
| position | str | 'top-right' |
| dismissible | bool | True |
| icon | str | bool | None | None |
helpernot a component
Return a client expression indicating whether an action is in flight.| Parameter | Type | Default |
|---|---|---|
| handler | Callable[..., Any] | None | None |
| after | int | 200 |
iterationnot a component
Iterate over items while preserving stable per-item identity.| Parameter | Type | Default |
|---|---|---|
| items | Iterable[Any] | — (requis) |
| key | str | Callable[[Any], Any] | None | None |
iterationnot a component
Yield each item inside a ``ui.draggable``. See module docstring.| Parameter | Type | Default |
|---|---|---|
| items | Iterable[Any] | — (requis) |
| group | str | None | None |
| key | str | Callable[[Any], Any] | None | None |
| handle | bool | False |
| disabled | Callable[[Any], bool] | None | None |
iterationnot a component
Iterate ``items``, wrapping each body in a client-side ``bz-show``| Parameter | Type | Default |
|---|---|---|
| items | Iterable[Any] | — (requis) |
| query | ClientBinding | — (requis) |
| text | Callable[[Any], Any] | — (requis) |
| key | str | Callable[[Any], Any] | None | None |
| empty | Callable[[], Any] | None | None |
iterationnot a component
Iterate ``items``, showing only the current page's window client-side.| Parameter | Type | Default |
|---|---|---|
| items | Iterable[Any] | — (requis) |
| page | ClientBinding | int | — (requis) |
| per_page | int | — (requis) |
| key | str | Callable[[Any], Any] | None | None |
iterationnot a component
Iterate ``items``, showing only the first ``limit`` client-side.| Parameter | Type | Default |
|---|---|---|
| items | Iterable[Any] | — (requis) |
| limit | ClientBinding | int | — (requis) |
| key | str | Callable[[Any], Any] | None | None |
iterationnot a component
Iterate ``items`` first-``count`` (client-side), then drop a| Parameter | Type | Default |
|---|---|---|
| items | Iterable[Any] | — (requis) |
| count | ClientBinding | — (requis) |
| step | int | 10 |
| label | str | None | None |
| key | str | Callable[[Any], Any] | None | None |