Rows

Input dialogs and drawers are both built from the same list of rows. Anything on this page works in either one.

Rows come in two kinds:

Editable rows ask the player for a value: input, textarea, number, slider, checkbox, select, multi-select, date, date-range, time, color. They are documented on the Input page.
Display rows show content. They are listed below.

Display rows still occupy a position in the returned values array, where they return nil. Give the rows you care about an id and read byId instead of counting indexes.

title

A section heading inside the form.

Field	Type	Description
`label`	`string`	The heading.
`description`	`string?`	Muted line under it.
`icon`	`string?`	Icon before the heading.
`iconColor`	`string?`	Hex colour for the icon.

{ type = 'title', label = 'The property', icon = 'house',
  description = 'Review the listing before signing.' }

callout

A coloured notice. Text colour is computed from the accent so it stays readable on any theme.

Field	Type	Description
`variant`	`string?`	`info` (default), `success`, `warning`, `error`.
`label`	`string?`	Callout title.
`description`	`string?`	Body text.
`icon`	`string?`	Overrides the icon implied by `variant`.
`colorScheme`	`string?`	Custom accent hex, ignoring `variant`'s colour.

All fields are optional: a callout with only a description is a one-line note.

{ type = 'callout', variant = 'warning', label = 'This action is permanent',
  description = 'Once sold, the property cannot be recovered.' }

{ type = 'callout', colorScheme = '#6c63ff', icon = 'wand-magic-sparkles',
  label = 'Custom colour' }

image

A framed picture with an optional caption bar.

Field	Type	Description
`src`	`string`	Image source: an external URL, or `nui://yourresource/path/file.png` for a local file.
`footer`	`string?`	Caption under the picture. Doubles as the alt text.

{ type = 'image', src = ('nui://%s/images/house.png'):format(GetCurrentResourceName()),
  footer = 'Vinewood Hills, 3 bedrooms.' }

markdown

Rendered markdown: headings, bold, italics, lists, inline code and links.

Field	Type	Description
`content`	`string`	The markdown source.

{ type = 'markdown', content = table.concat({
    '## Terms',
    'You agree to pay **$4,500/week** in taxes.',
    '- Utilities are included',
    '- Furniture is *not* included',
}, '\n') }

In a drawer, a bare string in rows becomes a markdown row, so the above can be written as just the string.

progress

A labelled bar. Handy for anything with a level, a percentage or an x of y.

Field	Type	Description
`label`	`string?`	Header on the left.
`value`	`string\|number?`	Text on the right, e.g. `'68%'` or `'2/5'`. Cosmetic: it does not have to match `progress`.
`progress`	`number`	Fill, 0–100. Clamped.
`colorScheme`	`string?`	Bar colour. Theme accent when omitted.

{ type = 'progress', label = 'Bank security', value = '68%', progress = 68, colorScheme = '#dd3939' }

divider

A horizontal rule, optionally with a label sitting in the middle of it.

Field	Type	Description
`label`	`string?`	Text in the middle. Without it, a plain rule.

{ type = 'divider', label = 'Details' }

keyvalue

A list of label → value lines. For facts, not input.

Field	Type	Description
`items`	`table[]`	`{ label, value, icon?, iconColor?, colorScheme?, copy? }` per line. `colorScheme` tints the value; `copy` adds a copy button beside it.

{ type = 'keyvalue', items = {
    { label = 'Owner', value = 'J. Fury' },
    { label = 'Plate', value = 'SULT4N', icon = 'car' },
    { label = 'Taxes', value = '$1,200', colorScheme = '#dd3939' },
} }

stats

A two-column grid of big numbers with captions.

Field	Type	Description
`items`	`table[]`	`{ label, value, icon?, iconColor?, colorScheme? }` per card. `colorScheme` tints the value.

{ type = 'stats', items = {
    { label = 'Price',     value = '$92K', icon = 'sack-dollar' },
    { label = 'Top speed', value = '218',  icon = 'gauge-high', colorScheme = '#61fd59' },
    { label = 'Seats',     value = 4 },
} }

timeline

Phases with an explicit state each. Unlike Objectives, every step's state is set by you.

Field	Type	Description
`items`	`table[]`	`{ label, state?, description?, colorScheme? }` per step.

state is done, current or pending (the default). description shows under the label.

{ type = 'timeline', items = {
    { label = 'Order confirmed',  state = 'done' },
    { label = 'Parts at the shop', state = 'done' },
    { label = 'Turbo install',    state = 'current', description = 'About 20 minutes left.' },
    { label = 'Delivery',         state = 'pending' },
} }

buttons

A row of clickable buttons. Drawer only: buttons report through the drawer's onAction, so they do nothing in an input dialog.

Field	Type	Description
`items`	`table[]`	`{ id, label, icon?, colorScheme? }` per button.

id is what arrives in onAction.

{ type = 'buttons', items = {
    { id = 'gps',  label = 'Mark on GPS', icon = 'location-dot' },
    { id = 'call', label = 'Call the shop', icon = 'phone', colorScheme = '#61fd59' },
} }

See Drawer › Buttons and actions.

html

Raw HTML, inserted as-is.

Field	Type	Description
`content`	`string`	The HTML.

{ type = 'html', content = '<div style="text-align:center;opacity:.45">Encrypted document</div>' }

warning

html is not sanitised. Only ever pass strings your own resource built. Never interpolate player input (names, plates, chat, anything typed by a person) into it. Use markdown for that.

Live updates

In a drawer, rows with an id can be patched while the panel is open. See Drawer › Live updates.

On this page