Widgets
Inputs
Every input: text, numbers, dates, choices, files, maps and the device's camera, position and signature.
In the admin: Design form › Widgets › Inputs
| Widget | For |
|---|---|
| Input, Textarea, Rich text | text; Rich text for formatted text |
| Number, Slider, Rating | numbers |
| Date, Time, Range | dates, times and PostgreSQL ranges (daterange, numrange…) |
| Switch, Checkbox | true or false |
| Select, Select menu, Autocomplete, Radio group, Listbox, Checkbox group | choosing among options: a CHECK list's values, or rows of another table |
| Tags, PIN input, Color, JSON | arrays, codes, a palette color, a jsonb value |
| File upload | a file, stored in Files |
| Map (Leaflet) | a point on a map |
| Location, Camera, Signature, Scanner | the device itself |
When a column is placed, its input is chosen from its type and constraints: a CHECK list a select, a foreign key a Select menu over the referenced table, a boolean a switch, a point a map. A column only offers the inputs that can edit its kind of value.
The inputs that use the device's camera and position need HTTPS (or localhost): without it, the browser refuses them and the widget says why. The Camera and the Scanner then offer to use a photo instead.
Input
UInput · Nuxt UI
A single-line text field.
Edits: text, number, date, time, timestamp columns · A form field's input
Props
| Prop | Code | Takes | |
|---|---|---|---|
| Value | modelValue | a Value | A Value variable it reads and writes - or a formula (the link): shown read only, written nowhere, e.g. . |
| Type | type | text, email, password, tel, url, search, number, date, time, datetime-local, month, week, color | The browser's own input for it - datetime-local shows a timestamp with time zone in the viewer's. |
| Color | color | ƒ | One of the theme's colors - primary, error, success... |
| Variant | variant | ƒ; outline, soft, subtle, ghost, none | Its style: filled, outlined, soft... |
| Size | size | xs, sm, md, lg, xl | From xs to xl - Default is md. |
| Icon | icon | ƒ | An icon at its start. |
| Trailing icon | trailingIcon | ƒ | An icon at its end. |
| Disabled | disabled | ƒ | Shown greyed out - it can't be used. |
| Highlight | highlight | ƒ | Outlined in its color, to draw attention. |
Events
| Event | Code | Receives |
|---|---|---|
| Value changed | update:modelValue | { value } |
| Change | change | { value } |
| Blur | blur | { value } |
Methods
Called from Code as dataview.controls.<name>.<method>().
| Method | Code | |
|---|---|---|
| Focus | focus() | Puts the cursor in it |
Textarea
UTextarea · Nuxt UI
Multi-line text.
Edits: text, JSON columns · A form field's input · Height: rows of 40 px, or Fill height
Props
| Prop | Code | Takes | |
|---|---|---|---|
| Value | modelValue | a Value | A Value variable it reads and writes - or a formula (the link): shown read only, written nowhere, e.g. . |
| Grow with its text | autoresize | Gets taller as the text grows, instead of scrolling. | |
| Color | color | ƒ | One of the theme's colors - primary, error, success... |
| Variant | variant | ƒ; outline, soft, subtle, ghost, none | Its style: filled, outlined, soft... |
| Size | size | xs, sm, md, lg, xl | From xs to xl - Default is md. |
| Icon | icon | ƒ | An icon at its start. |
| Disabled | disabled | ƒ | Shown greyed out - it can't be used. |
| Highlight | highlight | ƒ | Outlined in its color, to draw attention. |
Also: Rows rows, Max rows maxrows.
Events
| Event | Code | Receives |
|---|---|---|
| Value changed | update:modelValue | { value } |
| Change | change | { value } |
| Blur | blur | { value } |
Methods
Called from Code as dataview.controls.<name>.<method>().
| Method | Code | |
|---|---|---|
| Focus | focus() | Puts the cursor in it |
Number
UInputNumber · Nuxt UI
A number, with increment and decrement buttons.
Edits: number columns · A form field's input
Props
| Prop | Code | Takes | |
|---|---|---|---|
| Value | modelValue | a Value | A Value variable it reads and writes - or a formula (the link): shown read only, written nowhere, e.g. . |
| Orientation | orientation | horizontal, vertical | Laid out in a row or in a column. |
| Color | color | ƒ | One of the theme's colors - primary, error, success... |
| Variant | variant | ƒ; outline, soft, subtle, ghost, none | Its style: filled, outlined, soft... |
| Size | size | xs, sm, md, lg, xl | From xs to xl - Default is md. |
| Disabled | disabled | ƒ | Shown greyed out - it can't be used. |
| Highlight | highlight | ƒ | Outlined in its color, to draw attention. |
Also: Min min (ƒ), Max max (ƒ), Step step.
Events
| Event | Code | Receives |
|---|---|---|
| Value changed | update:modelValue | { value } |
| Change | change | { value } |
| Blur | blur | { value } |
Methods
Called from Code as dataview.controls.<name>.<method>().
| Method | Code | |
|---|---|---|
| Focus | focus() | Puts the cursor in it |
Date
UInputDate · Nuxt UI
A date, a date and time, or a date range.
Edits: date, timestamp, date range columns · A form field's input
Props
| Prop | Code | Takes | |
|---|---|---|---|
| Value | modelValue | a Value | A Value variable it reads and writes - or a formula (the link): shown read only, written nowhere, e.g. . |
| Date range | range | Picks a start and an end date. | |
| Precision | granularity | day, hour, minute, second | A timestamp's: to the minute when unset. A date column is always to the day. |
| Calendar | calendar | default true | A calendar button beside the field - its days stop at the column's CHECK bounds; a timestamp's time below it. Typing stays. |
| Color | color | ƒ | One of the theme's colors - primary, error, success... |
| Variant | variant | ƒ; outline, soft, subtle, ghost, none | Its style: filled, outlined, soft... |
| Size | size | xs, sm, md, lg, xl | From xs to xl - Default is md. |
| Icon | icon | ƒ | An icon at its start. |
| Disabled | disabled | ƒ | Shown greyed out - it can't be used. |
| Highlight | highlight | ƒ | Outlined in its color, to draw attention. |
Events
| Event | Code | Receives |
|---|---|---|
| Value changed | update:modelValue | { value } |
| Change | change | { value } |
| Blur | blur | { value } |
| Focus | focus | { value } |
Methods
Called from Code as dataview.controls.<name>.<method>().
| Method | Code | |
|---|---|---|
| Focus | focus() | Puts the cursor in it |
Time
UInputTime · Nuxt UI
A time of day, or a time range.
Edits: time, time range columns · A form field's input
Props
| Prop | Code | Takes | |
|---|---|---|---|
| Value | modelValue | a Value | A Value variable it reads and writes - or a formula (the link): shown read only, written nowhere, e.g. . |
| Time range | range | Picks a start and an end time. | |
| Color | color | ƒ | One of the theme's colors - primary, error, success... |
| Variant | variant | ƒ; outline, soft, subtle, ghost, none | Its style: filled, outlined, soft... |
| Size | size | xs, sm, md, lg, xl | From xs to xl - Default is md. |
| Icon | icon | ƒ | An icon at its start. |
| Disabled | disabled | ƒ | Shown greyed out - it can't be used. |
| Highlight | highlight | ƒ | Outlined in its color, to draw attention. |
Events
| Event | Code | Receives |
|---|---|---|
| Value changed | update:modelValue | { value } |
| Change | change | { value } |
| Blur | blur | { value } |
| Focus | focus | { value } |
Methods
Called from Code as dataview.controls.<name>.<method>().
| Method | Code | |
|---|---|---|
| Focus | focus() | Puts the cursor in it |
Switch
USwitch · Nuxt UI
An on/off value.
Edits: boolean columns · A form field's input
Props
| Prop | Code | Takes | |
|---|---|---|---|
| Value | modelValue | a Value | A Value variable it reads and writes - or a formula (the link): shown read only, written nowhere, e.g. . |
| Color | color | ƒ | One of the theme's colors - primary, error, success... |
| Size | size | xs, sm, md, lg, xl | From xs to xl - Default is md. |
| Loading | loading | ƒ | Shows a spinner while something is busy. |
| Disabled | disabled | ƒ | Shown greyed out - it can't be used. |
Also: Label label (ƒ), Description description (ƒ).
Events
| Event | Code | Receives |
|---|---|---|
| Change | change | { value } |
Checkbox
UCheckbox · Nuxt UI
A yes/no value.
Edits: boolean columns · A form field's input
Props
| Prop | Code | Takes | |
|---|---|---|---|
| Value | modelValue | a Value | A Value variable it reads and writes - or a formula (the link): shown read only, written nowhere, e.g. . |
| Color | color | ƒ | One of the theme's colors - primary, error, success... |
| Variant | variant | ƒ; list, card | Its style: filled, outlined, soft... |
| Size | size | xs, sm, md, lg, xl | From xs to xl - Default is md. |
| Disabled | disabled | ƒ | Shown greyed out - it can't be used. |
Also: Label label (ƒ), Description description (ƒ).
Events
| Event | Code | Receives |
|---|---|---|
| Change | change | { value } |
Select
USelect · Nuxt UI
Pick from a short list - no search.
Edits: text, foreign key columns · A form field's input · When placed: asks for its data source
Props
| Prop | Code | Takes | |
|---|---|---|---|
| Value | modelValue | a Value | A Value variable it reads and writes - or a formula (the link): shown read only, written nowhere, e.g. . |
| Value field | valueKey | The field of each option that is stored - its primary key by default. | |
| Label field | labelKey | per option | The field shown for each option - or a formula over its fields, e.g. + " - " + ; its Resource must read them. |
| Description field | descriptionKey | per option | Shown muted beneath the label - a field, or a formula over its fields. |
| Icon field | iconKey | per option | Each option's icon, e.g. i-lucide-banknote - a field, or a formula over its fields. |
| Disabled field | disabledKey | per option | Turns an option off - a true/false field, or a formula over its fields and the page: docs/06.dataviews/06.design-form/02.widgets/03.inputs.md == 5 && !. |
| Multiple | multiple | Picks several options - its value is a list. | |
| Color | color | ƒ | One of the theme's colors - primary, error, success... |
| Variant | variant | ƒ; outline, soft, subtle, ghost, none | Its style: filled, outlined, soft... |
| Size | size | xs, sm, md, lg, xl | From xs to xl - Default is md. |
| Icon | icon | ƒ | An icon at its start. |
| Disabled | disabled | ƒ | Shown greyed out - it can't be used. |
| Highlight | highlight | ƒ | Outlined in its color, to draw attention. |
Also: Options items (a Resource).
Events
| Event | Code | Receives |
|---|---|---|
| Value changed | update:modelValue | { value, item } - item is the chosen option's whole row |
| Change | change | { value } |
| Blur | blur | { value } |
| Focus | focus | { value } |
Methods
Called from Code as dataview.controls.<name>.<method>().
| Method | Code | |
|---|---|---|
| Focus | focus() | Puts the cursor in it |
Select menu
Over another table's rows (a work order's site), a Select menu holds one page of them and searches the server as you type, so it works with thousands of rows. In the inspector's Search section:
- Create from search: typing a value that isn't listed offers Create "…", which creates the row in the other table, as the user and under their permission to create there, and picks it.
- Search window: a 🔍 beside the select opens the rows as a searchable, paged table, for long lists.
USelectMenu · Nuxt UI
Pick from a list, with search.
Edits: text, foreign key columns · A form field's input · When placed: asks for its data source
Props
| Prop | Code | Takes | |
|---|---|---|---|
| Value | modelValue | a Value | A Value variable it reads and writes - or a formula (the link): shown read only, written nowhere, e.g. . |
| Value field | valueKey | The field of each option that is stored - its primary key by default. | |
| Label field | labelKey | per option | The field shown for each option - or a formula over its fields, e.g. + " - " + ; its Resource must read them. |
| Description field | descriptionKey | per option | Shown muted beneath the label - a field, or a formula over its fields. |
| Icon field | iconKey | per option | Each option's icon, e.g. i-lucide-banknote - a field, or a formula over its fields. |
| Disabled field | disabledKey | per option | Turns an option off - a true/false field, or a formula over its fields and the page: docs/06.dataviews/06.design-form/02.widgets/03.inputs.md == 5 && !. |
| Multiple | multiple | Picks several options - its value is a list. | |
| Clear button | clear | An ✕ that empties the value. | |
| Create from search | createItem | Options from a Resource: typing a value it doesn't list offers Create - a new row of its table with that value in its Label field, saved as the viewer (their CREATE permission), then picked. PostgreSQL decides whether the row is valid. | |
| Search window | searchWindow | Options from a Resource: a 🔍 beside it opens them as a table - its Resource's fields as columns, searched and paged on the server - to pick one by any of them. For long lists. | |
| Search window as | searchWindowAs | sidebar, modal | Where the search window opens - a sidebar (the default, room for a long list) or a modal. Full screen on a phone. |
| Search window size | searchWindowSize | sm, md, lg, xl | Its width - unset, Nuxt UI's own (a narrow sidebar or modal); sm to xl as a record form's sizes, xl for a wide table. Full screen on a phone from md. |
| Color | color | ƒ | One of the theme's colors - primary, error, success... |
| Variant | variant | ƒ; outline, soft, subtle, ghost, none | Its style: filled, outlined, soft... |
| Size | size | xs, sm, md, lg, xl | From xs to xl - Default is md. |
| Icon | icon | ƒ | An icon at its start. |
| Disabled | disabled | ƒ | Shown greyed out - it can't be used. |
| Highlight | highlight | ƒ | Outlined in its color, to draw attention. |
Also: Options items (a Resource).
Events
| Event | Code | Receives |
|---|---|---|
| Value changed | update:modelValue | { value, item } - item is the chosen option's whole row |
| Change | change | { value } |
| Blur | blur | { value } |
| Focus | focus | { value } |
| Cleared | clear | |
| Row created | create | { item } - the row created from the search |
Methods
Called from Code as dataview.controls.<name>.<method>().
| Method | Code | |
|---|---|---|
| Focus | focus() | Puts the cursor in it |
Example
{
"widget": "USelectMenu",
"name": "technician",
"props": {
"valueKey": "id",
"labelKey": "user.name",
"searchWindow": true
},
"bindings": {
"modelValue": {
"variable": "technician"
},
"items": {
"variable": "freeTechnicians"
}
},
"emits": {
"change": "onTechnicianChange"
}
}
Autocomplete
UInputMenu · Nuxt UI
Type to find an option.
Edits: text columns · A form field's input · When placed: asks for its data source
Props
| Prop | Code | Takes | |
|---|---|---|---|
| Value | modelValue | a Value | A Value variable it reads and writes - or a formula (the link): shown read only, written nowhere, e.g. . |
| Value field | valueKey | The field of each option that is stored - its primary key by default. | |
| Label field | labelKey | per option | The field shown for each option - or a formula over its fields, e.g. + " - " + ; its Resource must read them. |
| Description field | descriptionKey | per option | Shown muted beneath the label - a field, or a formula over its fields. |
| Icon field | iconKey | per option | Each option's icon, e.g. i-lucide-banknote - a field, or a formula over its fields. |
| Disabled field | disabledKey | per option | Turns an option off - a true/false field, or a formula over its fields and the page: docs/06.dataviews/06.design-form/02.widgets/03.inputs.md == 5 && !. |
| Multiple | multiple | Picks several options - its value is a list. | |
| Clear button | clear | An ✕ that empties the value. | |
| Color | color | ƒ | One of the theme's colors - primary, error, success... |
| Variant | variant | ƒ; outline, soft, subtle, ghost, none | Its style: filled, outlined, soft... |
| Size | size | xs, sm, md, lg, xl | From xs to xl - Default is md. |
| Icon | icon | ƒ | An icon at its start. |
| Disabled | disabled | ƒ | Shown greyed out - it can't be used. |
| Highlight | highlight | ƒ | Outlined in its color, to draw attention. |
Also: Options items (a Resource).
Events
| Event | Code | Receives |
|---|---|---|
| Value changed | update:modelValue | { value, item } - item is the chosen option's whole row |
| Change | change | { value } |
| Blur | blur | { value } |
| Focus | focus | { value } |
| Cleared | clear |
Methods
Called from Code as dataview.controls.<name>.<method>().
| Method | Code | |
|---|---|---|
| Focus | focus() | Puts the cursor in it |
Radio group
URadioGroup · Nuxt UI
Pick one of a few options, all visible.
Edits: text columns · A form field's input · When placed: asks for its data source
Props
| Prop | Code | Takes | |
|---|---|---|---|
| Value | modelValue | a Value | A Value variable it reads and writes - or a formula (the link): shown read only, written nowhere, e.g. . |
| Value field | valueKey | The field of each option that is stored - its primary key by default. | |
| Label field | labelKey | per option | The field shown for each option - or a formula over its fields, e.g. + " - " + ; its Resource must read them. |
| Description field | descriptionKey | per option | Shown muted beneath the label - a field, or a formula over its fields. |
| Icon field | iconKey | per option | Each option's icon, e.g. i-lucide-banknote - a field, or a formula over its fields. Shown above its label when Indicator is hidden. |
| Color field | colorKey | per option | Each option's icon color, one of the theme's (primary, success, warning...) - a field, or a formula: < 0 ? "error" : "success". |
| Disabled field | disabledKey | per option | Turns an option off - a true/false field, or a formula over its fields and the page: docs/06.dataviews/06.design-form/02.widgets/03.inputs.md == 5 && !. |
| Icon size | iconSize | sm, md, lg, xl, 2xl | Each option's icon - from sm to 2xl; empty keeps Nuxt UI's. |
| Orientation | orientation | horizontal, vertical | Laid out in a row or in a column. |
| Color | color | ƒ | One of the theme's colors - primary, error, success... |
| Variant | variant | ƒ; list, card, table | Its style: filled, outlined, soft... |
| Indicator | indicator | start, end, hidden | Where its dot sits - hidden shows each option's icon instead, as cards do. |
| Columns | columns | 1, 2, 3, 4, 5, 6 | Options per row - the rest wrap below. Two per row on a phone. |
| Size | size | xs, sm, md, lg, xl | From xs to xl - Default is md. |
| Disabled | disabled | ƒ | Shown greyed out - it can't be used. |
Also: Options items (a Resource), Legend legend (ƒ).
Events
| Event | Code | Receives |
|---|---|---|
| Change | change | { value, item } |
Tags
UInputTags · Nuxt UI
A free-form list of short text values.
Edits: array columns · A form field's input
Props
| Prop | Code | Takes | |
|---|---|---|---|
| Value | modelValue | a Value | A Value variable it reads and writes - or a formula (the link): shown read only, written nowhere, e.g. . |
| Color | color | ƒ | One of the theme's colors - primary, error, success... |
| Variant | variant | ƒ; outline, soft, subtle, ghost, none | Its style: filled, outlined, soft... |
| Size | size | xs, sm, md, lg, xl | From xs to xl - Default is md. |
| Icon | icon | ƒ | An icon at its start. |
| Disabled | disabled | ƒ | Shown greyed out - it can't be used. |
| Highlight | highlight | ƒ | Outlined in its color, to draw attention. |
Also: Max length maxLength.
Events
| Event | Code | Receives |
|---|---|---|
| Value changed | update:modelValue | { value } |
| Change | change | { value } |
| Blur | blur | { value } |
| Focus | focus | { value } |
Methods
Called from Code as dataview.controls.<name>.<method>().
| Method | Code | |
|---|---|---|
| Focus | focus() | Puts the cursor in it |
Checkbox group
UCheckboxGroup · Nuxt UI
Pick any number of options, all visible.
Edits: array columns · A form field's input · When placed: asks for its data source
Props
| Prop | Code | Takes | |
|---|---|---|---|
| Value | modelValue | a Value | A Value variable it reads and writes - or a formula (the link): shown read only, written nowhere, e.g. . |
| Value field | valueKey | The field of each option that is stored - its primary key by default. | |
| Label field | labelKey | per option | The field shown for each option - or a formula over its fields, e.g. + " - " + ; its Resource must read them. |
| Description field | descriptionKey | per option | Shown muted beneath the label - a field, or a formula over its fields. |
| Disabled field | disabledKey | per option | Turns an option off - a true/false field, or a formula over its fields and the page: docs/06.dataviews/06.design-form/02.widgets/03.inputs.md == 5 && !. |
| Orientation | orientation | horizontal, vertical | Laid out in a row or in a column. |
| Color | color | ƒ | One of the theme's colors - primary, error, success... |
| Variant | variant | ƒ; list, card, table | Its style: filled, outlined, soft... |
| Size | size | xs, sm, md, lg, xl | From xs to xl - Default is md. |
| Disabled | disabled | ƒ | Shown greyed out - it can't be used. |
Also: Options items (a Resource), Legend legend (ƒ).
Events
| Event | Code | Receives |
|---|---|---|
| Value changed | update:modelValue | { value } |
| Change | change | { value } |
Listbox
UListbox · Nuxt UI
A visible, filterable list to pick from.
Edits: text columns · A form field's input · When placed: asks for its data source
Props
| Prop | Code | Takes | |
|---|---|---|---|
| Value | modelValue | a Value | A Value variable it reads and writes - or a formula (the link): shown read only, written nowhere, e.g. . |
| Value field | valueKey | The field of each option that is stored - its primary key by default. | |
| Label field | labelKey | per option | The field shown for each option - or a formula over its fields, e.g. + " - " + ; its Resource must read them. |
| Description field | descriptionKey | per option | Shown muted beneath the label - a field, or a formula over its fields. |
| Icon field | iconKey | per option | Each option's icon, e.g. i-lucide-banknote - a field, or a formula over its fields. |
| Disabled field | disabledKey | per option | Turns an option off - a true/false field, or a formula over its fields and the page: docs/06.dataviews/06.design-form/02.widgets/03.inputs.md == 5 && !. |
| Multiple | multiple | Picks several options - its value is a list. | |
| Filter box | filter | A search box above the options. | |
| Color | color | ƒ | One of the theme's colors - primary, error, success... |
| Size | size | xs, sm, md, lg, xl | From xs to xl - Default is md. |
| Loading | loading | ƒ | Shows a spinner while something is busy. |
| Disabled | disabled | ƒ | Shown greyed out - it can't be used. |
| Highlight | highlight | ƒ | Outlined in its color, to draw attention. |
Also: Options items (a Resource).
Events
| Event | Code | Receives |
|---|---|---|
| Value changed | update:modelValue | { value, item } |
| Change | change | { value } |
PIN input
UPinInput · Nuxt UI
A short code with a fixed number of characters.
Edits: text columns · A form field's input
Props
| Prop | Code | Takes | |
|---|---|---|---|
| Value | modelValue | a Value | A Value variable it reads and writes - or a formula (the link): shown read only, written nowhere, e.g. . |
| Type | type | text, number | |
| Mask | mask | Hides what is typed, like a password. | |
| Color | color | ƒ | One of the theme's colors - primary, error, success... |
| Variant | variant | ƒ; outline, soft, subtle, ghost, none | Its style: filled, outlined, soft... |
| Size | size | xs, sm, md, lg, xl | From xs to xl - Default is md. |
| Disabled | disabled | ƒ | Shown greyed out - it can't be used. |
| Highlight | highlight | ƒ | Outlined in its color, to draw attention. |
Also: Length length.
Events
| Event | Code | Receives |
|---|---|---|
| Value changed | update:modelValue | { value } |
| Change | change | { value } |
| Blur | blur | { value } |
| Completed | complete | { value } |
Slider
USlider · Nuxt UI
A number picked along a bounded range.
Edits: number columns · A form field's input
Props
| Prop | Code | Takes | |
|---|---|---|---|
| Value | modelValue | a Value | A Value variable it reads and writes - or a formula (the link): shown read only, written nowhere, e.g. . |
| Tooltip | tooltip | Shows the value above the handle while dragging. | |
| Orientation | orientation | horizontal, vertical | Laid out in a row or in a column. |
| Color | color | ƒ | One of the theme's colors - primary, error, success... |
| Size | size | xs, sm, md, lg, xl | From xs to xl - Default is md. |
| Disabled | disabled | ƒ | Shown greyed out - it can't be used. |
Also: Min min (ƒ), Max max (ƒ), Step step.
Events
| Event | Code | Receives |
|---|---|---|
| Value changed | update:modelValue | { value } |
| Change | change | { value } |
Rating
UInputRating · Nuxt UI
A star rating out of a fixed maximum.
Edits: number columns · A form field's input
Props
| Prop | Code | Takes | |
|---|---|---|---|
| Value | modelValue | a Value | A Value variable it reads and writes - or a formula (the link): shown read only, written nowhere, e.g. . |
| Icon | icon | ƒ | An icon at its start. |
| Color | color | ƒ | One of the theme's colors - primary, error, success... |
| Size | size | xs, sm, md, lg, xl | From xs to xl - Default is md. |
| Disabled | disabled | ƒ | Shown greyed out - it can't be used. |
Also: Stars length, Read only readonly (ƒ).
Events
| Event | Code | Receives |
|---|---|---|
| Value changed | update:modelValue | { value } |
| Change | change | { value } |
File upload
UFileUpload · Nuxt UI
A single uploaded file or image.
Edits: file columns · A form field's input
Props
| Prop | Code | Takes | |
|---|---|---|---|
| Value | modelValue | a Value | A Value variable it reads and writes - or a formula (the link): shown read only, written nowhere, e.g. . |
| Label | label | ƒ | The empty field's text - the area's, or the button variant's. Unset: Drop a file here or click to browse. |
| Description | description | ƒ | A line under the area's text. |
| Button | buttonLabel | ƒ | The area variant: a button under its text (Upload file), for whoever doesn't know the area can be tapped. |
| Accepted types | accept | File types to accept, e.g. image/*,.pdf | |
| Show the image | preview | An image shows itself across the field instead of its name - tapping it picks another. Read only, it is only the image. | |
| Image shape | aspect | original, 1:1, 3:4, 4:3 | With Show the image: original keeps the image's own shape; a ratio frames it (3:4 portrait - a carnet photo). |
| Height | height | In pixels, whatever the screen: the empty area's - to line it up with the cards beside it - and, with Show the image, the image's (with a shape its width follows, centered; without, it spans the field; it covers the frame). | |
| Icon | icon | ƒ | An icon at its start. |
| Color | color | ƒ | One of the theme's colors - primary, error, success... |
| Variant | variant | ƒ; area, button | Its style: filled, outlined, soft... |
| Size | size | xs, sm, md, lg, xl | From xs to xl - Default is md. |
| Disabled | disabled | ƒ | Shown greyed out - it can't be used. |
Events
| Event | Code | Receives |
|---|---|---|
| File changed | update:modelValue | { value } |
Methods
Called from Code as dataview.controls.<name>.<method>().
| Method | Code | |
|---|---|---|
| Open | open() | Opens the file picker |
Scanner
Reads a QR code, a barcode or a PDF417 (such as an ID card) with the camera, or from a USB reader typing into a field or into the whole page.
TScanner · TotalBase
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.
Edits: text columns · A form field's input
Props
| Prop | Code | Takes | |
|---|---|---|---|
| Value | modelValue | a Value | A Value variable that keeps the last code read (or a record column it fills). |
| Text field | input | default true | A field where a USB reader types (or a person does) - Enter reads it. |
| Camera | camera | default true | A button that opens the camera to read a code. The browser allows it only over HTTPS (or on localhost). |
| USB reader | listen | field, page | field: what's typed in its text field; page: a reader's burst of keys anywhere on the page, with nothing focused - for a kiosk. |
| Formats | formats | The codes the camera reads, comma-separated - empty: all of them. qr_code, pdf417, code_128, code_39, code_93, ean_13, ean_8, upc_a, upc_e, itf, codabar, data_matrix, aztec. | |
| Keep reading | continuous | The camera stays open after a read, for the next one (the same code again only after a pause). | |
| Beep | beep | default true | A short tone on each read. |
| Vibrate | vibrate | default true | A short vibration on each read, where the device can. |
| Camera button | label | ƒ | The camera button's text - empty: an icon only. |
| Icon | icon | ƒ | The camera button's icon - unset: a barcode. |
| Color | color | ƒ | One of the theme's colors - primary, error, success... |
| Variant | variant | ƒ; solid, outline, soft, subtle, ghost, link | Its style: filled, outlined, soft... |
| Size | size | xs, sm, md, lg, xl | From xs to xl - Default is md. |
| Disabled | disabled | ƒ | Shown greyed out - it can't be used. |
Events
| Event | Code | Receives |
|---|---|---|
| Scanned | scan | { value, format, source } - the text read, its format (qr_code, pdf417, ... - null from a USB reader) and camera | keyboard |
| Value changed | update:modelValue | { value } |
| Error | error | { message } - the camera couldn't open (no permission, no HTTPS, no camera) |
Methods
Called from Code as dataview.controls.<name>.<method>().
| Method | Code | |
|---|---|---|
| Open | open() | Opens the camera to read a code |
| Close | close() | Closes the camera |
| Focus | focus() | Puts the cursor in it |
Example
{
"widget": "TScanner",
"name": "scanner",
"props": {
"listen": "page",
"input": false,
"camera": false
},
"emits": {
"scan": "onScan"
}
}
Camera
Takes a photo now, crops it to a shape and scales it down, and stores it as a file.
TCamera · TotalBase
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.
Edits: file columns · A form field's input
Props
| Prop | Code | Takes | |
|---|---|---|---|
| Value | modelValue | a Value | A Value variable it reads and writes - or a formula (the link): shown read only, written nowhere, e.g. . |
| Button | label | ƒ | The button's text - empty: Take photo. |
| Camera | facing | environment, user | environment: the back camera; user: the front one (a selfie). The viewer can switch. |
| Crop | aspect | original, 1:1, 3:4, 4:3 | original keeps the photo as framed; a ratio crops it to that shape (1:1 square, 3:4 portrait - a carnet photo). |
| Largest side | maxSize | In pixels - a larger photo is scaled down to it (default 1600). | |
| Quality | quality | JPEG quality from 0.1 to 1 (default 0.85) - lower, a smaller file. | |
| Icon | icon | ƒ | The button's icon - unset: a camera. |
| Color | color | ƒ | One of the theme's colors - primary, error, success... |
| Variant | variant | ƒ; solid, outline, soft, subtle, ghost, link | Its style: filled, outlined, soft... |
| Size | size | xs, sm, md, lg, xl | From xs to xl - Default is md. |
| Disabled | disabled | ƒ | Shown greyed out - it can't be used. |
Events
| Event | Code | Receives |
|---|---|---|
| Photo changed | update:modelValue | { value } - the stored file's id |
Methods
Called from Code as dataview.controls.<name>.<method>().
| Method | Code | |
|---|---|---|
| Open | open() | Opens the camera to take a photo |
| Close | close() | Closes the camera |
Signature
A pad to sign on with a finger, a pen or the mouse. The signature is stored as a PNG file.
TSignature · TotalBase
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.
Edits: file columns · A form field's input
Props
| Prop | Code | Takes | |
|---|---|---|---|
| Value | modelValue | a Value | A Value variable it reads and writes - or a formula (the link): shown read only, written nowhere, e.g. . |
| Height | height | The pad's height in pixels (default 180) - it takes the field's width. | |
| Ink colors | colors | A few colors to pick the ink from - off: black only. | |
| Read only | readonly | ƒ | The signature shown, never changed - no pad, no Clear. |
| Disabled | disabled | ƒ | Shown greyed out - it can't be used. |
Events
| Event | Code | Receives |
|---|---|---|
| Signed | update:modelValue | { value } - the stored file's id, null when cleared |
Methods
Called from Code as dataview.controls.<name>.<method>().
| Method | Code | |
|---|---|---|
| Clear | clear() | Starts over, with no value |
| Submit | submit() | Stores what's drawn as a PNG file now; a modal's Accept awaits it |
Rich text
UEditor · Nuxt UI
A rich text editor - Markdown, HTML or JSON content.
Edits: text, JSON columns · A form field's input · Height: rows of 40 px, or Fill height
Props
| Prop | Code | Takes | |
|---|---|---|---|
| Value | modelValue | a Value | A Value variable it reads and writes - or a formula (the link): shown read only, written nowhere, e.g. . |
| Content type | contentType | markdown, html, json |
Events
| Event | Code | Receives |
|---|---|---|
| Value changed | update:modelValue | { value } |
JSON
TJson · TotalBase
Structured data, edited as a tree.
Edits: JSON columns · A form field's input · Height: rows of 40 px, or Fill height
Props
| Prop | Code | Takes | |
|---|---|---|---|
| Value | modelValue | a Value | A Value variable it reads and writes - or a formula (the link): shown read only, written nowhere, e.g. . |
| Disabled | disabled | ƒ | Shown greyed out - it can't be used. |
Events
| Event | Code | Receives |
|---|---|---|
| Value changed | update:modelValue | { value } |
Color
TColorSelect · TotalBase
A palette color or any hex color.
Edits: text columns · A form field's input
Props
| Prop | Code | Takes | |
|---|---|---|---|
| Value | modelValue | a Value | A Value variable it reads and writes - or a formula (the link): shown read only, written nowhere, e.g. . |
| Clear button | clearable | An ✕ that empties the value. | |
| Disabled | disabled | ƒ | Shown greyed out - it can't be used. |
Events
| Event | Code | Receives |
|---|---|---|
| Value changed | update:modelValue | { value } |
Map (Leaflet)
TLeafletMap · TotalBase
A point picked on an OpenStreetMap map - or the device's own position, with My location.
Edits: point columns · A form field's input · Height: rows of 40 px, or Fill height
Props
| Prop | Code | Takes | |
|---|---|---|---|
| Value | modelValue | a Value | A Value variable it reads and writes - or a formula (the link): shown read only, written nowhere, e.g. . |
| My location | locate | default true | A button over the map that pins the device's position - still draggable after. The browser allows it only over HTTPS (or on localhost). |
| Locate on open | locateOnOpen | default false | Pins the device's position when the field opens with no value. |
| Disabled | disabled | ƒ | Shown greyed out - it can't be used. |
Events
| Event | Code | Receives |
|---|---|---|
| Point changed | update:modelValue | { value } - { lng, lat } |
| Located | located | { lng, lat, accuracy } - the device's position, accuracy in meters |
| Location failed | locateFailed | { reason, message } - insecure, unsupported, denied, unavailable or timeout |
Methods
Called from Code as dataview.controls.<name>.<method>().
| Method | Code | |
|---|---|---|
| Locate | locate() | Captures the device's position and pins it |
Location
Captures the device's position into a point column: a Mark position button, or automatically when the form opens empty. Acme's technicians check in with it.
TGeolocation · TotalBase
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.
Edits: point columns · A form field's input
Props
| Prop | Code | Takes | |
|---|---|---|---|
| Value | modelValue | a Value | A Value variable it reads and writes - or a formula (the link): shown read only, written nowhere, e.g. . |
| Automatic | auto | default true | Captures the position when the field opens with no value. The browser allows it only over HTTPS (or on localhost), and asks the viewer once. |
| Show coordinates | showCoordinates | default true | Latitude and longitude beside the button once there's a value. |
| High accuracy | highAccuracy | default true | GPS over the network's guess - slower, exact. |
| Label | label | ƒ | The button's - unset: Mark position, then Again. |
| Icon | icon | ƒ | The button's icon - unset: a crosshair. |
| Color | color | ƒ | One of the theme's colors - primary, error, success... |
| Variant | variant | ƒ; solid, outline, soft, subtle, ghost, link | Its style: filled, outlined, soft... |
| Size | size | xs, sm, md, lg, xl | From xs to xl - Default is md. |
| Disabled | disabled | ƒ | Shown greyed out - it can't be used. |
Events
| Event | Code | Receives |
|---|---|---|
| Position changed | update:modelValue | { value } - { lng, lat } |
| Located | located | { lng, lat, accuracy } - the device's position, accuracy in meters |
| Location failed | locateFailed | { reason, message } - insecure, unsupported, denied, unavailable or timeout |
Methods
Called from Code as dataview.controls.<name>.<method>().
| Method | Code | |
|---|---|---|
| Locate | locate() | Captures the device's position into its value |
Example
{
"widget": "TGeolocation",
"props": {
"auto": true,
"highAccuracy": true
},
"bindings": {
"modelValue": {
"variable": "checkIn"
}
},
"emits": {
"locateFailed": "onLocateFailed"
}
}
Range
TRangeInput · TotalBase
A PostgreSQL range - from and to, with the date or number inputs its type takes; empty, no value.
Edits: range columns · A form field's input
Props
| Prop | Code | Takes | |
|---|---|---|---|
| Value | modelValue | a Value | A Value variable it reads and writes - or a formula (the link): shown read only, written nowhere, e.g. . |
| Disabled | disabled | ƒ | Shown greyed out - it can't be used. |
Events
| Event | Code | Receives |
|---|---|---|
| Range changed | update:modelValue | { value } - its PostgreSQL text: [from,to) |