diff --git a/common/images/ui_comps/fieldset-component-result.png b/common/images/ui_comps/fieldset-component-result.png new file mode 100644 index 00000000000..611aa51cf08 Binary files /dev/null and b/common/images/ui_comps/fieldset-component-result.png differ diff --git a/guides/v2.2/ui_comp_guide/components/ui-fieldset.md b/guides/v2.2/ui_comp_guide/components/ui-fieldset.md index 0790b6cde82..7d7e1fe1d72 100644 --- a/guides/v2.2/ui_comp_guide/components/ui-fieldset.md +++ b/guides/v2.2/ui_comp_guide/components/ui-fieldset.md @@ -20,8 +20,48 @@ The Fieldset component implements a container for visually-grouped form elements | 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 + +### Integrate the Fieldset component with the Form component + +The following example adds a new main fieldset that contains a collapsible fieldset into the [Form]({{ page.baseurl }}/ui_comp_guide/components/ui-form.html) component: + +```xml +
+
+ + + +
+ + + Information + true + true + + + + + + My Field + true + text + input + + + +
+
+
+``` + +#### Result + +![Checkbox UiComponent]({{ site.baseurl }}/common/images/ui_comps/fieldset-component-result.png) + ## Source files Extends [`uiCollection`]({{ page.baseurl }}/ui_comp_guide/concepts/ui_comp_uicollection_concept.html) and `collapsible`: