--- title: "Field Group Component" slug: "field-group-component" updated: 2025-12-04T19:22:56Z published: 2025-12-04T19:22:56Z canonical: "docs.unqork.io/field-group-component" --- > ## Documentation Index > Fetch the complete documentation index at: https://docs.unqork.io/llms.txt > Use this file to discover all available pages before exploring further. # Field Group Component UDesignerClassic Designer The **Field Group component** lets you organize fields and components together in one group. Field Group [components](/v1/docs/module-builder-component-library) are like [Panel](/v1/docs/panel-component) components, but you won't use Field Group components for navigation. You can also apply a CSS style to a Field Group component to call the group out to your end-user. It’s best practice to only use Panel components for navigation. So, if you want the fields to display on their own page, you'll use a Panel component. Use the Field Group component if you want a stylized group of fields as part of a larger page. You'll find the Field Group component under the [Display & Layout](/v1/docs/display-layout) group to the left of the [Module Builder](/v1/docs/introduction-to-the-module-builder). ## About the Configuration Window > To learn more about general component settings, view our [General Component Settings](/v1/docs/general-component-settings) article. ## Display Settings ### Field Text | Setting | Description | | --- | --- | | **Canvas Label Text** | A component’s Label Text indicates the purpose of the corresponding field or component. For non-input components, the Label Text isn't end-user facing, and only appears in the Module Builder. User-friendly labels make your module more accessible. Keep labels short and descriptive (a word or two) using title case. For longer entries, use sentence case. | [![A static image displaying the UDesigner Field Group Component's Display settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/display_thumb_0_0(11).jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A49Z&se=2026-11-08T04%3A56%3A49Z&sr=c&sp=r&sig=kwO6qiIsDMETPbBOfCUfPEkXVRvvVJ45N4Llz%2FB4sec%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/display(12).jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A49Z&se=2026-11-08T04%3A56%3A49Z&sr=c&sp=r&sig=kwO6qiIsDMETPbBOfCUfPEkXVRvvVJ45N4Llz%2FB4sec%3D) #### Default State Options | Setting | Description | | --- | --- | | **Disable All Nested Fields** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A49Z&se=2026-11-08T04%3A56%3A49Z&sr=c&sp=r&sig=kwO6qiIsDMETPbBOfCUfPEkXVRvvVJ45N4Llz%2FB4sec%3D) **(ON)**, all the components inside the Field Group component are disabled in Express View. Use this setting instead of disabling each component. By default, this setting is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A49Z&se=2026-11-08T04%3A56%3A49Z&sr=c&sp=r&sig=kwO6qiIsDMETPbBOfCUfPEkXVRvvVJ45N4Llz%2FB4sec%3D) **(OFF)**. | | **Hide All Nested Fields** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A49Z&se=2026-11-08T04%3A56%3A49Z&sr=c&sp=r&sig=kwO6qiIsDMETPbBOfCUfPEkXVRvvVJ45N4Llz%2FB4sec%3D) **(ON)**, all components inside the Field Group component are hidden in Express View. Use this setting instead of hiding each component. By default, this setting is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A49Z&se=2026-11-08T04%3A56%3A49Z&sr=c&sp=r&sig=kwO6qiIsDMETPbBOfCUfPEkXVRvvVJ45N4Llz%2FB4sec%3D) **(OFF)**. | ## Advanced Settings ### Additional Styling | Setting | Description | | --- | --- | | **Custom CSS Class** | Enter a Custom CSS Class to apply to your component. Custom CSS lets you maintain a consistent look and feel when the field or element is part of a template or multiple modules. Updated CSS styling applies to all components that reference this custom class name. | [![A static image displaying the UDesigner Field Group Component's Advanced settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/advanced_thumb_0_0(10).jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A49Z&se=2026-11-08T04%3A56%3A49Z&sr=c&sp=r&sig=kwO6qiIsDMETPbBOfCUfPEkXVRvvVJ45N4Llz%2FB4sec%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/advanced(11).jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A49Z&se=2026-11-08T04%3A56%3A49Z&sr=c&sp=r&sig=kwO6qiIsDMETPbBOfCUfPEkXVRvvVJ45N4Llz%2FB4sec%3D) ## Accessibility Settings ### ARIA | Setting | Description | | --- | --- | | **Aria** | Use these settings to create ARIA attributes to better support end-users that require screen readers to navigate your applications. | | **Aria Label** | Use this field to define the component when when a screen reader arrives at it in Express View. | | **Aria Role** | ARIA roles provide semantic meaning to content, letting screen readers and other accessibility tools present and support interaction with an element that is consistent with end-user expectations. ARIA roles are used to describe elements that do not exist in HTML or not supported by the browser. > To learn about supported ARIA roles in Unqork, view our [ARIA Accessibility Settings](/v1/docs/aria-accessible-rich-internet-applications-accessibility-settings-reference) reference guide. | [![A static image displaying the UDesigner Field Group Component's Advanced settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/accessibility_thumb_0_0(2).jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A49Z&se=2026-11-08T04%3A56%3A49Z&sr=c&sp=r&sig=kwO6qiIsDMETPbBOfCUfPEkXVRvvVJ45N4Llz%2FB4sec%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/accessibility(2).jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A49Z&se=2026-11-08T04%3A56%3A49Z&sr=c&sp=r&sig=kwO6qiIsDMETPbBOfCUfPEkXVRvvVJ45N4Llz%2FB4sec%3D) ## Adding a Field Group Component In this example, you'll use a Field Group component to group fields that gather personal information. These instructions assume that you have an open module saved with a title. ### Configure the Field Group Component First, add the **F****ield Group** component to your canvas. This component holds personal information questions. 1. In the Module Builder, drag and drop a **F****ield Group** component onto your canvas. 2. In the Property ID field, enter **fgPersonalInfo**. 3. In the Canvas Label Text field, enter fgPersonalInfo. 4. Click **Save Component**. ### Configure the Text Field Components Next, add four Text Field components to hold personal information questions. Place each component inside the **fgPersonalInfo** **F****ield Group** component. 1. Drag and drop four **T****ext Field** components onto your canvas, placing them inside the **fgPersonalInfo** **F****ield Group** component. 2. In the Property ID and Label Text fields of each component, enter the following: | Property ID | Label Text | | --- | --- | | firstName | First Name | | lastName | Last Name | | companyName | Company Name | | jobTitle | Job Title | 3. Click **Save Component** for each component as you add it. 4. **Save** your module. Your completed configuration looks like the following: [Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UDesigner_FieldGroup_Collapse.webm?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A49Z&se=2026-11-08T04%3A56%3A49Z&sr=c&sp=r&sig=kwO6qiIsDMETPbBOfCUfPEkXVRvvVJ45N4Llz%2FB4sec%3D) The **Field Group component** lets you organize fields and components together in one group. Field Group [components](/v1/docs/module-builder-component-library) are like [Panel](/v1/docs/panel-component) components, but you won't use Field Group components for navigation. You can also apply a CSS style to a Field Group component to call the group out to your end-user. Here are some real-world examples of when you might use a Field Group component: - A stylized section of a page asking for personal information. - A boxed-in group of optional survey questions at the end of an application. - Grouped and hidden follow-up questions that appear when an end-user selects a specific answer. - Disabling or hiding all fields in a group. It’s best practice to only use Panel components for navigation. So, if you want the fields to display on their own page, you'll use a Panel component. Use the Field Group component if you want a stylized group of fields as part of a larger page. You'll find the Field Group component under the [Display & Layout](/v1/docs/display-layout) group to the left of the [Module Builder](/v1/docs/introduction-to-the-module-builder). ## About the Configuration Window > To learn more about general component settings and those that display when a component is associated with Data Models, view our [General Component Settings](/v1/docs/general-component-settings) article. ## Display Panel [![A static image dispaying the Field Group component's Display settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/FieldGroup_Display_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A49Z&se=2026-11-08T04%3A56%3A49Z&sr=c&sp=r&sig=kwO6qiIsDMETPbBOfCUfPEkXVRvvVJ45N4Llz%2FB4sec%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/FieldGroup%20Display.jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A49Z&se=2026-11-08T04%3A56%3A49Z&sr=c&sp=r&sig=kwO6qiIsDMETPbBOfCUfPEkXVRvvVJ45N4Llz%2FB4sec%3D) #### Field Text | Setting | Description | | --- | --- | | **Canvas Label Text** | A component’s Label Text indicates the purpose of the corresponding field or component. For non-input components, the Label Text isn't end-user facing, and only appears in the Module Builder. User-friendly labels make your module more accessible. Keep labels short and descriptive (a word or two) using title case. For longer entries, use sentence case. | #### Default State Options | Setting | Description | | --- | --- | | **Disable All Nested Fields** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A49Z&se=2026-11-08T04%3A56%3A49Z&sr=c&sp=r&sig=kwO6qiIsDMETPbBOfCUfPEkXVRvvVJ45N4Llz%2FB4sec%3D) **(ON)**, all the components inside the Field Group component are disabled in Express View. Use this setting instead of disabling each component. By default, this setting is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A49Z&se=2026-11-08T04%3A56%3A49Z&sr=c&sp=r&sig=kwO6qiIsDMETPbBOfCUfPEkXVRvvVJ45N4Llz%2FB4sec%3D) **(OFF)**. | | **Hide All Nested Fields** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A49Z&se=2026-11-08T04%3A56%3A49Z&sr=c&sp=r&sig=kwO6qiIsDMETPbBOfCUfPEkXVRvvVJ45N4Llz%2FB4sec%3D) **(ON)**, all components inside the Field Group component are hidden in Express View. Use this setting instead of hiding each component. By default, this setting is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A49Z&se=2026-11-08T04%3A56%3A49Z&sr=c&sp=r&sig=kwO6qiIsDMETPbBOfCUfPEkXVRvvVJ45N4Llz%2FB4sec%3D) **(OFF)**. | ## Advanced Panel [![A static image dispaying the Field Group component's Advanced settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/FieldGroup_Advanced_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A49Z&se=2026-11-08T04%3A56%3A49Z&sr=c&sp=r&sig=kwO6qiIsDMETPbBOfCUfPEkXVRvvVJ45N4Llz%2FB4sec%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/FieldGroup%20Advanced.jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A49Z&se=2026-11-08T04%3A56%3A49Z&sr=c&sp=r&sig=kwO6qiIsDMETPbBOfCUfPEkXVRvvVJ45N4Llz%2FB4sec%3D) #### Additional Styling | Setting | Description | | --- | --- | | **Custom CSS Class** | Enter a Custom CSS Class to apply to your component. Custom CSS lets you maintain a consistent look and feel when the field or element is part of a template or multiple modules. Updated CSS styling applies to all components that reference this custom class name. | ## Accessibility Panel [![A static image dispaying the Field Group component's Advanced settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/classic_accessibility_thumb_0_0(2).jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A49Z&se=2026-11-08T04%3A56%3A49Z&sr=c&sp=r&sig=kwO6qiIsDMETPbBOfCUfPEkXVRvvVJ45N4Llz%2FB4sec%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/classic%20accessibility(2).jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A49Z&se=2026-11-08T04%3A56%3A49Z&sr=c&sp=r&sig=kwO6qiIsDMETPbBOfCUfPEkXVRvvVJ45N4Llz%2FB4sec%3D) ### ARIA | Setting | Description | | --- | --- | | **Aria** | Use these settings to create ARIA attributes to better support end-users that require screen readers to navigate your applications. | | **Aria Label** | Use this field to define the component when when a screen reader arrives at it in Express View. | | **Aria Role** | ARIA roles provide semantic meaning to content, letting screen readers and other accessibility tools present and support interaction with an element that is consistent with end-user expectations. ARIA roles are used to describe elements that do not exist in HTML or not supported by the browser. > To learn about supported ARIA roles in Unqork, view our [ARIA Accessibility Settings](/v1/docs/aria-accessible-rich-internet-applications-accessibility-settings-reference) reference guide. | ## Adding a Field Group Component In this example, you'll use a Field Group component to group fields that gather personal information. These instructions assume that you have an open module saved with a title. ### Configure the Field Group Component First, add the Field Group component to your canvas. This component holds personal information questions. 1. In the Module Builder, drag and drop a **F****ield Group** component onto your canvas. 2. In the Property ID and Canvas Label Text fields, enter **fgPersonalInfo**. 3. Click **Save & Close**. ### Configure the Text Field Components Next, you'll use four Text Field components to hold your personal information questions. You'll place each component inside the Field Group component. 1. Drag and drop four **T****ext Field** components onto your canvas, placing them inside the **F****ield Group** component. 2. In the Property ID and Label Text fields of each component, enter the following: | Property ID | Label Text | | --- | --- | | firstName | First Name | | lastName | Last Name | | companyName | Company Name | | jobTitle | Job Title | 3. **Save & Close** each component as you add it. 4. **Save** your module. Your completed configuration looks like the following: [Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/FieldGroup_Complete.webm?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A49Z&se=2026-11-08T04%3A56%3A49Z&sr=c&sp=r&sig=kwO6qiIsDMETPbBOfCUfPEkXVRvvVJ45N4Llz%2FB4sec%3D) ## Resources - [Modify the Field Group component using the toolbar settings](/v1/docs/component-toolbar-settings). - [Panel Component](/v1/docs/panel-component). - [Text Field Component](/v1/docs/text-field-component). - [Get help in the Community Hub](https://community.unqork.com/search?q=field%20group). End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product. Cascading Style Sheets (CSS) is a style sheet language used for presenting how a HTML or XML document looks to end-users. ARIA (Accessible Rich Internet Applications) is a set of attributes used in HTML to enhance the accessibility of web content, particularly dynamic or interactive web pages, for users who rely on assistive technologies like screen readers. Assistive technology that reads digital text aloud for users with visual impairments or reading disabilities. Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View. A Property ID is the unique field ID used by Unqork to track and link components in your module. Canvas Label Text indicates the purpose of the corresponding field or component. For non-input components, the Canvas Label Text isn't end-user facing, and only appears in the . Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.