plugin-tags-input

Strapi 4 custom field plugin that provides a tags input UI. Tags are stored as a JSON array of strings.

Features

• Dynamic tag list with Enter to add and click to remove
• Duplicate tags are ignored
• Backspace on empty input removes the last tag
• Blur commits the current input as a tag
• Required field option in Content-Type Builder
• English and Turkish admin translations

Requirements

• Node.js 18–20
• Strapi 4.x
• React 17 or 18 (provided by Strapi admin)

Installation

Copy or link this plugin into your Strapi project:

# From your Strapi project root
cd src/plugins
# clone or copy plugin-tags-input here, then:
npm install
npm run build   # if your Strapi setup requires a plugin build step

Enable the plugin in config/plugins.js:

module.exports = {
  'plugin-tags-input': {
    enabled: true,
    resolve: './src/plugins/plugin-tags-input',
  },
};

Restart Strapi after enabling the plugin.

Usage

1. Open Content-Type Builder.
2. Add a new field to a collection type or single type.
3. Choose Custom → Tags Input (plugin-tags-input.tags).
4. Save and restart if prompted.

Stored data format

The field type is json. Values are persisted as a JSON string array, for example:

["javascript", "strapi", "cms"]

The admin input always commits a valid JSON string because Strapi's content manager parses JSON fields on save.

API response

When fetching entries, the field is returned as a parsed array (or null if empty), depending on your API population settings.

Project structure

admin/src/
  components/
    TagsInput/     # Custom field input component
    Initializer/   # Plugin bootstrap
    PluginIcon/    # Content-Type Builder icon
  translations/    # en.json, tr.json
server/
  register.js      # Registers custom field on server
strapi-admin.js    # Admin entry point
strapi-server.js   # Server entry point

Development

Lint

npm install
npm run lint
npm run lint:fix   # auto-fix where possible

See docs/ESLINT.md for ESLint configuration details and the latest audit report.

License

MIT