Overview

Product Tour

Using a Starter

Non-React-based SSG support

Adding Tina to an Existing Site

Getting Started

Using the Tina Editor

The JavaScript toolkit for building content management interfaces

Content Modeling

Data Fetching

React

Setting up the Router

Contextual Editing

Writing custom queries

Querying Content

Markdown & MDX

Block-based editing

Active Field Indicator

Editing

Validation

Custom Field Components

Custom List Rendering

Format and Parse Input

Filename Customization

Customizing Tina

Powerful Git-based content management for teams

Registration

Project Collaborators

Projects

Organizations

Tina Cloud Dashboard

Connecting the Site

API Versioning

Self Hosted Tina

Branching

Querying Tina Content in NextJS

Adding Internationalization to Tina

NextJS

Querying Tina Content at Runtime

Config

Collections

Fields

Templates

string

number

datetime

boolean

image

reference

object

rich-text

Field Types

Schema

The ".tina" folder

The TinaCMS CLI

Repo-based Media

Setting up Authentication

Cloudinary

Digital Ocean Spaces

AWS S3 Bucket

External Media Providers

Media

Running the Local GraphQL API

Getting a Single Document

Querying a List of Documents

Updating a Document

Adding a Document

Querying the API

Using Curl & Fetch

Data Layer

Content API

Tina's edit state

The CMS

Forms

Text

Text Area

Number

Image

Color

Toggle

Radio Group

Select

List

Group

Group List

Blocks

Date & Time

Markdown

HTML

Field Plugins

CMS Toolkit

Tags Field


<div class="short-code-warning">
   <div>
      <p>This is an advanced-use feature, and likely not something you'll need to configure. What you probably want is the <a href="/docs/reference/types/">content types reference</a>!</p>
   </div>
   <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
      <path d="M32 464h448L256 48 32 464zm248-64h-48v-48h48v48zm0-80h-48v-96h48v96z"></path>
   </svg>
</div>

The `tags` field represents a collection of tags.

![TinaCMS-tags-field](/img/fields/tags-field.png)

## Options

```typescript
interface TagsField {
  component: 'tags'
  name: string
  label?: string
  description?: string
}
```

| Option        | Description                                                                                     |
| ------------- | ----------------------------------------------------------------------------------------------- |
| `component`   | The name of the plugin component. Always `'tags'`.                                              |
| `name`        | The path to some value in the data being edited.                                                |
| `label`       | A human readable label for the field. Defaults to the `name`. _(Optional)_                      |
| `description` | Description that expands on the purpose of the field or prompts a specific action. _(Optional)_ |

> This interfaces only shows the keys unique to the tags field.
>
> Visit the [Field Config](/docs/reference/toolkit/fields) docs for a complete list of options.

## Definition

Below is an example of how a `tags` field could be defined in a form.

```javascript
const FormConfig = {
  fields: [
    {
      name: 'frontmatter.tags',
      component: 'tags',
      label: 'Tags',
      description: 'Tags for this post',
    },
    // ...
  ],
}
```


Group Field

Select Field

Docs

Tags Field

Select Field

Group Field