Widgets

The widgets a page or a form is built from: how they work, and every one of them.

In the admin: Design form › Widgets

A widget is anything you can place on a page: an input, a table, a heading, a card, a map, a signature pad. The palette is the widget catalog: what's in it can be placed, and nothing else can. Most widgets are Nuxt UI components under their own names and with Nuxt UI's look; a few are TotalBase's own, such as the Scanner or the Signature.

Each group has its page, with what each widget is for and its whole reference: Form, Inputs, Display, Embeds, Layout, Overlays and Actions. Dashboards have their own widgets, in Dashboards › Widgets.

How a widget works

Every widget follows the same model, Nuxt UI's own:

Part
Props	Its configuration, in the inspector. A prop can be fixed, bound to a variable (an input's value, a table's rows) or computed by a formula (a label, a color, whether it's visible or disabled)
Slots	Areas that hold other widgets: a Card's header, body and footer; each tab's content
Events	What it emits, each wired to a function of the page's Code: a Button's click, an input's change
Methods	What Code can ask of it: open a modal, focus an input, clear a signature

Give a widget a Name to reach it: a formula reads {{controls.selectCustomer.value}}, and Code calls dataview.controls.modalSign.open(). Keep names unique on the page.

Widgets never know tables, functions or workflows. They show and change variables, and the page's code connects them.

Visible, and the rest every widget has

Every widget also has, under Advanced:

Visible: a formula. A hidden widget takes no space and leaves the page. Hidden, still active keeps it on the page unseen, such as a Scanner listening to the whole page.
CSS classes: Tailwind classes of its own. max-sm:h-auto! lets a fixed-height widget grow with its content on a phone; for a Splitter, add max-sm:[&_[data-panel]]:flex-none! and max-sm:[&_[data-panel]]:h-auto! so its panels do too.
Read only, for inputs: shown, never changed.

How to read a reference

The code name (USelectMenu) is what the MCP tools and the Admin API take. U names are Nuxt UI components, with Nuxt UI's own prop names and look; T names are TotalBase's own.
Edits lists the column kinds an input can edit; A form field's input means it can go inside a Form field.
Takes says what a prop can be bound to besides a fixed value: ƒ a formula, a Value or a Resource a variable of that kind, per option a field or a formula per option.
The JSON examples are configurations as add_page_widgets takes them: props fixed, bindings bound, emits wired to functions of the page's Code.

Every widget

Widget	Code	Group	For	Edits
Form	`UForm`	Form	Groups fields: checks the required ones and emits submit with { data } - the fields' values by name.
Form field	`UFormField`	Form	A labelled field around one input: label, help, required.
Input	`UInput`	Inputs	A single-line text field.	text, number, date, time, timestamp
Textarea	`UTextarea`	Inputs	Multi-line text.	text, JSON
Number	`UInputNumber`	Inputs	A number, with increment and decrement buttons.	number
Date	`UInputDate`	Inputs	A date, a date and time, or a date range.	date, timestamp, date range
Time	`UInputTime`	Inputs	A time of day, or a time range.	time, time range
Switch	`USwitch`	Inputs	An on/off value.	boolean
Checkbox	`UCheckbox`	Inputs	A yes/no value.	boolean
Select	`USelect`	Inputs	Pick from a short list - no search.	text, foreign key
Select menu	`USelectMenu`	Inputs	Pick from a list, with search.	text, foreign key
Autocomplete	`UInputMenu`	Inputs	Type to find an option.	text
Radio group	`URadioGroup`	Inputs	Pick one of a few options, all visible.	text
Tags	`UInputTags`	Inputs	A free-form list of short text values.	array
Checkbox group	`UCheckboxGroup`	Inputs	Pick any number of options, all visible.	array
Listbox	`UListbox`	Inputs	A visible, filterable list to pick from.	text
PIN input	`UPinInput`	Inputs	A short code with a fixed number of characters.	text
Slider	`USlider`	Inputs	A number picked along a bounded range.	number
Rating	`UInputRating`	Inputs	A star rating out of a fixed maximum.	number
File upload	`UFileUpload`	Inputs	A single uploaded file or image.	file
Scanner	`TScanner`	Inputs	Reads a QR code, a PDF417 (a DNI) or a barcode - with the device's camera or a USB reader in keyboard mode - and emits what it read.	text
Camera	`TCamera`	Inputs	Takes a photo with the device's camera, crops and compresses it, and stores it as a file - for a file column, like a person's photo.	file
Signature	`TSignature`	Inputs	A pad to sign on with a finger or the mouse - stored as a PNG file, its value the file's id, like a Camera's. Clear starts over; a few ink colors. In a modal behind a button, with the signature shown on the page by a read-only Signature or Camera on the same column.	file
Rich text	`UEditor`	Inputs	A rich text editor - Markdown, HTML or JSON content.	text, JSON
JSON	`TJson`	Inputs	Structured data, edited as a tree.	JSON
Color	`TColorSelect`	Inputs	A palette color or any hex color.	text
Map (Leaflet)	`TLeafletMap`	Inputs	A point picked on an OpenStreetMap map - or the device's own position, with My location.	point
Location	`TGeolocation`	Inputs	The device's position into a point column, no map - a button, the coordinates once captured. Auto takes it when the field opens empty: where a reading was taken.	point
Range	`TRangeInput`	Inputs	A PostgreSQL range - from and to, with the date or number inputs its type takes; empty, no value.	range
Image	`TImage`	Display	An image - one uploaded here, a file of the record () or a URL; with its caption, an icon or a text when there's none, and Clicked to use it as a button.
Heading	`THeading`	Display	A section title.
Text	`TText`	Display	A paragraph - its content can be a formula.
QR code	`TQrCode`	Display	A QR code of a value - drawn in the browser, never sent anywhere: a device's pairing code, a link. Empty, it says so instead of an unreadable code.
Result	`TResult`	Display	A large panel for an outcome at a glance - a color, an icon, a title and a description, with a tone and a vibration - shown by the page's Code with dataview.controls..show({ color, icon, title, description, sound, resetAfter }); it goes back to its waiting state on its own after Reset after seconds. A kiosk's answer to a scan.
Table	`UTable`	Display	Rows of a Resource - its columns are the Resource's fields.
Badge	`UBadge`	Display	A short label.
Alert	`UAlert`	Display	A message with a title and a description.
Separator	`USeparator`	Display	A rule between sections, with an optional label.
Progress	`UProgress`	Display	A progress bar.
Avatar	`UAvatar`	Display	An image, initials or an icon in a circle.
User	`UUser`	Display	A name and a description beside an avatar.
Empty state	`UEmpty`	Display	An icon, a title and a description for "nothing here yet".
Icon	`UIcon`	Display	A single icon.
DataView	`TDataView`	Embeds	Another DataView inside the page - its grid, cards, map, board, calendar or timeline, its New and its record form. Linked by a column: the rows that belong to the page's record (an order's items, a person's history); without: every row its own filter allows.
Dashboard	`TDashboard`	Embeds	A published Dashboard, its variables set from the page - a customer's own figures, for one.
Frame	`TFrame`	Embeds	Another site's page in a sandboxed frame - its URL may take values from the page, e.g. the record's tracking number.
Card	`UCard`	Layout	A framed section with a header and a footer.
Box	`TBox`	Layout	A plain area grouping widgets - no frame of its own: its look is its Style (padding, border, background, radius).
Tabs	`UTabs`	Layout	Sections one at a time, under a tab strip.
Accordion	`UAccordion`	Layout	Sections that expand one (or several) at a time.
Collapsible	`UCollapsible`	Layout	A trigger that shows or hides its content.
Splitter	`USplitter`	Layout	Panels side by side, or one above the other - the viewer drags what's between them; each panel scrolls on its own.
Scroll area	`UScrollArea`	Layout	A box with its own height that scrolls what it holds - its look from the Style tab.
Modal	`UModal`	Overlays	A dialog over the page.
Slideover	`USlideover`	Overlays	A panel sliding in from an edge.
Drawer	`TDrawer`	Overlays	A panel rising from the bottom - TotalBase's own drawer, for working on something with room.
Popover	`UPopover`	Overlays	A small panel anchored to its trigger.
Tooltip	`UTooltip`	Overlays	A hint shown over its content on hover.
Dropdown menu	`UDropdownMenu`	Overlays	A menu of actions under its trigger - each item runs a Code function.
Button	`UButton`	Actions	Runs a Code function on click.

Next steps

Variables: what widgets show and change.
Formulas: props computed from the page.

Overview

The editor of record forms and custom pages: lay out fields and widgets, wire variables and code, preview on a phone.

Form

A form and its fields: labels, help and validation around the inputs.