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 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 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 back-end.
  • 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 creating a custom field on the checkout page using the Form component in 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 selectedMethod 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 till 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 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 quote table, we can save the Custom fields in 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 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.

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.


Be the first to Know

Subscribe to our blog to get the latest articles directly to your inbox.


Request a Quote Today

Request a Quote

Leave a Reply

24 Comments on "Creating Custom Fields using Magento 2 UI Components"

1 month 15 days ago

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

1 month 20 days ago

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 month 18 days ago

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?

2 months 17 days ago

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

3 months 3 hours ago

I have installed the module but can’t see any fields in the checkout step. What could be the issue?

3 months 4 hours ago

Hi Hairtha,

I would like to add a Datepicker field in Checkout. How to do that? Please guide me

3 months 26 days ago

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?

Abdulkadir Agoliya
2 months 4 days ago

did you find solution?

1 month 20 days ago

I have the same problem.

pawan kumar
9 months 14 days ago

can i have some explanation for same functionality for admin

9 months 17 days ago

I see under shipping method

9 months 17 days ago

I have downloaded form github and enabled the module but i have not able to see custom fields anywhere.

3 months 3 hours ago

Did you fix the issue? Because, I’m also trying but couldn’t see the field in checkout.

9 months 17 days ago

Same here

9 months 24 days ago

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

10 months 11 days ago

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.

Haritha Sridhar
9 months 24 days ago

Hi Simon, Thank you for reaching out to us.
For creating a new custom field under the shipping step, try following the steps provided by Magento blog https://devdocs.magento.com/guides/v2.2/howdoi/checkout/checkout_new_field.html. To get the custom values from extension attribute and store them in the relevant tables follow the steps provided by our blog from step 11 to step 13.

Let us know if this answered your question.

David Alvir
11 months 23 days ago

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?

11 months 27 days ago

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??

Haritha Sridhar
11 months 25 days ago

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.

Gourav Sharma
1 year 1 month ago

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.

Haritha Sridhar
1 year 1 month ago

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 year 3 months ago

composer.json is missing.
Fields not showing up on checkout.

Haritha Sridhar
1 year 2 months ago

“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”.