Fieldset component

The Fieldset component implements a container for visually-grouped form elements, such as buttons and form fields.

Options

Title	Type	Default	Description
`disabled`	Boolean	`false`	Initial component's state. When `true`, users cannot take action on the element.
`label`	String		Caption for an item in the UI component context.
`visible`	Boolean	`true`	Initial component's visibility. When set to `false`, the `display: none` CSS style is added to the component's DOM block.
`additionalClasses`	Object	{}	Custom classes added to the component's DOM block.
`level`	Integer		Explicitly indicates the level of nesting([date-level] attribute).

collapsible configuration

Title	Type	Default	Description
`collapsible`	Boolean	`false`	Enables/disables the collapsible functionality.
`label`	String		Caption for the fieldset.
`opened`	Boolean	`false`	Initial collapsible state. Applied when the collapsible functionality is enabled.

Examples

Integration

The following example adds a new main fieldset that contains a collapsible fieldset into the Form component:

<form>
    <fieldset name="main_fieldset">
        <settings>
            <label translate="true">Other Settings</label>
        </settings>
        <fieldset name="fieldset_group">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="label" xsi:type="string" translate="true">Information</item>
                    <item name="collapsible" xsi:type="boolean">true</item>
                    <item name="opened" xsi:type="boolean">true</item>
                </item>
            </argument>
            <field name="my_field">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="label" xsi:type="string" translate="true">My Field</item>
                        <item name="visible" xsi:type="boolean">true</item>
                        <item name="dataType" xsi:type="string">text</item>
                        <item name="formElement" xsi:type="string">input</item>
                    </item>
                </argument>
            </field>
        </fieldset>
    </fieldset>
</form>
Copied to your clipboard
<form>
    <fieldset name="main_fieldset">
        <settings>
            <label translate="true">Other Settings</label>
        </settings>
        <fieldset name="fieldset_group">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="label" xsi:type="string" translate="true">Information</item>
                    <item name="collapsible" xsi:type="boolean">true</item>
                    <item name="opened" xsi:type="boolean">true</item>
                </item>
            </argument>
            <field name="my_field">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="label" xsi:type="string" translate="true">My Field</item>
                        <item name="visible" xsi:type="boolean">true</item>
                        <item name="dataType" xsi:type="string">text</item>
                        <item name="formElement" xsi:type="string">input</item>
                    </item>
                </argument>
            </field>
        </fieldset>
    </fieldset>
</form>