Every eCommerce Checkout Page is unique and different because they address a variety of requirements. Not all store owners/customers would need the same set of fields that the Magento platform offers. Here’s where Custom fields come into play. Creating custom fields enables businesses to add fields according to their business model as well as customers’ expectations. This article is about creating custom fields using the UI components in Magento 2, a new feature that allows store owners to add custom fields, per need, to the Checkout Page.

What are the UI components in Magento 2?

UI components in Magento 2 are a new approach that makes building user-interface components less cumbersome. For developers, this approach allows reusing components in different locations. Also, they have a few advantages over the old Magento 1’s user interface. The UI component approach:

  • has a simplified layout, thus handling XML files is easy.
  • pre-renders data in JSON format, thus more bound with Magento backend.
  • uses AJAX in the case of updates.

That said, there are two types of basic components: Listing and Form. The scope of this article confines to create a custom field on the checkout page using the Form component in Magento 2.

Migrate To Magento 2

The coding starts here…

Let’s imagine a scenario where a store owner wants to provide multiple shipping options to the customer – say free shipping to the customer’s address and also store or warehouse pick up. In the case of store/warehouse pickup, we’d want the customer to pick a preferred warehouse location, Name and Contact number of the person who’s going to take the delivery, and preferred delivery time. Thus, I would need three different custom options (a select option, input fields, and a date component) to save in quote and sales_order table as shipping method options.

You can download the entire module from the below GitHub repository: 


Create a new module in the Magento and follow the steps populated below. You could go through the following link to know more about creating a new module: http://devdocs.magento.com/videos/fundamentals/create-a-new-module/

For instance, I have created a module with Dckap as Vendor name and CustomFields as the module name.

Step 1

To create a custom option in the corresponding table, create InstallSchema.php in the path app/code/Dckap/CustomFields/Setup.

Input fields: (input_custom_shipping_field, date_custom_shipping_field, select_custom_shipping_field) of data type text.

Step 2

Among several input fields available in the UI Component system, I have chosen Select, Text, and Date as custom fields. To choose your own input fields, you can refer the following Magento blog for a detailed know-how on UI components:


To populate the chosen custom fields on the checkout page, create a plugin for the process method, Magento\Checkout\Block\Checkout\LayoutProcessor in the path app/code/Dckap/CustomFields/Plugin/Checkout/LayoutProcessorPlugin.php


elementTmpl → the path to the .html template for the field type used.

component → the path to the .js component.

option → used to display the set of values for select option

template → the path to the .html field template under which the particular type of field is bound.

Step 3

Declare the plugin Dckap\CustomFields\Plugin\Checkout\LayoutProcessorPlugin for the class Magento\Checkout\Block\Checkout\LayoutProcessor in your module’s di.xml.

Step 4

To include the custom fields in shippingMethodItemTemplate,  declare a region custom-shipping-method-fields under the section shippingAddress in the file path app/code/Dckap/CustomFields/view/frontend/layout/checkout_index_index.xml

Step 5

Override the shipping-method-item.html in the path app/code/Dckap/CustomFields/view/frontend/web/template/shipping-address/

Here, I’m going to display the custom fields for the particular shipping method (say, freeshipping). To display other custom fields, use the region custom-shipping-method-fields that is declared as displayArea in checkout_index_index.xml file.

Step 6

To validate the custom fields and display the custom-shipping-method-fields, using selected shipping method, override the shipping js component that is used for rendering the shipping method template in the path app/code/Dckap/CustomFields/view/frontend/web/js/view/shipping.js


customShippingMethodFields the custom scope declared in LayoutProcessor while constructing the custom UI component fields.

To validate the custom fields, use the function validateCustomFieldsShipping from setShippingInformation so that they can be validated along with default shipping fields. The custom-shipping-method-fields can be displayed using the selected method observable.

Step 7

Override the above shipping js component as a mixin in the file path app/code/Dckap/CustomFields/view/frontend/requirejs-config.js

Step 8

Should you have followed closely and mimicked until Step 7, custom fields should be visible under the required shipping method. Once the fields are displayed, they can be saved in the quote table using a concept of extension attribute. Since we are going to apply the attributes in the shipping information, an extension attributes for \Magento\Checkout\Api\Data\ShippingInformationInterface can be created in the file path app/code/Dckap/CustomFields/etc/extension_attributes.xml.

Step 9

To include the extension attributes in the shipping information, override the Magento_Checkout/js/model/shipping-save-processor/default Component in requirejs-config.js

Step 10

The custom option fields can be set in extension_attributes in the address information payload in the file app/code/Dckap/CustomFields/view/frontend/web/js/shipping-save-processor.js

This payload is set under the shipping address information, while the next step of the checkout process is continued.

Step 11

On clicking the next button of the shipping step, the custom shipping method fields will be validated along with the other default shipping information in the shipping js component.
The extended attributes are created for \Magento\Checkout\Api\Data\ShippingInformationInterface for which the implementation class used is Magento\Checkout\Model\ShippingInformationManagement. The Extension attributes are available in address information payload and can be saved in quote table using a plugin before the method saveAddressInformation of the implementation class. Create a plugin in app/code/Dckap/CustomFields/Plugin/Quote/SaveToQuote.php

Step 12

Declare the plugin Dckap\CustomFields\Plugin\Quote\SaveToQuote  for the class Magento\Checkout\Model\ShippingInformationManagement in di.xml

Step 13

Once the extension attribute is available in the quote table, we can save the Custom fields in the sales_order table. The observer is declared for sales_model_service_quote_submit_before event so that the custom fields are saved while placing an order.
Declare the observer Dckap\CustomFields\Observer\SaveCustomFieldsInOrder in app/code/Dckap/CustomFields/etc/events.xml to save the extension attributes.

Step 14

Create an observer SaveCustomFieldsInOrder.php in the path app/code/Dckap/CustomFields/Observer/ and save the extension attribute values in the sales_order table.

Once the order is placed, the custom shipping method fields will be saved in the sales order table. The values can be shown in the order details using these custom fields values.

I hope the article turned out to be useful in creating custom fields in the Checkout page using UI components in Magento 2. Please feel free to drop us a line, should you have any queries or feedback. We’re looking forward to addressing more topics in the future.

Magento UI is one of the primary aspects of Magento development services. Learn more on creating custom fields using Magento 2 UI components


  • Haritha Sridhar

    Haritha is a Senior Software Engineer who is passionate about Magento. With 4+ years of experience, she is an Adobe Expert Level certified Magento 2 developer. When she is not coding, you can find her in the midst of books, listening to music, or watching science-fiction movies.


Ready to drive online revenue

Get In Touch

24 thoughts on “Creating Custom Fields using Magento 2 UI Components

  1. we installed the extension but is not displaying on the checkout page. If anyone already has the working code please share with me.

  2. Hi, great tutorial and it helped me create a module that I needed similar to this one. The information though is not showing in the order in the admin or the email. Is there a way to fix this? Thanks!

    1. Hi, Any idea how to get this information to appear in the admin when the order is viewed and in the email that gets generated?

  3. Hello I have installed the customfeild module but you guid me where is the setting for this module in admin panel

  4. Hi Haritha Sridhar,
    i created module successfully and it’s working fine in frontend not storing values to backend.
    why it’s not storing ???
    could you know plzz tell me how to solve?

  5. Hi,I have used your completely it worked fine and thank your for sharing valuable information.When i install one step checkout the fields not showing only title it showing

  6. Hi Sridhar,

    Thank you for the detailed article. I needed to add custom fields to the shipping step of the checkout page and make them required to fill. I followed the steps above but I ended up getting some error. I might have gone wrong somewhere as it involves a lot of steps. After some research, I found the following extension which got it done.

    My question is how can we store the values entered in the custom fields in the relevant tables? Any reference will be appreciated.

    Thank you.

  7. Hi, amazing tutorial, i’ve created a custom field alredy, but now i need to change dinamically the options o this select, when change post code for example, any idea?

  8. Hiiii,
    I found your post is very helpful. As you mentioned its for free shipping(shipping method), if i want to do the same in flat rate or anything else where i should change??

    1. Hi Ashwini,

      Thanks for reaching out to us. These are the three files where the custom fields can be added specific to shipping method.

      To add the fields to the specific shipping method.

      To validate fields

      To set the values of custom fields in extension attribute.

  9. Hello,I’m add a custom field in purchase order method at payment form just like “purchase order number” and i can see that field at front end and backend . But the problem is that the data of that field “Medicaid Id” is not save in the database in “medic_id” column in “sales_order_payment” table.If i add some number manually in that column of database then i can see that data at backend successfully.Please tell how to save the data of that custom field in database at “medic_id” column.

    1. Hi Gourav,

      Thanks for going through the blog post. As of now, we’re working on the particular problem you’re facing and pretty soon you can expect a separate blog post on the same.

    1. “Thank you, Liam! We will update the composer.json file. The module created is a constraint to the Free shipping method. Have you tried enabling the free shipping method? Are you using any other module which customizes the checkout page? please provide precise information from your Analysis”.

Leave a Reply

Your email address will not be published. Required fields are marked *