Widgets

kadokit maps document nodes to native widgets. This page lists the public widget set documented on this site and the main properties exposed for them.

Common properties

These work on all widgets.

Size and position

Property	Values
`width`, `height`	px, `"N%"`, `"content"`
`min-width`, `min-height`	px
`fill`, `fill-width`, `fill-height`	`#true`
`x`, `y`	px offset
`align`	`center`, `top-left`, … optionally `,x,y` offset

Appearance

Property	Values
`bg-color`, `text-color`, `border-color`, `shadow-color`	`"#RRGGBB"`
`bg-opa`, `opa`, `border-opa`, `shadow-opa`	0 to 255
`radius`	px or `"circle"`
`border-width`, `shadow-width`	px
`border-side`	`none`, `bottom`, `top`, `left`, `right`, `full`

Layout participation

flex-grow, hidden (bindable), clickable, scrollable, floating, ignore-layout, new-track, overflow-visible.

Padding and margin

padding (+ -top/-bottom/-left/-right, -hor/-ver shorthands), margin-top/-bottom/-left/-right, pad-row, pad-column.

Text

text-color, text-font (registered asset or built-in "montserrat_12" through "montserrat_28"), text-align, text-line-space.

Transform

transform-scale (256 = 1×), transform-rotation (0.1° units), transform-pivot-x/y.

Scroll

scrollbar-mode (off/on/active/auto), scroll-dir, scroll-snap-x/y (none/start/end/center), snappable, scroll-one, scroll-momentum, scroll-elastic, scroll-chain (+ -x/-y), scroll-on-focus, scroll-with-arrow, scrollbar-width, scrollbar-radius, scrollbar-bg-opa, scrollbar-bg-color, scrollbar-padding-ver.

Object flags

press-lock, event-bubble, event-trickle, state-trickle, adv-hittest, checkable, ext-click-area.

Other

id="name" for cross-widget references; style "name" child nodes apply named styles (stackable).

Containers

Widget	Description
`hbox`	Horizontal flex container
`vbox`	Vertical flex container
`box`	Plain container, no flex direction
`grid`	Grid container with `columns`/`rows` tracks (px, `fr`, `content`), children placed with `grid-cell "col,row[,col-span,row-span]"`; fixed-cell grids via `cell-width`/`cell-height`

Display widgets

`label`

label "Hello World"
label { text bind="app.message" }

Supports long-mode "wrap" for wrapping text.

`image`

image { src "my_icon" }              // registered asset
image { src "assets/photo.png" }     // file path (desktop builds)

Property	Description
`src`	Asset name or file path (PNG/JPG/BMP/SVG)
`image-opa`	Image opacity
`scale-x`, `scale-y`	Per-axis scale (256 = 100%)
`offset-x`, `offset-y`	Content offset (tiling/panning)
`recolor`, `recolor-opa`	Tint color and strength
`antialias`	Smooth edges on rotation/scale
`inner-align`	`top-left`, `center`, `stretch`, `contain`, `cover`, `tile`, …
`blend-mode`	`normal`, `additive`, `subtractive`, `multiply`, `difference`

Also: led (indicator), spinner (loading), line (line drawing).

Input widgets

`button`

button {
    label "Click me"
    on-click { set "count" expr="app.count + 1" }
}

`touch-area`

Invisible input surface. It is clickable by default, transparent, no border, not scrollable, not focusable (opt-in with focusable #true). Use instead of a transparent box for pure input regions like swipe zones.

`slider`, `arc`, `bar`

Value widgets with min/max range; value supports bind= and model=. arc adds gauge styling: arc-rotation, arc-bg-start/end, arc-color, arc-width, indicator-*, knob-* properties. bar adds indicator-color and indicator-opa.

arc {
    min 0; max 100
    value bind="app.speed" spring="snappy"
    width 80; height 80
}

`switch`, `checkbox`

checked supports bind= and model=.

`dropdown`

dropdown {
    options "English\nFrench\nGerman"
    selected model="app.language"
}

Plus symbol (custom arrow image) and list-* styling properties for the open list.

`roller`

roller {
    options "0\n1\n2\n3\n4\n5\n6\n7\n8\n9"
    visible-rows 3
    selected model="app.digit"
    anim-duration 200
    roller-mode "infinite"
}

Plus selected-bg-color/-opa, selected-text-color/-font.

`textarea`

textarea {
    text model="app.note"
    placeholder "Type here..."
    one-line #false
    password-mode #false
}

`spinbox`

Numeric input with increment/decrement: min, max.

Data display

`chart`

chart {
    chart-type "line"                 // line, bar, scatter
    range-y-min 0; range-y-max 100
    point-count 10; div-lines-h 5; div-lines-v 4
    line-color "#55FFEB"; line-width 2
    series-values "20,22,21,24,26,25,23,22,24,22"
}

Plus update-mode ("shift", "circular"). Also: table, scale.

Advanced widgets

Supported but less commonly needed: keyboard, btnmatrix, canvas, calendar, list (prefer list-view for large data), menu, tabview, tileview, window, msgbox, imagebutton, animimage, spangroup.

Page indicator

hbox {
    scroll-snap-x "center"
    // ... pages ...
    page-indicator #true
}

Adds dot indicators tracking the scroll position of a snapping container.

Language