A Guide to Creating Custom Field Inputs in Strapi (version 5)

Keval Badarakhiya — Thu, 21 Nov 2024 06:32:57 +0000

Strapi is an open-source headless CMS that provides powerful customization capabilities. One of the standout features is its ability to add custom field inputs, allowing developers to tailor the content management experience to their specific needs.

In this guide, we'll walk you through creating custom field inputs in Strapi(Version 5).

What Are Custom Field Inputs?

Custom field inputs in Strapi allow developers to extend the default field types (text, number, boolean, etc.) with unique functionalities.

For example, you might need a color picker, a tag input, or even a complex JSON editor in your CMS.

Custom fields enhance the flexibility of Strapi by letting developers define input types specific to their use case while keeping the admin panel user-friendly.

Prerequisites :

To follow along, make sure you have:

Strapi v5 installed: Ensure you’re working with Strapi version 5.
Node.js: Installed on your machine (recommended: v16 or higher).
Basic understanding of Strapi: Familiarity with the Strapi admin panel and plugin structure.
Text editor: Such as VS Code.

Now, Let's start to create custom field plugin.

Step 1: Create a New Strapi Plugin

➡️ Strapi plugins provide a modular way to add features to your application, including custom fields.

npx create-strapi-plugin custom-field-input

This will generate the basic structure of your plugin in the src/plugins directory.

Step 2: Define the Custom Field

➡️ In your plugin folder (src/plugins/custom-field-input/server/register.js) , create a file to define the new custom field:

// src/plugins/custom-field-input/server/src/register.js

module.exports = {
  async register({ strapi }) {
    strapi.customFields.register({
      name: 'custom-input',
      plugin: 'custom-field-input',
      type: 'string', // The data type stored in the database
    });
  },
};

Here, we register the custom field and specify that it stores a string type in the database.

Step 3: Build the Admin UI Component

➡️ The admin panel needs a React component to render your custom input field. Strapi uses React for its admin interface, so you'll define your field in React.
Create a components folder in your plugin:

mkdir -p src/plugins/custom-field-input/admin/src/components

Inside the components folder, create a file for your custom field input:

// src/plugins/custom-field-input/admin/src/components/CustomInput.js
import React from 'react';

const CustomInput = ({ value, onChange, name, intlLabel, description }) => {
  return (
    <div>
      <label htmlFor={name}>{intlLabel.defaultMessage}</label>
      <input
        id={name}
        name={name}
        type="text"
        value={value || ''}
        onChange={(e) => onChange({ target: { name, value: e.target.value } })}
      />
      {description && <p>{description.defaultMessage}</p>}
    </div>
  );
};

export default CustomInput;

This component provides a simple text input with a label and description.

Step 4: Connect the Admin UI to the Plugin

➡️ Update the admin entry file to register your custom field in the admin panel suppose I have a plugin (PLUGIN_ID) name styled-textinput.
path : /src/plugins/YourCustomPlugin/admin/src/index.js or register.js

import { PLUGIN_ID } from './pluginId';
export default {
  register(app) {

    app.customFields.register({
      name: "styledTextarea",
      pluginId: `${PLUGIN_ID}`,
      type: "string",
      intlLabel: {
        id: `${PLUGIN_ID}.styledTextarea.label`,
        defaultMessage: "Text Area",
      },
      intlDescription: {
        id: `${PLUGIN_ID}.styledTextarea.description`,
        defaultMessage: "Create Your Text Aread",
      },
      components: {
        Input: async () => import("./components/`(custom field UI component location)`"),
      },
    })
}

➡️ Also, don't forget to register/modify your plugin.ts in the config folder :

module.exports = {
  'your_plugin_name': {
    enabled: true,
    resolve: './src/plugins/your_plugin_name'
  },

Step 5: Add Translations (Optional)

➡️ This part is optional. However, if you want to add this translation part you may refer to this custom-fields with translation guide

Step 6: Test Your Custom Field

➡️ According to the strapi 5 documentation, You need to run this command (npm run build) on this path (/src/plugins/your_custom_plugin_name) in your terminal.

➡️ After making the build, You will be able to run the project and see your custom field input by this command (npm run develop) on root directory (/your_strapi_project).

Start your Strapi project:

npm run develop

Go to the Content-Type Builder in the admin panel.
Add a new field to a content type.
Select your custom field (Custom Input Field) from the list of available fields.

You should see your custom input field appear in the content editor. I am sure that this content will help to create your custom Input field plugin in your strapi project (version 5).

"If you found this guide helpful, don’t forget to clap, like, and share it with your network. I’d love to hear your thoughts or answer any questions—feel free to leave a comment below. Thank you for taking the time to read this guide and happy coding! 😊"

DEV Community: Keval Badarakhiya

A Guide to Creating Custom Field Inputs in Strapi (version 5)

What Are Custom Field Inputs?