CivicTheme
  • Docs
  • Changelog
  • Getting started
    • Introduction
    • Installation
    • Getting help
    • Security policy
    • Partnerships
  • Installation
    • Drupal theme
  • Contributing
    • Contribution model
    • Contribution basics
    • Small contribution spec
    • Medium contribution spec
    • Major (RFC-level) contribution spec
    • Code of conduct
    • Figma contributions
  • Components
    • Component list
    • Atoms
      • Button
      • Chip
      • Content link
      • Check box
      • Field description
      • Field message
      • Fieldset
      • Label
      • Radio
      • Select
      • Textarea
      • Text field
      • Heading
      • Link
      • Paragraph
      • Popover
      • Quote
      • Table
      • Tag
      • Text list
    • Molecules
      • Accordion
      • Attachment
      • Breadcrumb
      • Callout
      • Event Card
      • Field
      • Figure
      • Group filter
      • Logo
      • Map
      • Navigation card
      • Next step
      • Pagination
      • Promo card
      • Search
      • Service card
      • Single filter
      • Snippet
      • Subject Card
      • Table of Contents
      • Tabs
      • Tag List
      • Tooltip
      • Video Player
    • Organisms
      • Alert
      • Banner
      • Campaign
      • Footer
      • Header
      • List
      • Message
      • Mobile Navigation
      • Navigation
      • Promo
      • Side Navigation
      • Skip link
      • Slider
      • Social links
  • Content Authoring
    • Overview
    • Global settings
      • Favicon
      • Header
        • Site slogan
        • Header logos
        • Primary navigation
        • Secondary navigation
      • Banner
      • Search
      • Link
      • Skip link
      • Side navigation
      • Signup
      • Footer
        • Footer logo
        • Social links
        • Footer navigation
        • Acknowledgement of Country
        • Copyright
      • Colours
    • Content types
      • Page
        • Configure the banner
      • Event
      • Alert
    • Content components
      • Accordion
      • Automated list
      • Attachment
      • Callout
      • Campaign
      • Content
        • Quote
      • iFrame
      • Manual List
        • Event card
        • Event reference card
        • Navigation card
        • Navigation reference card
        • Promo card
        • Promo reference card
        • Publication card
        • Service card
        • Subject card
        • Subject reference card
        • Snippet
      • Map
      • Next step
      • Promo
      • Slider
      • Webform
    • Vocabularies
      • Topics
      • Site sections
    • User accounts & roles
Powered by GitBook
On this page
  • When to use:
  • When not to use:
  • Best practice guidelines:
  • Variations:
  • Accessibility:
  • Security:
  • Component inspiration and uplift:
  • User research on this component:
  • Known issues:
  • More research needed:
  • Help improve this component:
  • Resources:
  • References:
  • Changelog:
  • Contact us:

Was this helpful?

Edit on GitHub
Export as PDF
  1. Components
  2. Atoms

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


Resources:

  • Storybook

  • GitHub

References:

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:

PreviousField messageNextLabel

Last updated 1 month ago

Was this helpful?

Check out our to learn more.

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

contributing section
Figma
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
Getting Help