UI tags

Every ui:* tag the parser knows and every attribute it reads — read from the UI parser's code, so an attribute that is not here is not read. The Guide shows them at work: Building a UI.

Layout attributes

Every tag below that says so also takes these (UI-2 for the responsive ones):

Attribute	Type	Required	Default	Values
gap	string
padding	string
margin	string
align	string
justify	string
width	string
height	string
background	string
color	string
border	string
id	string
class	string
visible	string
grow	string
stack-below	string			sm, md, lg
hide-below	string			sm, md, lg
hide-above	string			sm, md, lg

Core

Drawn with the same meaning by the browser, the console and the desktop (UI-7).

ui:window

Attribute	Type	Required	Default	Values
title	string

Also takes the layout attributes, child elements.

Specified by: UI-4 · UI-7

ui:hbox

Takes the layout attributes, child elements.

Specified by: UI-2 · UI-7

ui:vbox

Takes the layout attributes, child elements.

Specified by: UI-7

ui:panel

Attribute	Type	Required	Default	Values
title	string
collapsible	boolean		false

Also takes the layout attributes, child elements.

Specified by: UI-7

ui:tabpanel

Takes the layout attributes, child elements.

Specified by: UI-7

ui:tab

Attribute	Type	Required	Default	Values
title	string

Also takes the layout attributes, child elements.

Specified by: UI-7

ui:grid

Attribute	Type	Required	Default	Values
columns	string

Also takes the layout attributes, child elements.

Specified by: UI-2 · UI-7

ui:section

Attribute	Type	Required	Default	Values
title	string
expanded	boolean		false

Also takes the layout attributes, child elements.

Specified by: UI-7

ui:form

Attribute	Type	Required	Default	Values
on-submit	string
with	string
rules	string			on, off
values	string
submit	string
validation	string		both
error-display	string		inline
novalidate	boolean		false

Also takes the layout attributes, child elements, ui:validator children.

Specified by: UI-1 · UI-7 · UI-9 · UI-10 · UI-12 · UI-14

ui:formitem

Attribute	Type	Required	Default	Values
label	string

Also takes the layout attributes, child elements.

Specified by: UI-7

ui:spacer

Attribute	Type	Required	Default	Values
size	string

Also takes the layout attributes.

Specified by: UI-7

ui:scrollbox

Takes the layout attributes, child elements.

Specified by: UI-7

ui:text

Attribute	Type	Required	Default	Values
size	string
weight	string

Also takes the layout attributes, its text.

Specified by: UI-7

ui:button

Attribute	Type	Required	Default	Values
on-click	string
with	string
variant	string
disabled	boolean		false

Also takes the layout attributes, its text.

Specified by: UI-1 · UI-5 · UI-7

ui:input

Attribute	Type	Required	Default	Values
bind	string
value	string
search	string
delay	number
placeholder	string
type	string		text
rows	number
accept	string
on-change	string
on-submit	string
min	string
max	string
pattern	string
error-message	string
minlength	number
maxlength	number
validators	string
required	boolean		false

Also takes the layout attributes.

Specified by: UI-1 · UI-6 · UI-7 · UI-12 · UI-14

ui:checkbox

Attribute	Type	Required	Default	Values
bind	string
checked	string
label	string

Also takes the layout attributes.

Specified by: UI-6 · UI-7

ui:radio

Attribute	Type	Required	Default	Values
bind	string
value	string
options	string

Also takes the layout attributes.

Specified by: UI-6 · UI-7 · UI-9

ui:switch

Attribute	Type	Required	Default	Values
bind	string
checked	string
label	string

Also takes the layout attributes.

Specified by: UI-6 · UI-7

ui:select

Attribute	Type	Required	Default	Values
bind	string
value	string
options	string
source	string

Also takes the layout attributes, child elements.

Specified by: UI-6 · UI-7 · UI-9

ui:table

Attribute	Type	Required	Default	Values
source	string
as	string
edit	string
datasource	string
sort	boolean		false

Also takes the layout attributes, child elements.

Specified by: DEV-3 · LOOP-6 · UI-5 · UI-7 · UI-13

ui:column

Attribute	Type	Required	Default	Values
key	string
label	string
width	string
align	string
edit	boolean		true

Also takes child elements.

Specified by: DEV-3 · UI-5 · UI-7

ui:pager

Attribute	Type	Required	Default	Values
for	string	yes
window	number		2
param	string		page

Also takes the layout attributes.

Specified by: UI-7 · UI-11

ui:history

Attribute	Type	Required	Default	Values
table	string	yes
key	string	yes
datasource	string	yes
limit	number		50

Also takes the layout attributes.

Specified by: DB-11 · UI-7

ui:stream

Attribute	Type	Required	Default	Values
for	string	yes

Also takes the layout attributes.

Specified by: IA-7 · UI-7

ui:list

Attribute	Type	Required	Default	Values
source	string
as	string

Also takes the layout attributes, child elements.

Specified by: DEV-3 · UI-5 · UI-7

ui:item

Takes the layout attributes, child elements.

Specified by: UI-7

ui:image

Attribute	Type	Required	Default	Values
src	string
alt	string

Also takes the layout attributes.

Specified by: UI-7

ui:link

Attribute	Type	Required	Default	Values
to	string
external	boolean		false

Also takes the layout attributes, its text.

Specified by: UI-7

ui:progress

Attribute	Type	Required	Default	Values
value	string
max	string

Also takes the layout attributes.

Specified by: UI-7

ui:option

Attribute	Type	Required	Default	Values
value	string
on-click	string
label	string

Also takes its text.

Specified by: UI-7

ui:header

Attribute	Type	Required	Default	Values
title	string

Also takes the layout attributes, its text, child elements.

Specified by: UI-7

ui:footer

Takes the layout attributes, its text, child elements.

Specified by: UI-7

ui:rule

No attributes, no content.

Specified by: UI-7

ui:badge

Attribute	Type	Required	Default	Values
variant	string
color	string

Also takes the layout attributes, its text.

Specified by: UI-7

ui:card

Attribute	Type	Required	Default	Values
title	string
subtitle	string
image	string
variant	string

Also takes the layout attributes, child elements.

Specified by: UI-7

ui:card-header

Takes the layout attributes, child elements.

Specified by: UI-1 · UI-7

ui:card-body

Takes the layout attributes, child elements.

Specified by: UI-7

ui:card-footer

Takes the layout attributes, child elements.

Specified by: UI-7

ui:alert

Attribute	Type	Required	Default	Values
title	string
variant	string		info
icon	string
dismissible	boolean		false

Also takes the layout attributes, its text, child elements.

Specified by: UI-7

Experimental

Browser only, with no stability promise: the console says it does not draw them (UI-7).

ui:accordion

Takes the layout attributes, child elements.

ui:dividedbox

Attribute	Type	Required	Default	Values
direction	string		horizontal

Also takes the layout attributes, child elements.

ui:tree

Attribute	Type	Required	Default	Values
source	string
on-select	string

Also takes the layout attributes.

ui:menu

Takes the layout attributes, child elements.

ui:log

Attribute	Type	Required	Default	Values
auto-scroll	boolean		true
max-lines	number

Also takes the layout attributes.

ui:markdown

Takes the layout attributes, its text.

ui:loading

Attribute	Type	Required	Default	Values
text	string

Also takes the layout attributes.

ui:validator

Inside: ui:form

Attribute	Type	Required	Default	Values
name	string
field	string
type	string
pattern	string
match	string
min	string
max	string
expression	string
server-expression	string
minlength	number
maxlength	number
message	string
trigger	string		submit

ui:animate

Attribute	Type	Required	Default	Values
animate	string
transition	string
type	string
duration	string
delay	string
easing	string
repeat	string
trigger	string
direction	string

Also takes the layout attributes, child elements.

ui:modal

Attribute	Type	Required	Default	Values
title	string
size	string
modal-id	string
id	string
open	boolean		false
closable	boolean		true

Also takes the layout attributes, child elements.

ui:chart

Attribute	Type	Required	Default	Values
type	string		bar
source	string
labels	string
values	string
title	string
colors	string

Also takes the layout attributes.

ui:avatar

Attribute	Type	Required	Default	Values
src	string
name	string
size	string
shape	string		circle
status	string

Also takes the layout attributes.

ui:tooltip

Attribute	Type	Required	Default	Values
position	string		top
content	string

Also takes the layout attributes, its text, child elements.

ui:dropdown

Attribute	Type	Required	Default	Values
label	string
trigger	string		click
align	string		left

Also takes the layout attributes, child elements.

ui:breadcrumb

Attribute	Type	Required	Default	Values
separator	string		/

Also takes the layout attributes, child elements.

ui:breadcrumb-item

Attribute	Type	Required	Default	Values
to	string
icon	string
label	string

Also takes its text.

ui:pagination

Attribute	Type	Required	Default	Values
total	string
page-size	string		10
current	string		1
bind	string
on-change	string
show-total	boolean		false
show-jump	boolean		false

Also takes the layout attributes.

ui:skeleton

Attribute	Type	Required	Default	Values
variant	string		text
lines	number		1
animated	boolean		true

Also takes the layout attributes.

ui:toast

Attribute	Type	Required	Default	Values
variant	string		info
position	string		top-right
icon	string
title	string
show	string
on-close	string
duration	number		3000
dismissible	boolean		true
message	string

Also takes the layout attributes, its text.

ui:toast-container

Attribute	Type	Required	Default	Values
position	string		top-right
max-toasts	number		5

Also takes the layout attributes.

ui:carousel

Attribute	Type	Required	Default	Values
animation	string		slide
bind	string
on-change	string
auto-play	boolean		false
interval	number		5000
show-indicators	boolean		true
show-arrows	boolean		true
loop	boolean		true
current	number		0

Also takes the layout attributes, child elements.

ui:slide

Takes the layout attributes, child elements.

ui:stepper

Attribute	Type	Required	Default	Values
orientation	string		horizontal
bind	string
on-change	string
on-complete	string
current	number		0
linear	boolean		true
show-labels	boolean		true
clickable	boolean		false

Also takes the layout attributes, child elements.

ui:step

Attribute	Type	Required	Default	Values
title	string
description	string
icon	string
completed	string
error	string
optional	boolean		false

Also takes the layout attributes, child elements.

ui:calendar

Attribute	Type	Required	Default	Values
mode	string		single
value	string
bind	string
min-date	string
max-date	string
disabled-dates	string
disabled-days	string
locale	string		en
on-change	string
on-month-change	string
show-week-numbers	boolean		false
first-day-of-week	number		0
inline	boolean		true

Also takes the layout attributes.

ui:date-picker

Attribute	Type	Required	Default	Values
value	string
bind	string
placeholder	string		Select date
format	string		YYYY-MM-DD
min-date	string
max-date	string
on-change	string
clearable	boolean		true
disabled	boolean		false
required	boolean		false

Also takes the layout attributes.

ui:theme

Attribute	Type	Required	Default	Values
name	string
preset	string		light
auto-switch	boolean		false

Also takes ui:color children.

ui:color

Inside: ui:theme

Attribute	Type	Required	Default	Values
name	string
value	string