Static text. One line at a point by default; give it w and h and it wraps at word boundaries inside that box instead, clipping when it runs out of height. Size h for the longest text the label can be given — at font f each line costs f + 3, and the last one fits while it starts at or before h - f. Undersize it and the tail vanishes with nothing to show for it; the engine logs label doesn't fit its w/h to the developer console when that happens.

A layout container: give it a height and a list of children, and the engine places them. Each child keeps its own x and w, and the row assigns its y — vertically centred, with a label measured at the width it will actually wrap to rather than assumed to be one line. A child is never placed above the row's top: one taller than its row starts at the top and clips there instead of bleeding into the row above.

The row draws its own background, which is what makes list striping a property of the row rather than a rectangle somebody has to keep aligned with it. Rows are layout, not widgets: they take no index of their own, so a child's position in children — for overlay.focus, for tab order — is the same number whether or not you later wrap it in one.

Use a row for anything with a left label and controls on the right. The alternative is computing each child's y by hand, and a hand-computed offset is a guess that silently goes wrong the first time a title wraps to a second line.

-- a striped list: only the band differs between rows
for i = 1, ROWS do
    kids[#kids+1] = {
        type = "row", x = 12, w = 400, h = 34,
        style = { bg = (i % 2 == 0) and {255,255,255,12} or nil },
        children = {
            { type = "label",  x = 8,   w = 260, h = 34, text = "" },
            { type = "button", x = 290, w = 100, h = 26, text = "Go" },
        },
    }
end
-- ...and at layout time the panel sets ONE number per row:
row.y = y ; y = y + 34

A filled rectangle. No text, no interaction, and no click area — a press goes straight through to whatever is under it, so it can sit behind other widgets without stealing their clicks. It exists for lists: children draw in the order they are added, so a rect added just before a row's own widgets becomes that row's background band. Striping every other row is what lets the eye carry a long title across to the buttons that belong to it — the engine's own My mods and Download mods lists use it exactly that way.

-- every other row gets a band, added BEFORE that row's widgets
for i = 1, ROWS do
    if i % 2 == 0 then
        kids[#kids+1] = { type = "rect", x = 12, w = 400, h = 30,
                          style = { bg = {255,255,255,12} } }
    end
    kids[#kids+1] = { type = "label",  x = 16, w = 260, h = 30, text = "" }
    kids[#kids+1] = { type = "button", x = 290, w = 100, h = 26, text = "Go" }
end

A clickable button with a hover highlight.

An editable text field. Click it (or call overlay.focus) to focus; the engine handles typing, the blinking caret, and editing keys natively. Read/write its current contents via the text field.

A dropdown. Shows the selected option; clicking opens a list of options (drawn on top of everything), and picking one collapses it.

The same dropdown with more than one answer. The collapsed box names what is chosen — as many names as fit, then +2 for the rest, so the first names are still the answer and the number is only what is missing from it. The open list gives every option a tick box, and clicking one toggles it and leaves the list open — picking several things is the reason this exists, and closing after each would make it a slower "combo". Click outside to close. Paged the same way past 12 options.

A draggable value bar. Click or drag the track to set the value.