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.

Default Field Plugins

Tina also supports some extra field plugins, that need to be imported and registered from separate packages react-tinacms-editor

Configuring a field plugin

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.