Magento 2 Add multiple checkbox in admin ui form Group component

Question

How do I add dinamically add multiple checkbox bellow the a field

This is how you add one checkbox bellow a field

<fieldset name="field_set_name" sortOrder="100">
 <settings>
 <collapsible>true</collapsible>
 <label translate="true">Field Set Name</label>
 </settings>
 <container name="field_set_group" component="Magento_Ui/js/form/components/group" sortOrder="110">
 <argument name="data" xsi:type="array">
 <item name="type" xsi:type="string">group</item>
 <item name="config" xsi:type="array">
 <item name="required" xsi:type="boolean">false</item>
 </item>
 </argument>
 <field name="1_field_name" sortOrder="10" formElement="input">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="source" xsi:type="string">source</item>
 </item>
 </argument>
 <settings>
 <label translate="true">1 Field Name</label>
 </settings>
 </field>
 <field name="2_field_name" component="Magento_Catalog/js/components/url-key-handle-changes" sortOrder="15" formElement="checkbox">
 <settings>
 <dataType>boolean</dataType>
 </settings>
 <formElements>
 <checkbox>
 <settings>
 <description translate="true">2 Field name</description>
 <valueMap>
 <map name="false" xsi:type="number">0</map>
 <map name="true" xsi:type="number">1</map>
 </valueMap>
 </settings>
 </checkbox>
 </formElements>
 </field>
 </container>
 </fieldset>

enter image description here

AND I need something like this: enter image description here

• Ronak Rathod: webkul.com/blog/… Check this Link
• Juliano Vargas: @RonakRathod Thanks I understand this explain how to use select like product in category field I would like to display just an array of checkbox bellow the field?
• Ghulam.M: dynamic ?? do you want to add multiple checkbox by a click or else??
• Juliano Vargas: @GeeEmm dynamic yes just display them from array like:[['value' => 1, 'label' => 'Checkbox 1'], ['value' => 2, 'label' => 'Checkbox 2'], ['value' => 3, 'label' => 'Checkbox 3']]

Answer 1

Paste this Code in your ui-component

<fieldset name="custom_checkbox"class="Vendor\Module\Ui\Component\Form\CustomCheckbox">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="label" xsi:type="string">Custom Checkboxes</item>
 </item>
 </argument>
</fieldset>

Create a CustomCheckbox.php in

Vendor\Module\Ui\Component\Form\

<?php
namespace Vendor\Module\Ui\Component\Form;
use Magento\Framework\View\Element\UiComponent\ContextInterface;
use Magento\Framework\View\Element\UiComponentInterface;
use Magento\Ui\Component\Form\FieldFactory;
use Magento\Ui\Component\Form\Fieldset as BaseFieldset;
class CustomCheckbox extends BaseFieldset
{
 /**
 * @var FieldFactory
 */
 private $fieldFactory;
 public function __construct(
 ContextInterface $context,
 array $components = [],
 array $data = [],
 FieldFactory $fieldFactory)
 {
 parent::__construct($context, $components, $data);
 $this->fieldFactory = $fieldFactory;
 }
 /**
 * Get components
 *
 * @return UiComponentInterface[]
 * @throws \Magento\Framework\Exception\LocalizedException
 */
 public function getChildComponents()
 {
 // $stores = $this->getStoreData();
 $checkBoxes = [['value' => 1, 'label' => 'Checkbox 1'], ['value' => 2, 'label' => 'Checkbox 2'], ['value' => 3, 'label' => 'Checkbox 3']];
 foreach ($checkBoxes as $checkBox) {
 $storeName = $checkBox['label'];
 $fields[] =
 [
 'label' => __('"' . $checkBox['label'] . '"'),
 'formElement' => 'checkbox',
 'value' => $checkBox['value'],
 ];
 }
 foreach ($fields as $k => $fieldConfig) {
 $fieldInstance = $this->fieldFactory->create();
 $name = $k;
 $fieldInstance->setData(
 [
 'config' => $fieldConfig,
 'name' => $name,
 ]
 );
 $fieldInstance->prepare();
 $this->addComponent($name, $fieldInstance);
 }
 return parent::getChildComponents();
 }
}

This code Worked for me fine :)

enter image description here

• Juliano Vargas: that works I've also found another way which make more compact using checkboxset. up voted anyway.
• sudo55: @JulianoVargas could you please share that way for others.
• Juliano Vargas: @i_ali Done it!

Answer 2

Another solution that I found was the bellow:

<field name="customCheckBoxField">
 <argument name="data" xsi:type="array">
 <item name="label" xsi:type="string" translate="true">Checkboxes</item>
 <item name="options" xsi:type="object">Vendor\Module\Model\Config\Checkbox</item>
 <item name="config" xsi:type="array">
 <item name="label" xsi:type="string" translate="true">Custom Label</item>
 <item name="visible" xsi:type="boolean">true</item>
 <item name="dataType" xsi:type="string">text</item>
 <item name="formElement" xsi:type="string">checkboxset</item>
 <item name="source" xsi:type="string">module</item>
 <item name="multiple" xsi:type="boolean">true</item>
 <item name="dataScope" xsi:type="string">customCheckBoxField</item>
 </item>
 </argument>
 </field>

Then in Vendor\Module\Model\Config\Checkbox

 ...
 public function toOptionArray()
 {
 return [['value' => 1, 'label' => __('field 1')], 
 ['value' => 2, 'label' => __('field 2')], 
 ['value' => 3, 'label' => __('field 3')]
 ];
 }
 ...

This is a screen shot is a combination from Gee Emm and my Answer: enter image description here

• Varun Jyothi: While editing the entry, how can we show the checked checkboxes?