fieldset

Groups related form controls together with an optional caption. Essential for organizing complex forms and providing accessible groupings for screen readers.

When to Use

  • Grouping related form fields (e.g., billing address, shipping address)
  • Radio button or checkbox groups that belong together
  • Sections of a multi-part form
  • Any time you need to provide a group label for accessibility

Always include a legend as the first child to provide a caption for the group.

Basic Usage

A fieldset with a legend creates a visually and semantically grouped form section.

Contact Information

Code

<fieldset> <legend>Contact Information</legend> <layout-stack data-layout-gap="m"> <div class="group"> <label for="name">Full Name</label> <input type="text" id="name" /> </div> <div class="group"> <label for="email">Email Address</label> <input type="email" id="email" /> </div> </layout-stack> </fieldset>

Style Variants

Default (Bordered)

Standard fieldset with a visible border and legend that breaks the border line.

Shipping Address

.minimal

Borderless fieldset for subtle grouping. The legend appears as a heading.

Notification Preferences

Code

<!-- Default bordered fieldset --> <fieldset> <legend>Group Title</legend> <!-- form fields --> </fieldset> <!-- Minimal/borderless fieldset --> <fieldset class="minimal"> <legend>Group Title</legend> <!-- form fields --> </fieldset>

Radio Button Groups

Fieldset is essential for grouping radio buttons. Screen readers will announce the legend before each radio option.

Preferred Contact Method

Code

<fieldset> <legend>Preferred Contact Method</legend> <layout-stack data-layout-gap="s"> <label> <input type="radio" name="contact-method" value="email" checked /> Email </label> <label> <input type="radio" name="contact-method" value="phone" /> Phone </label> <label> <input type="radio" name="contact-method" value="mail" /> Mail </label> </layout-stack> </fieldset>

Checkbox Groups

Group related checkboxes together to indicate they form a set.

Select your interests

Nested Fieldsets

Fieldsets can be nested for complex forms with sub-groupings.

Account Settings
Profile
Privacy

Disabled Fieldset

The disabled attribute on a fieldset disables all form controls within it.

Disabled Section

Code

<fieldset disabled> <legend>Disabled Section</legend> <!-- All controls inside are disabled --> </fieldset>

With form-field

Combine fieldsets with the form-field custom element for enhanced form controls.

Account Details Enter a valid email address At least 8 characters

Accessibility Notes

  • Always include a legend: The legend provides the accessible name for the group
  • Legend must be first child: For proper rendering, legend must be the first element inside fieldset
  • Screen reader behavior: The legend is announced before each control in the group
  • Required for radio groups: Radio buttons should always be in a fieldset for accessibility
  • Avoid nesting too deep: Limit nesting to maintain comprehension

CSS Reference

fieldset { border: var(--border-width-thin) solid var(--color-border); border-radius: var(--radius-m); padding: var(--size-m); margin: 0; } /* Minimal/borderless fieldset */ fieldset.minimal { border: none; padding: 0; } fieldset.minimal > legend { padding: 0; margin-block-end: var(--size-s); font-size: var(--font-size-md); } legend { padding-inline: var(--size-s); font-weight: 600; font-size: var(--font-size-sm); }

Related Elements

  • legend - Caption for the fieldset (required first child)
  • form - Container for fieldsets
  • input - Form controls within fieldsets
  • form-field - Enhanced form field wrapper