urlInput component

The urlInput component implements the <urlInput> form field.

Configuration options

Option Description Type Default
component The path to the component’s .js file in terms of RequireJS. String Magento_Ui/js/form/element/url-input
template The path to the general field .html template. String ui/form/element/url-input
class The path to the component class. Object Magento\Ui\Component\Form\Element\UrlInput
settingTemplate The path to the template to display an additional link setting. Example: Display in the new tab. String ui/form/element/urlInput/setting
typeSelectorTemplate The path to the template to display link types. String ui/form/element/urlInput/typeSelector
isDisplayAdditionalSettings The setting to define the display of an additional setting. Boolean true
urlTypes Contains the required attribute class that specifies the array of configurations for every URL type.
settingValue The default value for the checkbox. Open in a new tab. Boolean

Examples

Configure component

By default, you can use Magento\Ui\Model\UrlInput\LinksConfigProvider, which provides text input for URLs. LinksConfigProvider is composite and you can add new options to the di.xml file.

<type name="Magento\Ui\Model\UrlInput\LinksConfigProvider">
    <arguments>
        <argument name="linksConfiguration" xsi:type="array">
            <item name="default" xsi:type="string">Magento\Ui\Model\UrlInput\DefaultLink</item>
        </argument>
    </arguments>
</type>

The option class implements \Magento\Ui\Model\UrlInput\ConfigInterface and provides the child component configuration:

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
 
declare(strict_types=1);
 
namespace Magento\Ui\Model\UrlInput;
 
 
class MyLink implements ConfigInterface
{
 
    /**
     * {@inheritdoc}
     */
    public function getConfig()
    {
        return [
            'label' => __('Select'),
            'component' => 'Magento_Ui/js/form/element/select',
            'template' => 'ui/form/element/select',
            'sortOrder' => 10,
            'options' => [
                [
                    'value' => 1,
                    'label' => 'hello'
                ],
                [
                    'value' => 2,
                    'label' => 'hello2'
                ]
            ],
            'validation' => [
                //'blacklist-url'=> //Add regexp to blacklist your URL here
                //Add custom validation rule here
                //validation.addRule
            ],
        ];
    }
}

Magento provides the ability to use two link types by default:

  • Magento\Catalog\Ui\Component\UrlInput\Category for category
  • Magento\Catalog\Ui\Component\UrlInput\Product for product