<fieldset> - The Fieldset Element

The `<fieldset>` Element

Form Control HTML 4.0

The fieldset element groups related form controls together, creating a logical and visual container. It’s especially important for accessibility, helping screen readers understand the relationship between form fields.

Quick Example

<form>
<fieldset>
  <legend>Personal Information</legend>

  <label for="firstname">First Name:</label>
  <input type="text" id="firstname" name="firstname" required>

  <label for="lastname">Last Name:</label>
  <input type="text" id="lastname" name="lastname" required>
</fieldset>

<fieldset>
  <legend>Contact Details</legend>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>

  <label for="phone">Phone:</label>
  <input type="tel" id="phone" name="phone">
</fieldset>

<button type="submit">Submit</button>
</form>

Result

Interactive code playground requires JavaScript. Here's the code:

<form>
<fieldset>
  <legend>Personal Information</legend>

  <label for="firstname">First Name:</label>
  <input type="text" id="firstname" name="firstname" required>

  <label for="lastname">Last Name:</label>
  <input type="text" id="lastname" name="lastname" required>
</fieldset>

<fieldset>
  <legend>Contact Details</legend>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>

  <label for="phone">Phone:</label>
  <input type="tel" id="phone" name="phone">
</fieldset>

<button type="submit">Submit</button>
</form>

Syntax

<fieldset>
  <legend>Group Title</legend>
  <!-- Form controls go here -->
</fieldset>

A fieldset typically contains a <legend> element as its first child, which provides a caption for the group.

Attributes

Core Attributes

Attribute	Description	Example
`disabled`	Disables all controls in the fieldset	`disabled`
`form`	Associates with a form by ID	`form="myForm"`
`name`	Name of the fieldset	`name="shipping"`

Common Use Cases

Grouping Personal Information

<form>
<fieldset>
  <legend>Personal Information</legend>

  <label for="fullname">Full Name:</label>
  <input type="text" id="fullname" name="fullname" required>

  <label for="birthday">Date of Birth:</label>
  <input type="date" id="birthday" name="birthday" required>

  <label for="nationality">Nationality:</label>
  <select id="nationality" name="nationality">
    <option value="">Select...</option>
    <option value="us">United States</option>
    <option value="uk">United Kingdom</option>
    <option value="ca">Canada</option>
  </select>
</fieldset>
</form>

Result

Interactive code playground requires JavaScript. Here's the code:

<form>
<fieldset>
  <legend>Personal Information</legend>

  <label for="fullname">Full Name:</label>
  <input type="text" id="fullname" name="fullname" required>

  <label for="birthday">Date of Birth:</label>
  <input type="date" id="birthday" name="birthday" required>

  <label for="nationality">Nationality:</label>
  <select id="nationality" name="nationality">
    <option value="">Select...</option>
    <option value="us">United States</option>
    <option value="uk">United Kingdom</option>
    <option value="ca">Canada</option>
  </select>
</fieldset>
</form>

Radio Button Groups

<form>
<fieldset>
  <legend>Preferred Contact Method</legend>

  <label>
    <input type="radio" name="contact" value="email" required>
    Email
  </label>

  <label>
    <input type="radio" name="contact" value="phone">
    Phone
  </label>

  <label>
    <input type="radio" name="contact" value="sms">
    SMS
  </label>
</fieldset>
</form>

Result

Interactive code playground requires JavaScript. Here's the code:

<form>
<fieldset>
  <legend>Preferred Contact Method</legend>

  <label>
    <input type="radio" name="contact" value="email" required>
    Email
  </label>

  <label>
    <input type="radio" name="contact" value="phone">
    Phone
  </label>

  <label>
    <input type="radio" name="contact" value="sms">
    SMS
  </label>
</fieldset>
</form>

Checkbox Groups

<form>
<fieldset>
  <legend>Select Your Interests</legend>

  <label>
    <input type="checkbox" name="interests" value="technology">
    Technology
  </label>

  <label>
    <input type="checkbox" name="interests" value="sports">
    Sports
  </label>

  <label>
    <input type="checkbox" name="interests" value="music">
    Music
  </label>

  <label>
    <input type="checkbox" name="interests" value="travel">
    Travel
  </label>
</fieldset>
</form>

Result

Interactive code playground requires JavaScript. Here's the code:

<form>
<fieldset>
  <legend>Select Your Interests</legend>

  <label>
    <input type="checkbox" name="interests" value="technology">
    Technology
  </label>

  <label>
    <input type="checkbox" name="interests" value="sports">
    Sports
  </label>

  <label>
    <input type="checkbox" name="interests" value="music">
    Music
  </label>

  <label>
    <input type="checkbox" name="interests" value="travel">
    Travel
  </label>
</fieldset>
</form>

Address Form

<form>
<fieldset>
  <legend>Billing Address</legend>

  <label for="street">Street Address:</label>
  <input type="text" id="street" name="street" required>

  <label for="city">City:</label>
  <input type="text" id="city" name="city" required>

  <label for="state">State:</label>
  <input type="text" id="state" name="state">

  <label for="zip">ZIP Code:</label>
  <input type="text" id="zip" name="zip" pattern="[0-9]{5}" required>

  <label for="country">Country:</label>
  <select id="country" name="country" required>
    <option value="us">United States</option>
    <option value="ca">Canada</option>
  </select>
</fieldset>
</form>

Result

Interactive code playground requires JavaScript. Here's the code:

<form>
<fieldset>
  <legend>Billing Address</legend>

  <label for="street">Street Address:</label>
  <input type="text" id="street" name="street" required>

  <label for="city">City:</label>
  <input type="text" id="city" name="city" required>

  <label for="state">State:</label>
  <input type="text" id="state" name="state">

  <label for="zip">ZIP Code:</label>
  <input type="text" id="zip" name="zip" pattern="[0-9]{5}" required>

  <label for="country">Country:</label>
  <select id="country" name="country" required>
    <option value="us">United States</option>
    <option value="ca">Canada</option>
  </select>
</fieldset>
</form>

Disabled Fieldset

<form>
<fieldset disabled>
  <legend>Unavailable Section</legend>

  <label for="locked1">Field 1:</label>
  <input type="text" id="locked1" name="field1" value="Disabled">

  <label for="locked2">Field 2:</label>
  <input type="text" id="locked2" name="field2" value="Disabled">

  <button type="submit">Submit (Disabled)</button>
</fieldset>

<p>All controls in the disabled fieldset are inactive</p>
</form>

Result

Interactive code playground requires JavaScript. Here's the code:

<form>
<fieldset disabled>
  <legend>Unavailable Section</legend>

  <label for="locked1">Field 1:</label>
  <input type="text" id="locked1" name="field1" value="Disabled">

  <label for="locked2">Field 2:</label>
  <input type="text" id="locked2" name="field2" value="Disabled">

  <button type="submit">Submit (Disabled)</button>
</fieldset>

<p>All controls in the disabled fieldset are inactive</p>
</form>

Nested Fieldsets

<form>
<fieldset>
  <legend>Shipping Information</legend>

  <label>
    <input type="checkbox" id="same-as-billing" name="sameAsBilling">
    Same as billing address
  </label>

  <fieldset>
    <legend>Shipping Address</legend>

    <label for="ship-street">Street:</label>
    <input type="text" id="ship-street" name="shipStreet">

    <label for="ship-city">City:</label>
    <input type="text" id="ship-city" name="shipCity">
  </fieldset>

  <fieldset>
    <legend>Delivery Options</legend>

    <label>
      <input type="radio" name="delivery" value="standard">
      Standard (5-7 days)
    </label>

    <label>
      <input type="radio" name="delivery" value="express">
      Express (2-3 days)
    </label>
  </fieldset>
</fieldset>
</form>

Result

Interactive code playground requires JavaScript. Here's the code:

<form>
<fieldset>
  <legend>Shipping Information</legend>

  <label>
    <input type="checkbox" id="same-as-billing" name="sameAsBilling">
    Same as billing address
  </label>

  <fieldset>
    <legend>Shipping Address</legend>

    <label for="ship-street">Street:</label>
    <input type="text" id="ship-street" name="shipStreet">

    <label for="ship-city">City:</label>
    <input type="text" id="ship-city" name="shipCity">
  </fieldset>

  <fieldset>
    <legend>Delivery Options</legend>

    <label>
      <input type="radio" name="delivery" value="standard">
      Standard (5-7 days)
    </label>

    <label>
      <input type="radio" name="delivery" value="express">
      Express (2-3 days)
    </label>
  </fieldset>
</fieldset>
</form>

Multi-step Form

<form>
<fieldset>
  <legend>Step 1: Account Details</legend>

  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>

  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required>
</fieldset>

<fieldset>
  <legend>Step 2: Profile</legend>

  <label for="bio">Bio:</label>
  <textarea id="bio" name="bio" rows="3"></textarea>

  <label for="avatar">Avatar:</label>
  <input type="file" id="avatar" name="avatar" accept="image/*">
</fieldset>

<button type="submit">Create Account</button>
</form>

Result

Interactive code playground requires JavaScript. Here's the code:

<form>
<fieldset>
  <legend>Step 1: Account Details</legend>

  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>

  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required>
</fieldset>

<fieldset>
  <legend>Step 2: Profile</legend>

  <label for="bio">Bio:</label>
  <textarea id="bio" name="bio" rows="3"></textarea>

  <label for="avatar">Avatar:</label>
  <input type="file" id="avatar" name="avatar" accept="image/*">
</fieldset>

<button type="submit">Create Account</button>
</form>

Styling Fieldsets

Basic Styled Fieldset

<style>
.styled-fieldset {
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  padding: 20px;
  margin: 20px 0;
}

.styled-fieldset legend {
  padding: 0 10px;
  font-weight: 600;
  color: #1f2937;
}

.styled-fieldset label {
  display: block;
  margin: 10px 0 5px;
}

.styled-fieldset input {
  width: 100%;
  padding: 8px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
}
</style>

<form>
<fieldset class="styled-fieldset">
  <legend>Contact Information</legend>

  <label for="name-styled">Name:</label>
  <input type="text" id="name-styled" name="name">

  <label for="email-styled">Email:</label>
  <input type="email" id="email-styled" name="email">
</fieldset>
</form>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.styled-fieldset {
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  padding: 20px;
  margin: 20px 0;
}

.styled-fieldset legend {
  padding: 0 10px;
  font-weight: 600;
  color: #1f2937;
}

.styled-fieldset label {
  display: block;
  margin: 10px 0 5px;
}

.styled-fieldset input {
  width: 100%;
  padding: 8px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
}
</style>

<form>
<fieldset class="styled-fieldset">
  <legend>Contact Information</legend>

  <label for="name-styled">Name:</label>
  <input type="text" id="name-styled" name="name">

  <label for="email-styled">Email:</label>
  <input type="email" id="email-styled" name="email">
</fieldset>
</form>

Modern Card Style

<style>
.card-fieldset {
  border: none;
  background: #f9fafb;
  border-radius: 12px;
  padding: 24px;
  margin: 20px 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.card-fieldset legend {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 16px;
  padding: 0;
}

.card-fieldset label {
  display: block;
  font-weight: 500;
  margin-top: 12px;
  margin-bottom: 4px;
}

.card-fieldset input {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid #e5e7eb;
  border-radius: 6px;
  font-size: 16px;
}
</style>

<form>
<fieldset class="card-fieldset">
  <legend>Sign In</legend>

  <label for="user">Username:</label>
  <input type="text" id="user" name="username">

  <label for="pass">Password:</label>
  <input type="password" id="pass" name="password">
</fieldset>
</form>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.card-fieldset {
  border: none;
  background: #f9fafb;
  border-radius: 12px;
  padding: 24px;
  margin: 20px 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.card-fieldset legend {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 16px;
  padding: 0;
}

.card-fieldset label {
  display: block;
  font-weight: 500;
  margin-top: 12px;
  margin-bottom: 4px;
}

.card-fieldset input {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid #e5e7eb;
  border-radius: 6px;
  font-size: 16px;
}
</style>

<form>
<fieldset class="card-fieldset">
  <legend>Sign In</legend>

  <label for="user">Username:</label>
  <input type="text" id="user" name="username">

  <label for="pass">Password:</label>
  <input type="password" id="pass" name="password">
</fieldset>
</form>

Remove Default Border

<style>
.borderless-fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

.borderless-fieldset legend {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
  padding: 0;
}

.borderless-fieldset label {
  display: block;
  margin: 8px 0;
}
</style>

<form>
<fieldset class="borderless-fieldset">
  <legend>Newsletter Preferences</legend>

  <label>
    <input type="checkbox" name="daily">
    Daily digest
  </label>

  <label>
    <input type="checkbox" name="weekly">
    Weekly summary
  </label>

  <label>
    <input type="checkbox" name="monthly">
    Monthly newsletter
  </label>
</fieldset>
</form>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.borderless-fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

.borderless-fieldset legend {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
  padding: 0;
}

.borderless-fieldset label {
  display: block;
  margin: 8px 0;
}
</style>

<form>
<fieldset class="borderless-fieldset">
  <legend>Newsletter Preferences</legend>

  <label>
    <input type="checkbox" name="daily">
    Daily digest
  </label>

  <label>
    <input type="checkbox" name="weekly">
    Weekly summary
  </label>

  <label>
    <input type="checkbox" name="monthly">
    Monthly newsletter
  </label>
</fieldset>
</form>

Dynamic Fieldsets

Enable/Disable Fieldset

<form>
<label>
  <input type="checkbox" id="enable-shipping">
  Enable shipping options
</label>

<fieldset id="shipping-fieldset" disabled>
  <legend>Shipping Method</legend>

  <label>
    <input type="radio" name="shipping" value="standard">
    Standard Shipping
  </label>

  <label>
    <input type="radio" name="shipping" value="express">
    Express Shipping
  </label>
</fieldset>
</form>

<script>
const checkbox = document.getElementById('enable-shipping');
const fieldset = document.getElementById('shipping-fieldset');

checkbox.addEventListener('change', (e) => {
  fieldset.disabled = !e.target.checked;
});
</script>

Result

Interactive code playground requires JavaScript. Here's the code:

<form>
<label>
  <input type="checkbox" id="enable-shipping">
  Enable shipping options
</label>

<fieldset id="shipping-fieldset" disabled>
  <legend>Shipping Method</legend>

  <label>
    <input type="radio" name="shipping" value="standard">
    Standard Shipping
  </label>

  <label>
    <input type="radio" name="shipping" value="express">
    Express Shipping
  </label>
</fieldset>
</form>

<script>
const checkbox = document.getElementById('enable-shipping');
const fieldset = document.getElementById('shipping-fieldset');

checkbox.addEventListener('change', (e) => {
  fieldset.disabled = !e.target.checked;
});
</script>

Conditional Fieldsets

<form>
<label for="user-type">I am a:</label>
<select id="user-type" name="userType">
  <option value="">Select...</option>
  <option value="individual">Individual</option>
  <option value="business">Business</option>
</select>

<fieldset id="individual-fields" style="display: none;">
  <legend>Personal Details</legend>
  <label for="ssn">SSN:</label>
  <input type="text" id="ssn" name="ssn">
</fieldset>

<fieldset id="business-fields" style="display: none;">
  <legend>Business Details</legend>
  <label for="ein">EIN:</label>
  <input type="text" id="ein" name="ein">
</fieldset>
</form>

<script>
document.getElementById('user-type').addEventListener('change', (e) => {
  document.getElementById('individual-fields').style.display =
    e.target.value === 'individual' ? 'block' : 'none';
  document.getElementById('business-fields').style.display =
    e.target.value === 'business' ? 'block' : 'none';
});
</script>

Result

Interactive code playground requires JavaScript. Here's the code:

<form>
<label for="user-type">I am a:</label>
<select id="user-type" name="userType">
  <option value="">Select...</option>
  <option value="individual">Individual</option>
  <option value="business">Business</option>
</select>

<fieldset id="individual-fields" style="display: none;">
  <legend>Personal Details</legend>
  <label for="ssn">SSN:</label>
  <input type="text" id="ssn" name="ssn">
</fieldset>

<fieldset id="business-fields" style="display: none;">
  <legend>Business Details</legend>
  <label for="ein">EIN:</label>
  <input type="text" id="ein" name="ein">
</fieldset>
</form>

<script>
document.getElementById('user-type').addEventListener('change', (e) => {
  document.getElementById('individual-fields').style.display =
    e.target.value === 'individual' ? 'block' : 'none';
  document.getElementById('business-fields').style.display =
    e.target.value === 'business' ? 'block' : 'none';
});
</script>

Accessibility

<fieldset>
  <legend>Shipping Method</legend>

  <label>
    <input type="radio" name="shipping" value="standard">
    Standard
  </label>

  <label>
    <input type="radio" name="shipping" value="express">
    Express
  </label>
</fieldset>

<fieldset>
  <label>
    <input type="radio" name="shipping" value="standard">
    Standard Shipping
  </label>

  <label>
    <input type="radio" name="shipping" value="express">
    Express Shipping
  </label>
</fieldset>

Required Fields in Fieldset

<form>
<fieldset>
  <legend>
    Contact Preference
    <span aria-label="required">*</span>
  </legend>

  <label>
    <input type="radio" name="contact-pref" value="email" required>
    Email
  </label>

  <label>
    <input type="radio" name="contact-pref" value="phone">
    Phone
  </label>
</fieldset>
</form>

Result

Interactive code playground requires JavaScript. Here's the code:

<form>
<fieldset>
  <legend>
    Contact Preference
    <span aria-label="required">*</span>
  </legend>

  <label>
    <input type="radio" name="contact-pref" value="email" required>
    Email
  </label>

  <label>
    <input type="radio" name="contact-pref" value="phone">
    Phone
  </label>
</fieldset>
</form>

Error Messages for Groups

<form>
<fieldset aria-invalid="true" aria-describedby="shipping-error">
  <legend>Shipping Method</legend>

  <label>
    <input type="radio" name="ship" value="standard">
    Standard
  </label>

  <label>
    <input type="radio" name="ship" value="express">
    Express
  </label>

  <div id="shipping-error" role="alert" style="color: red;">
    Please select a shipping method
  </div>
</fieldset>
</form>

Result

Interactive code playground requires JavaScript. Here's the code:

<form>
<fieldset aria-invalid="true" aria-describedby="shipping-error">
  <legend>Shipping Method</legend>

  <label>
    <input type="radio" name="ship" value="standard">
    Standard
  </label>

  <label>
    <input type="radio" name="ship" value="express">
    Express
  </label>

  <div id="shipping-error" role="alert" style="color: red;">
    Please select a shipping method
  </div>
</fieldset>
</form>

Fieldsets improve keyboard navigation by:

Grouping related controls logically
Allowing screen readers to skip entire groups
Providing context when navigating between fields

Best Practices

Use for Logical Grouping

Good
Avoid

<fieldset>
  <legend>Payment Method</legend>
  <!-- Payment options -->
</fieldset>

<fieldset>
  <legend>Billing Address</legend>
  <!-- Address fields -->
</fieldset>

<!-- Mixing unrelated fields -->
<fieldset>
  <legend>Information</legend>
  <!-- Payment AND address AND preferences -->
</fieldset>

Don’t Overuse

Not every group of inputs needs a fieldset:

Simple (No Fieldset Needed)

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">

  <label for="email">Email:</label>
  <input type="email" id="email" name="email">

  <button type="submit">Submit</button>
</form>

Good Use
Unnecessary

<fieldset>
  <legend>T-Shirt Size</legend>
  <label><input type="radio" name="size" value="s">Small</label>
  <label><input type="radio" name="size" value="m">Medium</label>
  <label><input type="radio" name="size" value="l">Large</label>
</fieldset>

<!-- Single checkbox doesn't need fieldset -->
<label>
  <input type="checkbox" name="agree">
  I agree to terms
</label>

Browser Support

Browser	Version	Notes
Chrome	1+	Full support
Firefox	1+	Full support
Safari	1+	Full support
Edge	12+	Full support
IE	4+	Full support

The <fieldset> element has been supported since early browser versions.

Provides a caption for the fieldset. Learn more →

Associates text with individual form controls. Learn more →

<fieldset> - The Fieldset Element

The `<fieldset>` Element

Quick Example

Syntax

Attributes

Core Attributes

Common Use Cases

Grouping Personal Information

Radio Button Groups

Checkbox Groups

Address Form

Disabled Fieldset

Nested Fieldsets

Multi-step Form

Styling Fieldsets

Basic Styled Fieldset

Modern Card Style

Remove Default Border

Dynamic Fieldsets

Enable/Disable Fieldset

Conditional Fieldsets

Accessibility

Always Use with Legend

Required Fields in Fieldset

Error Messages for Groups

Keyboard Navigation

Best Practices

Use for Logical Grouping

Don’t Overuse

Browser Support

Specifications

<fieldset> - The Fieldset Element

The <fieldset> Element

Quick Example

Syntax

Attributes

Core Attributes

Common Use Cases

Grouping Personal Information

Radio Button Groups

Checkbox Groups

Address Form

Disabled Fieldset

Nested Fieldsets

Multi-step Form

Styling Fieldsets

Basic Styled Fieldset

Modern Card Style

Remove Default Border

Dynamic Fieldsets

Enable/Disable Fieldset

Conditional Fieldsets

Accessibility

Always Use with Legend

Required Fields in Fieldset

Error Messages for Groups

Keyboard Navigation

Best Practices

Use for Logical Grouping

Don’t Overuse

Use for Related Choices

Browser Support

Related Elements

Specifications

The `<fieldset>` Element