Field Types
Every native Tina field type has been tested end-to-end (data layer + editor form + contextual editing) with nuxt-tina. This table is a summary: for the full detail on each type, see Tina's own field docs.
| Field | type | Plugin (ui.component) |
|---|---|---|
| Text | string | "text" (default) |
| Text Area | string | "textarea" |
| Number | number | "number" (default) |
| Date | datetime | "date" (default) |
| Toggle | boolean | "toggle" (default) |
| Image | image | "image" (default) |
| Color | string | "color": needs colorFormat: 'hex' | 'rgb' |
| Radio Group | string + options | "radio-group" |
| Select | string + options | "select" (default when options is set) |
| Tags | string + list: true | "tags" (default) |
| Reference | reference + collections: [...] | - |
| Group | object | "group" (default) |
| Group List | object + list: true | "group-list" (default) |
| Rich-text | rich-text | - (see Advanced Rich-Text) |
Full examples
{
type: 'string',
name: 'accentColor',
label: 'Accent Color',
ui: { component: 'color', colorFormat: 'hex' },
}
{
type: 'string',
name: 'visibility',
label: 'Visibility',
options: ['public', 'unlisted', 'private'],
ui: { component: 'radio-group' },
}
{
type: 'reference',
name: 'author',
label: 'Author',
collections: ['author'], // target collection name
}
The GraphQL query automatically inlines the referenced document:
{ "author": { "name": "...", "bio": "...", "avatar": null } }
⚠️ Limitation: the reference picker shows a filename, not a title
The reference field's combobox in the admin always shows the selected document's _sys.filename: not its isTitle field's value (e.g. name). This isn't a config mistake: the internal tinacms function that generates that label (getFilename) is hardcoded to the filename, with no itemProps hook to override this combobox's display. Nothing can be fixed from tina/config.ts's side.
Plugin names that are easy to get wrong
ui.component has to be the EXACT official plugin name: a typo doesn't error, it just silently falls back to the default. The easiest ones to get wrong:
'radio-group', not'radio''group-list', not'group_list'or'grouplist'
If a field isn't rendering the way you expect despite ui.component being set, double-check the plugin name against Tina's official docs.