Generic Custom Fields logo

Generic Custom Fields

By Christophe Carvalho Vilas-Boas

This plugin allows you to easily add custom fields to Strapi

Latest version

v2.0.6

released October 8, 2026

npm install strapi-plugin-generic-custom-fields
Logo - Strapi Plugin Generic Custom Fields

Strapi v5 - Plugin Generic Custom Fields

Powerful Strapi Plugin to easily create Custom Fields

GitHub package.json version Monthly download on NPM

UI preview

A plugin for Strapi Headless CMS that provides a powerful and easy way to add custom fields to your Strapi entities.

Features

  • Add custom fields to entities with a simple configuration.

What can it be used for?

  • Create an Enum field with labels
  • Fetch items from an API (with or without authentication)
  • Fetch items from a local source (json file, database, etc.)

Roadmap

  • Support pagination for fetching items
  • Support for different field types (text, number, date, etc.)
  • Validation rules for custom fields
  • Any idea? Open an issue

Usage

To configure the Generic Custom Fields plugin, add your custom fields configuration to the plugin settings. Each custom field should follow this structure:

type Config = {
  customFields: Array<{
    name: string;         // The unique name of the custom field.
    description?: string; // A description for the custom field.
    icon?: string;        // One of the supported StrapiIcon names, e.g. 'Alien', 'Archive', 'ArrowDown', etc.
    inputSize?: {
      default: 4 | 6 | 8 | 12; // Default input size.
      isResizable: boolean;    // Whether the input size can be changed.
    };
    searchable?: boolean; // Whether the custom field is searchable (calls fetchItems with query).
    fetchItems: ({ query: string | undefined }): { items: Item[] } | Promise<{ items: Item[] }>; // Function to fetch multiple items. This function is called on server-side.
    fetchItem: ({ value: string }): Item | Promise<Item>; // Function to fetch a single item. This function is called on server-side.
  }>,
}
type Item = {
    value: string; // Unique identifier for the item. This is used to store the value of the custom field.
    label: string; // Label of the item.
    icon?: {
      src: string; // URL of the icon.
      colorMask?: boolean; // Whether the icon should be masked with the color of the field.
    }
};

This configuration allows you to define custom fields that can fetch items either synchronously or asynchronously. The fetchItems function is used to retrieve a list of items based on a query string that can be empty, while the fetchItem function retrieves a single item based on its value.

Example Configuration

Check Wiki page for Example Implementations

Submit your content

Share your work with the community and get it listed in the Strapi ecosystem for everyone to discover and use.

Submit
Submit your content