Docs

Learn

v.Latest

Documentation

Configuring TinaCMS
Content Modelling
Custom Fields
Plug-in Components

Plug-in Components

Table of Contents

TinaCMS provides a variety of pre-built components (plugins) you can use via the ui.component property.

Set the property to the plugin name as a string.

This only modifies the editor – underlying data stored depends on the field type used.

{
  type: 'string',
  label: 'Background Color',
  name: 'color',
  ui: {
    component: "color",
    colorFormat: "rgb"
  }
}

You can pass in additional plugin configurations via ui – such as colorFormat in the above example.

Plugin library

Text Input

The default input type for string fields.

To use, set ui.compontent to "text".

Plugin details.

Textarea Input

Multi-line text.

To use, set ui.compontent to "textarea".

Plugin details.

Number Input

The default input type for the number field type.

To use, set ui.compontent to "number".

Plugin details.

Image Input

The default input for image field types.

To use, set ui.compontent to "image".

Plugin details.

Color Input

Provides a color selector with RGB or hex return values.

To use, set ui.compontent to "color".

Plugin details.

Toggle Input

The default input type for boolean field types.

To use, set ui.compontent to "toggle".

Plugin details.

Radio Group Input

To use, set ui.compontent to "radio-group".

Plugin details.

Select Input

By default used for scalar types with an options property defined.

To use, set ui.compontent to "select".

Plugin details.

Tags Input

To use, set ui.compontent to "tags".

Plugin details.

List Input

The default input type for managing list: true field types.

To use, set ui.compontent to "list".

Plugin details.

Group Input

To use, set ui.compontent to "group".

Plugin details.

Group List Input

To use, set ui.compontent to "group-list".

Plugin details.

Date Input

The default input type for selecting dates with a date picker.

To use, set ui.compontent to "date".

Plugin details.

Markdown Input

The default input type for editing markdown content with a rich text editor.

Requires additional setup – import and registration from an additional package.

Plugin details.

HTML Input

The default input type for editing HTML content with a rich text editor.

Requires additional setup – import and registration from an additional package.

Plugin details.

Last Edited: March 17, 2025