urlInput component

The urlInput component implements the <urlInput> form field.

Options

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

Source files

Extends Abstract:

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 [first year code created] Adobe
 * All Rights Reserved.
 */

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
            ],
        ];
    }
}

The application provides the ability to use two link types by default:

Integration

This example integrates the urlInput component with the Form component.

<form>
    ...
    <fieldset>
        ...
        <urlInput name="url_input_example">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="urlTypes" xsi:type="object">Magento\Ui\Model\UrlInput\LinksConfigProvider</item>
                </item>
            </argument>
        </urlInput>
    </fieldset>
</form>

Result

urlInput Component default link example urlInput Component category link example urlInput Component product link example