How to add checkbox-set ui-component to static form in layout.xml

Question

I want to add a multi checkbox of days of the week to the checkout, similar to:

Following the instructions on the Magento Docs - Add a new input form to checkout I have added the following item to my checkout_index_index.xml layout file:

<item name="delivery_days" xsi:type="array">
    <item name="component" xsi:type="string">Magento_Ui/js/form/element/checkbox-set</item>
    <item name="config" xsi:type="array">
        <item name="customScope" xsi:type="string">shippingAddress.custom_attributes</item>
        <item name="template" xsi:type="string">ui/form/field</item>
        <item name="elementTmpl" xsi:type="string">ui/form/element/checkbox-set</item>
    </item>
    <item name="provider" xsi:type="string">checkoutProvider</item>
    <item name="dataScope" xsi:type="string">shippingAddress.custom_attributes.delivery_days</item>
    <item name="label" xsi:type="string" translate="true">What days do you wish to receive your order?</item>
    <item name="validation" xsi:type="array">
        <item name="required-entry" xsi:type="string">true</item>
    </item>
    <item name="options" xsi:type="array">
        <item name="monday" xsi:type="array">
            <item name="label" xsi:type="string" translate="true">Monday</item>
            <item name="value" xsi:type="string">monday</item>
        </item>
        <item name="tuesday" xsi:type="array">
            <item name="label" xsi:type="string" translate="true">Tuesday</item>
            <item name="value" xsi:type="string">tuesday</item>
        </item>
        <item name="wednesday" xsi:type="array">
            <item name="label" xsi:type="string" translate="true">Wednesday</item>
            <item name="value" xsi:type="string">wednesday</item>
        </item>
        <item name="thursday" xsi:type="array">
            <item name="label" xsi:type="string" translate="true">Thursday</item>
            <item name="value" xsi:type="string">thursday</item>
        </item>
        <item name="friday" xsi:type="array">
            <item name="label" xsi:type="string" translate="true">Friday</item>
            <item name="value" xsi:type="string">friday</item>
        </item>
    </item>
</item>

This is creating a fieldset with the label, but no checkboxes.

If I change the component and elementTmpl from checkbox-set to checkbox then I see a single checkbox. According to the Magento Docs - Checkboxset Component these are the correct values for the appropriate settings.

How do I need to alter the layout.xml file to show multiple checkboxes with the name days[] so that I can select none, one or more of the checkboxes?

Answer 1

The options "name" needs to be a sequential numerical list starting at "0".

<item name="options" xsi:type="array">
    <item name="0" xsi:type="array">
        <item name="label" xsi:type="string" translate="true">Monday</item>
        <item name="value" xsi:type="string">monday</item>
    </item>
    <item name="1" xsi:type="array">
        <item name="label" xsi:type="string" translate="true">Tuesday</item>
        <item name="value" xsi:type="string">tuesday</item>
    </item>
    <item name="2" xsi:type="array">
        <item name="label" xsi:type="string" translate="true">Wednesday</item>
        <item name="value" xsi:type="string">wednesday</item>
    </item>
    <item name="3" xsi:type="array">
        <item name="label" xsi:type="string" translate="true">Thursday</item>
        <item name="value" xsi:type="string">thursday</item>
    </item>
    <item name="4" xsi:type="array">
        <item name="label" xsi:type="string" translate="true">Friday</item>
        <item name="value" xsi:type="string">friday</item>
    </item>
</item>

With text it turned it into multidimentional object not an array