--- meta: title: Form Group description: Form groups organize and label multiple related form controls in a grid layout. layout: component --- Form groups are used to organize multiple form controls under a shared label and help text. They provide a responsive grid layout that automatically adapts to different screen sizes, making it easy to create multi-column forms with consistent spacing and alignment. ```html:preview ``` ## Examples ### Basic Form Group Use the `label` attribute to give the form group an accessible label. Form controls within the group are automatically laid out in a responsive grid that displays as a single column on mobile and up to 6 columns on larger screens. ```html:preview ``` ### Help Text Add descriptive help text to a form group with the `help-text` attribute. For help text that contains HTML, use the `help-text` slot instead. Help text appears below the label and provides guidance for the entire group of form controls. ```html:preview
Enter the address associated with your payment method
 ``` ### Label with Tooltip Use the `label-tooltip` attribute to add text that appears in a tooltip triggered by an info icon next to the label. :::tip **Usage:** Use a **label tooltip** to provide helpful but non-essential instructions or examples to guide people when filling in the form group. Use **help text** to communicate instructions or requirements for filling in the controls without errors. ::: ```html:preview ``` ### Using Label Slot For labels that contain HTML or more complex content, use the `label` slot instead of the attribute. ```html:preview Account Settings New ``` ### Controlling Column Spans By default, all form controls within a form group span the full width (6 columns) on mobile and maintain that full width on larger screens. Use the `span` attribute on individual form controls to control how many columns they occupy on medium and larger screens. The grid supports spans from 1 to 6 columns. Spans only take effect on screens at the `md` breakpoint and above (tablets and desktops). On smaller screens, all controls stack vertically at full width. ```html:preview Electronics Clothing Books Active Inactive ``` ### Two-Column Layout Create a balanced two-column layout by giving each control a span of 3 columns. ```html:preview United States Canada United Kingdom ``` ### Three-Column Layout Create a three-column layout by giving each control a span of 2 columns. ```html:preview Eastern (EST) Central (CST) Mountain (MST) Pacific (PST) ``` ### Mixed Column Layouts Combine different column spans to create flexible layouts that accommodate different types of inputs. ```html:preview United States Canada Mexico Set as default address ``` ### Mixing Form Control Types Form groups work with all Zinc form components including inputs, selects, textareas, datepickers, checkboxes, radios, and toggles. ```html:preview Low Medium High Planning Active Complete Email notifications Weekly reports API access ``` ### Nested Groups with Different Sections Create complex forms by using multiple form groups to separate different sections of related information. ```html:preview


Subscribe to newsletter Receive SMS updates
Create Account
``` ### Single-Column Layout By default, without span attributes, all controls stack vertically in a single column, which works well for forms with long labels or complex inputs. ```html:preview Search Engine Social Media Friend or Colleague Other ``` ### Validation Example Form groups work seamlessly with form validation. Individual controls within the group can have their own validation rules. ```html:preview
United States Canada United Kingdom
Submit Reset
``` ### Responsive Behavior Form groups are responsive by default. The grid layout automatically adapts based on screen size: - **Small screens (mobile):** All controls stack vertically at full width, regardless of span attributes - **Medium screens and up (tablets/desktops):** The span attributes take effect, creating the multi-column layout This ensures forms remain usable on all devices without additional configuration. ```html:preview ``` ### Styling with CSS Parts Form groups expose several CSS parts that can be styled to customize their appearance. This example demonstrates how to create custom layouts using CSS grid. ```html:preview ``` ### Accessibility Form groups are built with accessibility in mind: - The component uses a `
` element to semantically group related form controls - The `label` is associated with the fieldset using `aria-labelledby` - Help text is associated with the fieldset using `aria-describedby` - All form controls within the group maintain their individual labels and accessibility features ```html:preview ```