When we add a field to our Tina schema, this field will be editable through a field plugin in the sidebar. The type of field plugin will change depending on properties like type, isBody, list, options, etc.
For example:
// .tina/schema.ts
import { defineSchema } from '@tinacms/cli'
export default defineSchema({
collections: [
{
label: 'Blog Posts',
name: 'post',
path: 'content/posts',
fields: [
{
type: 'string', // The default field plugin will be a "textfield" field plugin
label: 'Title',
name: 'title',
},
{
type: 'string', // The default field plugin will be a "textfield" field plugin
label: 'Description',
name: 'desription',
},
// ...
],
},
],
})If you want to override the field plugin used for a field, you can use the ui property.
// ...
{
type: 'string',
label: 'Description',
name: 'desription',
ui: {
component: "textarea" // Use a textarea instead of a textfield
}
},
// ...The component property can be any registered field. Below is a list of default fields.
Tina also supports some extra field plugins, that need to be imported and registered from separate packages:
Each of these fields has a unique set of properties that can be configured within the .tina/schema.ts file.
If you take a look at the color field plugin's definition, it takes a colorFormat property. We can configure that in our .tina/schema.ts like so:
// ...
{
type: 'string',
label: 'Background Color',
name: 'color',
ui: {
component: "color",
colorFormat: "rgb"
}
},
// ...Any field-plugin properties other than the base schema-field properties (e.g, type,label,name ,etc) are set under ui.