How to add 2 or 3 text fields inline at the admin configuration of Magento 2?

As I checked everywhere, I am able to add text fields one by one.

How Can I do this as my admin config fields look like below

enter image description here

  • Every new field creates new <tr> tag so it's not possible by code. You can do it by css. Oct 4, 2017 at 6:28
  • I don't think so its good idea
    – Charlie
    Oct 4, 2017 at 6:32
  • 1
    Yes, but there is no any other way. If you found any other way let me know. Oct 4, 2017 at 6:35

2 Answers 2


On your module, in etc/adminhtml/system.xml you can add this group config

<group id="group_id" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="0" showInStore="0">
<label>Your Label</label>

<field id="your_field_id" translate="label comment" type="text" sortOrder="4" showInDefault="1" showInWebsite="1" showInStore="1">
    <label>Your Field Label</label>

then in [Vendor]/[Module]/Block/Adminhtml/Form/Renderer/Config/TextFieldsConfig.php add the following code


namespace [Vendor]\[Module]\Block\Adminhtml\Form\Renderer\Config;
use Magento\Config\Block\System\Config\Form\Field;
use Magento\Framework\Data\Form\Element\AbstractElement;

class TextFieldsConfig extends Field
     * @param AbstractElement $element
     * @return string
    protected function _getElementHtml(AbstractElement $element) {
        $element->setStyle('width:70px;margin-right: 20px;')->setName($element->getName() . '[]');

    if ($element->getValue()) {
        $values = explode(',', $element->getValue());
    } else {
        $values = [];

    $field1 = $element->setValue(isset($values[0]) ? $values[0] : null)->getElementHtml();
    $field2 = $element->setValue(isset($values[1]) ? $values[1] : null)->getElementHtml();
    $field3 = $element->setValue(isset($values[1]) ? $values[1] : null)->getElementHtml();

    return '<div style="float: left;">' . $field1 . '<p class="note"><span>' . __('Your Label 1') . '</span></p></div>'
    . '<div style="float: left;">' . $field2 . '<p class="note"><span>' . __('Your Label 2') . '</span></p></div>'
    . '<div style="float: left;">' . $field3 . '<p class="note"><span>' . __('Your Label 3') . '</span></p></div>';


you can add as many fields as you need this way


If you want only time field for your configuration then you can use type time in your configuration.

 <field id="time" translate="label" type="time" sortOrder="3" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Start Time</label>

On the backend It looks like this,

enter image description here

  • Thanks, but no time field, I need to use plain text fields.
    – Charlie
    Oct 4, 2017 at 7:42
  • Why downvote..?
    – Keyur Shah
    Jan 25, 2018 at 17:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.