Drupal・2 min read・Last update on June 2, 2020

# Clear Field Values Module: Drupal 8

 

 

 

 ![Clear Field Values Module: Drupal 8](/sites/default/files/remediation-media/64e5de2b4e60854b3dc86aa3_Drupal_20Contrib_202.avif) 

 



 

   Table of contents  - [| Clear Field Values module](#clear-field-values-module)
- [| Benefits ](#benefits)
- [| Implementing the Clear Field Values module](#implementing-the-clear-field-values-module)
- [| Developer support](#developer-support)
- [| Module download links](#module-download-links)
 
  

 

While trying to build a form, I found that it would be useful to have a one-click/touch option to clear text field values instead of selecting all the text and removing it. Even though this appears like a small issue, solving this would make users life easy! This was the driving force behind creating the Clear Field Values module for Drupal 8. The Clear Field Values module provides a way to clear data in the text field values with a single click/touch.

### | Clear Field Values module

This module adds a button to clear text field values in one click/touch and provides two options at present, one is a simple cross button and the other is using font awesome icons.

### | Benefits 

- Helps clear the entire input field without having to delete the whole text manually
- Clears a pre-suggested input present in the input field, that the user does not require.

### | Implementing the Clear Field Values module

Follow these steps to configure the Clear Field:

1. Go to /admin/config/clear-field/settings steps
2. Enable Clear Field by selecting the checkbox
3. Next, select the type of Button:
4. Simple X
5. Fontawesome for all generic fields
6. You can then add the text and tooltip which you need to add along with icon or keep it empty if not required.
7. Add classes for the text field elements where you need the cross button to be visible.

#### Step 1 : Move to Settings page /admin/config/clear-field/settings 

#### Step 2: Enable Clear Field Checkbox

Select Type of Button

1. Text along with X for all

Selecting the above option would add X(cross) with text beside the text field

1. Font Awesome for all fields generic

Enable FontAwesome module <https://www.drupal.org/project/fontawesome> and you can add the cross button

Default values for the text of the icon and tooltip are Clear Field &amp; Clear field value which can be overridden.

Default values for the Classes are form-text form-email separated by a space.

For a custom-form add custom classes defined under element’s attributes under Classes field.

https://youtu.be/1czrz9RcCs8

### | Developer support

This module is supported by

1. Harshal Pradhan <https://www.drupal.org/u/hash6>
2. Kiran Kadam <https://www.drupal.org/u/kirankadam911>

### | Module download links

[https://www.drupal.org/project/clear\_field](https://www.drupal.org/project/clear_field)

[https://www.drupal.org/project/clear\_field/releases/8.x-1.x-dev](https://www.drupal.org/project/clear_field/releases/8.x-1.x-dev)

Do send in your feedback around this module! We would love to hear from you.   
 Reference: <https://www.geeksforgeeks.org/html-clearing-the-input-field/>

 



Written by

Harshal Pradhan

 

 

 

 

 

 

 ## We'd love to talk about your business objectives

 [ Contact Us  ](/contact)