How to Create Custom field in Drupal 9

Here we are going to create a custom field and that can be used as a field in content types.

Here we are using color jquery farbtastic jquery plugin for creating a color picker wheel, upon selecting color, hexa color code will be loaded in a text box. select ed color will be displayed in the node page.

we will be following below steps for creating custom field,

  1. Create Field Type
  2. Create Field Widget
  3. Create Field Formatter

Upon implementation you can add a custom color picker field as below in manage field.

And you can pick the color as below while adding content while click on color textbox.

So selected  color will be displayed as below.

Also in the manage display tab of content type you can see our newly created field widget in the widget option of new field.

For achieving this we have to create below folders and files in your custom module.





We are going to explain how we are creating each file and purpose of each file.

Below provided are the main steps involving creating this color picker custom field.

Field types, Field formatter and FiledWidget are treated as plugins which uses plugin API’s, So we have to place all these class files in custom module path /src/Plugin/Field/

Step 1- Create Field Type

As a first step we are going to create a field type , which provides details like properties and behavior of  the custom fields, 

So here we are going to create ColorPickerItem  class, a field type class in below path


Use below name space, here dn_field is our custom module

Import below as we have to override functions.

Below Field type is very important which is used to create the custom field.

Id is the machine name of our custom field 

Label –  label of our custom field which will be shown admin pages for identifying our custom field.

Module –  our custom module name. 

default_widget & default_formatter – id of formatter and widget that we are going to create in next steps.

Extend class with FieldItemBase. 

Below we are going to override the  schema and propertyDefinitions functions.

So in schema function we will define how the value stored in database, since we have only one text field in our custom field, return an array with a single column of type text.

Create an isEmpty function to store default value if text field is empty  and set label in propertyDefinitions function as below.

You can see the full source code of the field type class here.

Step 2- Create Field Widget

Here we are going to create front end widgets for our custom field. 

Create the directory in your custom module /src/Plugin/Field/FieldWidget

So here, in our example we need one text field where user click on this field  we have to show color picker using jquery farbtastic library and on selecting color we have to populate the text field with the selected color’s hexa code.

So first we will create  a TextWidget class which will extend WidgetBase class.


So here we will be implementing formElement function in order to return form text field,

So in TextWidget.php include namespace other libraries as below.

Add below annotation before starting the class. Here we have to provide id of this text widget and in field types array, provide id of field type that we created in previous step. So here it is field_dn_color_picker.

So below element is the text box element that will be showing  in Add content page.

Additionally we are adding validate function.

So in same folder we have to create another widget which will  append div tags  to above text widget so that we can show color picker in those div tags,


In this file, again we are starting with field widget annotation as below with different id,

Next, extend this class with TextWidget class that we created previously.

So here in formElement function we are appending div tags required, also we are loading libraries required.

Here core/jquery.farbtastic is the farbtastic jquery plugin available in drupal core.

dn_field/colorpicker is the custom js file in our custom module. 

We are creating the below js file for handling click event on color picker.


Content of this js file is as below.

So above script show the color picker while click on text box. Also on selecting the color, selected color will be loaded in text box

Create file dn_field.libraries.yml in your custom module with below entry.

Step 3 – Create Field Formatter

As a last step, we have to decide how to display the custom field while viewing the content, in below file we can provide how this new custom field data displayed to the user.


Start class with below name space and annotations.

Here id is the unique id of our field formatter. Field type is the field type id that we created in first step. Extend the class with FormatterBase.

Override the viewElements function as below, we are creating  html p tag with selected color code.

Clear the cache, you can see newly created  field while adding fields in content types.

Download complete code here.

Get Free E-book
Get a free Ebook on Drupal 8 -theme tutorial
I agree to have my personal information transfered to MailChimp ( more information )
if you like this article Buy me a Coffee this will be an ispiration for me to write articles like this.

You may also like...