Fieldset

The Fieldset component groups related form elements together, providing a visual and semantic container with an optional title to help users understand form sections.

When to use:

Use the Fieldset component when you need to:

• Group related form controls logically under a single heading

• Create nested form structures with clear visual hierarchy

• Provide context for a collection of form fields

• Improve form organization and readability for complex forms

• Support accessible form structures that communicate relationships between inputs

When not to use:

Do not use the Fieldset component when:

• A form has only a small number of simple, clearly related inputs that don't require grouping

• The visual boundaries would add unnecessary visual complexity to a simple form

• You need a more lightweight grouping without the visual container

• A single input element stands alone and doesn't require grouping with other elements

---

Best practice guidelines:

• Clear labelling: Always provide a descriptive legend that clearly communicates the purpose of the grouped form elements.

• Logical grouping: Only include related form controls within a fieldset - group elements that share a common purpose.

• Visual hierarchy: Use nested fieldsets to establish clear hierarchical relationships between form sections.

• Descriptive hint text: Include optional hint text when the purpose of the fieldset isn't immediately clear from the legend alone.

• Consistent styling: Maintain consistent visual treatment of fieldsets throughout your interface to improve usability.

• Accessibility focus: Ensure fieldsets and legends are properly marked up to communicate relationships to assistive technologies.

• Responsive design: Design fieldsets to adapt gracefully to different screen sizes, ensuring they remain usable on mobile devices.

• Minimalist approach: Don't overuse fieldsets - only group elements when it genuinely improves form clarity and organization.

Variations:

• Standard fieldset: Basic container with a legend

• Nested fieldset: A fieldset containing other fieldsets to create form hierarchy

• With hint text: Fieldset with additional descriptive text under the legend

• Mobile optimized: Responsive variant with adjusted spacing and layout for small screens

---

Accessibility:

According to the CivicTheme v1.7.0 Accessibility Assessments document, the Fieldset component has been tested against WCAG 2.2 standards with the following results:

WCAG Criterion	Level	Status	Notes
1.3.1 Info and Relationships	A	Pass	Information, structure, and relationships conveyed through presentation can be programmatically determined.
1.4.4 Resize text	AA	Pass	Text is still visible and readable when resized up to 200%.
1.4.12 Text Spacing	AA	Pass	Text remains visible and readable with adjusted text spacing.
2.1.1 Keyboard	A	Pass	Component is fully accessible using keyboard navigation.
2.4.3 Focus Order	A	Pass	Focus order preserves meaning and operability.
2.4.7 Focus Visible	AA	Pass	Keyboard focus is clearly visible.
2.5.8 Target Size (Minimum)	AA	Fail	The target size for pointer inputs does not meet the minimum requirement of 24 by 24 CSS pixels.

Security:

No specific security concerns have been identified for this component. As with all form-related components, implementations should follow standard security practices:

• Validate all form input on the server-side

• Protect against cross-site scripting (XSS) attacks

• Implement appropriate CSRF protection measures

Component inspiration and uplift:

This component has been modelled after Form Groups – a component of Forms – from the Australian Government Design System. It has been uplifted by Salsa Digital, as the custodian of the CivicTheme Design System, in the following ways:

• Provided configuration options to include hint text under each Fieldset label

• Enhanced the semantic structure to improve accessibility

• Recategorized from a Molecule to an Atom to better reflect its fundamental role in the design system

These uplifts were based on user research findings that showed hint text can provide important context to help users successfully complete form fields, eliminating the need for potentially problematic placeholder text within input fields.

---

User research on this component:

★★★☆☆ Confidence rating = Moderate (Based on limited direct research)

Limited specific user research has been conducted on the Fieldset component itself. The current implementation draws on general form usability principles and accessibility guidelines rather than dedicated component-specific testing.

Testing with forms that include fieldsets has shown that properly grouped form elements help users understand relationships between form controls, but more focused research would be beneficial to optimize the component's design and implementation.

Further research is needed to validate current design decisions specifically for the Fieldset component.

Known issues:

• The component fails to meet WCAG 2.2's Target Size requirement (2.5.8), which specifies that interactive elements should be at least 24x24 CSS pixels.

• Limited responsive design testing has been conducted specifically for complex nested fieldsets on small screens.

• When multiple fieldsets are used in sequence, visual differentiation between groups can sometimes be insufficient.

More research needed:

• Usability testing specifically focused on the Fieldset component with diverse user groups

• Research on optimal visual styling of fieldsets to maximize both usability and aesthetic appeal

• Testing to determine the most effective hint text implementation (placement, style, length)

• Investigation of alternatives to traditional fieldset styling for mobile contexts

• Research on the impact of fieldsets on form completion rates and user satisfaction

If you have conducted user research that addresses any of these gaps, you can submit your research findings to help improve this component.

Help improve this component:

To help make this component useful and up-to-date, you can:

• Contribute to our Fieldset component discussion

• Submit your user research findings

• Propose a change to improve WCAG 2.2 compliance, particularly for target size requirements

• Share examples of effective Fieldset implementations

Check out our contributing section to learn more.

---

Resources:

• Figma

• Storybook

• GitHub

References:

• Web Content Accessibility Guidelines (WCAG) 2.2

• Placeholders in Form Fields Are Harmful (Nielsen Norman Group)

• Australian Government Style Manual

• Australian Government Digital Service Standard

Changelog:

Version	Date	Changes
1.8.0	23/07/2024	Renamed Field Group to Fieldset. Re-categorized from a Molecule to an Atom.
1.7.0	20/03/2024	Added WCAG 2.2 compliance testing.
1.6.0	15/01/2024	Added hint text functionality to improve form usability.

Contact us:

If you have a question about the CivicTheme design system or need our help, visit the Getting Help page for guidance.