XML tag reference

The compiler accepts exactly these 57 tag names, plus any custom tag you register with registerWidget. Any other name is a compile error (unknown component type).

Static attributes are read once, when the widget is built (the factory reads them). Settable attributes go through a setter, so they work both as plain values and as bind: expressions. A static-only attribute given as bind: is ignored.

Common attributes

Every tag takes these (plus name, or id as an alias, which names the component):

x, y, enabled, visible, layout, spacing, gridColumns, flow-row-gap, variant, padding, margin, zIndex, align, justify, minWidth, minHeight, maxWidth, maxHeight, fill, grow, width, height.

See Attributes and values for what each one does.

Tags

Tag	Static (build time)	Settable (also bindable)	Events (on:)
Panel		alignItems, background, border, cornerRadius, justifyContent, size	click
Label	font	align, bold, color, fontSize, italic, size, text, wrapWidth	click
Button	font, fontSize	autoSize, size, text	click
IconButton		icon, size	click
Toggle		value	change, click
Checkbox	font, fontSize	checked, text	change, click
TextInput	fontSize	maxLength, placeholder, size, value, width	change, submit, blur, click
TextArea	fontSize	maxLength, rows, size, value	click
Slider		orientation, range, size, step, value	change, click
ScrollBar		orientation, size, value	click
ProgressBar	showLabel	fillColor, range, size, value	click
MeterBar		range, size, value	click
List		itemHeight, selected, size	change, select, click
TileList	tileHeight, tileWidth	columns, selected, size	change, select, click
TreeList	itemHeight	leafOnlySelection, selectable, size	click
TabBar	fontSize	overflowMode, selected, size	change, click
ScrollPanel		background, scrollX, scrollY, size	click
Window	font, fontSize	closeable, enterResult, escResult, minHeight, minWidth, modal, movable, resizable, size, title	close, click
RichText	fontSize	align, color, headingScale, markup, wrapWidth	linkClick, click
Radio		columns, selected, verticalFirst	change, click
Component			click
NumberStepper	fontSize	decimals, max, min, pageStep, size, step, value	change, click
ToggleButtonBar	buttons, fontSize	selected, size	change, click
AnchorLayout		background, border, cornerRadius, size	click
TwoColumnLayout		background, border, columnRatio, gap, leftAlign, leftWidth, rightAlign, rowSpacing, size	click
Tab			click
Spacer		size	click
Select	fontSize	options, selected, size	change, click
OptionRotator	fontSize	options, selected, size, wrap	change, click
RadioButton			click
DragHandle		axis, gripStyle, max, min, size	click
InputField	fontSize	label, labelPosition, maxLength, placeholder, required, size, validationMessage, validationState, value, width	change, submit, blur, click
SearchBox	fontSize	debounceMs, minQueryLength, placeholder, showClearButton, showSearchIcon, size, value, width	change, submit, clear, blur, click
Badge	font, fontSize	count, dotMode, kind, maxCount, size, text	click
StatWeb	fontSize	editable, fillEnabled, size	change, click
NavDrawer		anchor, pinned, size, width	close, click
ImageCropper		showGrid, size	crop, click
ColorPicker	fontSize	color, defaultMode, showAlpha, size	change, commit, click
ToolBar		orientation, overflowMode, size, wrap	click
SortableTreeList	fontSize	allowCrossLevel, allowReparent, selected, size	change, select, reorder, click
Image		alpha, atlas, cornerRadius, scaleMode, size, src	click
AnimatedImage		atlas, cornerRadius, fps, gif, playMode, size	click
CalendarSelector	font, fontSize	date, popupMode, size	click
TimePicker	fontSize	format, showSeconds, size, time	change, click
KeybindInput	font, fontSize	size	capture, click
MaskedInput	fontSize	mask, maskPlaceholder, maxLength, placeholder, rawValue, size, value, width	change, submit, blur, click
SortableList	itemHeight	dragEnabled, handleSide, keyboardReorderEnabled, selected, showHandles, size	change, select, reorder, click
Tag	font, fontSize	kind, removable, selectable, selected, size, text	remove, toggle, click
TagBar	font, fontSize	placeholder, size	click
Accordion	fontSize	animated, exclusive, expanded, size	toggle, click
DataTable	headerHeight, onSortScroll, rowClickSelects, rowHeight, scrollMode, selectionMode, showColumnDividers, showHeader, showRowDividers, showScrollBar, zebraStriping		click
Column			click
Section			click
Tooltip		anchor, clampToScreen, fadeIn, fadeOut, hideDelay, showDelay, size, text	click
Popover	title	contentSize, preferredSide, showCloseButton, size	close, open, click
GradientEditor	fontSize	showModeSelector, size	change, click
MenuBar	fontSize	size	click

click on a tag other than Button and IconButton is wired to the component's activate callback. Any other event name that the tag does not handle goes to Component.setOnEvent(name, handler), so a custom widget can fire it.

Pseudo-elements

• <Column>: Only inside <DataTable>: adds a column. Attributes: key, header, tooltip, weight, sortable, searchable, fixedWidth, sortType (numeric, custom), textAlign (center, right), clipMode (mask).
• <RadioButton>: Only inside <Radio>: adds one option. Attribute: label.
• <Section>: Only inside <Accordion>: adds a section whose children are stacked in a vbox panel. Attributes: id, label.
• <Tab>: Inside <TabBar>: adds a tab page. Attribute: label, plus any common attribute (layout, spacing, padding...) applied to the page. Its children go into the page.
• <Theme>: a JSON theme patch, not a component. See Variants and inline themes.

Configuring the rest in code

An attribute that is not in a tag's row has no effect in XML. Give the element a name and configure it in code after instantiate (for example list items, menu entries and table rows, which have no XML form).