---
title: "Creating a custom field widget · Appnovation"
url: "https://www.appnovation.com/insights/creating-custom-field-widget"
description: "Step-by-step: create a custom Drupal field widget that adds a color picker to text fields, so editors don't need to know color codes."
---

Article

# Creating a custom field widget

![Creating a custom field widget](https://cdn.sanity.io/images/ey850001/production/9efe1c26d9584ecfb3dfef5a63e698bf4567d305-1440x600.jpg?w=1400&auto=format) 

We're going to create a custom widget for the text field to allow users to pick a color from a color picker, rather than having to know the color codes.

Start by creating a file (let's call it ColorPickerWidget.php) inside your module directory, like so **{module\_name}/src/Plugin/FieldWidget/ColorPickerWIdget.php**

\<?php namespace Drupal\\hello\\Plugin\\Field\\FieldWidget; use Drupal\\Core\\Field\\FieldItemListInterface; use Drupal\\Core\\Field\\WidgetBase; use Drupal\\Core\\Form\\FormStateInterface; /\*\* \* Plugin implementation of the 'color\_picker\_widget' widget. \* \* @FieldWidget( \* id = "color\_picker\_widget", \* label = @Translation("Color picker widget"), \* field\_types = { \* "string" \* } \* ) \*/ class ColorPickerWidget extends WidgetBase { /\*\* \* {@inheritdoc} \*/ public function formElement(FieldItemListInterface $items, $delta, array $element, array &$form, FormStateInterface $form\_state) { $element\['value'\] = $element + \[ '#type' => 'color', '#default\_value' => isset($items\[$delta\]->value) ? $items\[$delta\]->value : NULL, \]; return $element; } } 

The annotation

/\*\* \* @FieldWidget( \* id = "color\_picker\_widget", \* label = @Translation("Color picker widget"), \* field\_types = { \* "string" \* } \* ) \*/

tells Drupal about our widget as well as which field types this widget belongs to. In our case, it's the plain text field type.

This class only has to implement one method (**formElement**) which returns the color picker we wanted

'#type' => 'color'

If we want to allow the administrator to specify a default color, we'll need to let Drupal know what the variable names are with this

/\*\* \* {@inheritdoc} \*/ public static function defaultSettings() { return \[ 'default\_color' => '', \] + parent::defaultSettings(); }

Then show that setting on the widget configuration form

/\*\* \* {@inheritdoc} \*/ public function settingsForm(array $form, FormStateInterface $form\_state) { $elements = \[\]; $elements\['default\_color'\] = \[ '#type' => 'textfield', '#title' => t('Default color'), '#default\_value' => $this->getSetting('default\_color'), \]; return $elements; }

and display the summary on the form display admin page

/\*\* \* {@inheritdoc} \*/ public function settingsSummary() { $summary = \[\]; if (!empty($this->getSetting('default\_color'))) { $summary\[\] = t('Default color: @placeholder', \[ '@placeholder' => $this->getSetting('default\_color'), \]); } return $summary; }

## Keep reading

[![Abstract graphic of white lines spiralling around a green-outlined triangle on a dark background](https://cdn.sanity.io/images/ey850001/production/e561f763d9608b75872d9b71d0674353c36a06fb-1201x630.png?w=640&auto=format)](/insights/2020-11-your-tech-stack-standing-way-your-success.md)

 Article · 4 min Nov 19, 2020 

### [Is Your Tech Stack Standing In The Way Of Your Success?](/insights/2020-11-your-tech-stack-standing-way-your-success.md)

Your business potential and technology needs (should) go hand in hand. You can plan business outcomes all you want, but if they’re not mapped strategically to the technology you need to actually make them happen, you’ll fail. Easy as that.

[Nathan Gervais](/people/nathan-gervais.md) Article 

[![Abstract graphic of white lines spiralling around a green-outlined triangle on a dark background](https://cdn.sanity.io/images/ey850001/production/e561f763d9608b75872d9b71d0674353c36a06fb-1201x630.png?w=640&auto=format)](/insights/2020-11-finding-your-way-build-your-migration-roadmap-drupal-9.md)

 Article · 4 min Nov 05, 2020 

### [Finding Your Way: Build Your Migration Roadmap to Drupal 9](/insights/2020-11-finding-your-way-build-your-migration-roadmap-drupal-9.md)

As we move toward 2021 and continue to reckon with COVID-19, digital-first companies need a plan to meet continuously shifting customer needs. Drupal 9 will help you do it.

[Nathan Gervais](/people/nathan-gervais.md) Article 

[![Abstract graphic of white lines spiralling around a green-outlined triangle on a dark background](https://cdn.sanity.io/images/ey850001/production/e561f763d9608b75872d9b71d0674353c36a06fb-1201x630.png?w=640&auto=format)](/insights/2020-10-move-drupal-9-and-exceed-cxpectations.md)

 Article · 5 min Oct 20, 2020 

### [Move to Drupal 9 and Exceed CXpectations](/insights/2020-10-move-drupal-9-and-exceed-cxpectations.md)

As we move toward 2021 and continue to reckon with COVID-19, digital-first companies need a plan to meet continuously shifting customer needs. Drupal 9 will help you do it.

[Nathan Gervais](/people/nathan-gervais.md) Article 

## Get the thinking,  
*before everyone else.*

One considered email a month. New essays, field notes from live engagements, and the occasional strong opinion. No noise.