Multiline component

The Multiline component is a collection of form elements that displays multiple fields of the same type. For example, the Street Address fields.

Configuration option

Option	Description	Type	Default
`additionalClasses`	Sets custom classes to the component's DOM block.	Object	`{}`
`breakLine`	Adds a CSS class to multiline's DOM element. When set to `true`, the `admin__control-fields` class is added, when `false` - `admin__control-grouped`.	Boolean	`true`
`component`	The path to the component’s `.js` file in terms of RequireJS.	String	`Magento_Ui/js/form/components/group`
`fieldTemplate`	The path to `.html` template that will be used for all child components rendered by the multiline component.	String	`ui/form/field`
`label`	Component's UI label.	String	`''`
`required`	Defines whether the rendered field is required.	Boolean	`false`
`showLabel`	Defines if the label is rendered.	Boolean	`''`
`template`	The path to the general field's `.html` template.	String	`'ui/group/group'`
`validateWholeGroup`	Adds a block with validation results for all fields in the group.	Boolean	`false`
`visible`	Initial component's visibility. When set to "false", the `display: none` CSS style is added to the component's DOM block.	Boolean	`true`

Source files

Extends UiCollection:

Example

    <form>
    ...
        <container name="custom_group" component="Magento_Ui/js/form/components/group" sortOrder="20">
            <argument name="data" xsi:type="array">
                <item name="type" xsi:type="string">group</item>
                <item name="config" xsi:type="array">
                    <item name="label" xsi:type="string" translate="true">Custom Group</item>
                    <item name="required" xsi:type="boolean">true</item>
                    <item name="dataScope" xsi:type="boolean">false</item>
                    <item name="validateWholeGroup" xsi:type="boolean">true</item>
                </item>
            </argument>
            <field name="select_element" formElement="select">
                <settings>
                    <dataType>number</dataType>
                    <labelVisible>false</labelVisible>
                </settings>
                <formElements>
                    <select>
                        <settings>
                            <options class="Magento\Config\Model\Config\Source\Yesno"/>
                        </settings>
                    </select>
                </formElements>
            </field>
            <field name="checkbox_example" formElement="checkbox">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="default" xsi:type="number">0</item>
                    </item>
                </argument>
                <settings>
                    <dataType>boolean</dataType>
                </settings>
                <formElements>
                    <checkbox>
                        <settings>
                            <description translate="true">Checkbox example</description>
                            <valueMap>
                                <map name="false" xsi:type="string">0</map>
                                <map name="true" xsi:type="string">1</map>
                            </valueMap>
                            <prefer>checkbox</prefer>
                        </settings>
                    </checkbox>
                </formElements>
            </field>
            <field name="text_field" formElement="input">
                <settings>
                    <validation>
                        <rule name="required-entry" xsi:type="boolean">true</rule>
                    </validation>
                    <dataType>text</dataType>
                </settings>
            </field>
        </container>
    ...
    </form>
Copied to your clipboard
    <form>
    ...
        <container name="custom_group" component="Magento_Ui/js/form/components/group" sortOrder="20">
            <argument name="data" xsi:type="array">
                <item name="type" xsi:type="string">group</item>
                <item name="config" xsi:type="array">
                    <item name="label" xsi:type="string" translate="true">Custom Group</item>
                    <item name="required" xsi:type="boolean">true</item>
                    <item name="dataScope" xsi:type="boolean">false</item>
                    <item name="validateWholeGroup" xsi:type="boolean">true</item>
                </item>
            </argument>
            <field name="select_element" formElement="select">
                <settings>
                    <dataType>number</dataType>
                    <labelVisible>false</labelVisible>
                </settings>
                <formElements>
                    <select>
                        <settings>
                            <options class="Magento\Config\Model\Config\Source\Yesno"/>
                        </settings>
                    </select>
                </formElements>
            </field>
            <field name="checkbox_example" formElement="checkbox">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="default" xsi:type="number">0</item>
                    </item>
                </argument>
                <settings>
                    <dataType>boolean</dataType>
                </settings>
                <formElements>
                    <checkbox>
                        <settings>
                            <description translate="true">Checkbox example</description>
                            <valueMap>
                                <map name="false" xsi:type="string">0</map>
                                <map name="true" xsi:type="string">1</map>
                            </valueMap>
                            <prefer>checkbox</prefer>
                        </settings>
                    </checkbox>
                </formElements>
            </field>
            <field name="text_field" formElement="input">
                <settings>
                    <validation>
                        <rule name="required-entry" xsi:type="boolean">true</rule>
                    </validation>
                    <dataType>text</dataType>
                </settings>
            </field>
        </container>
    ...
    </form>