<legend> - The Legend Element

The `<legend>` Element

Form Control HTML 4.0

The legend element provides a caption or title for its parent <fieldset> element. It helps users understand what a group of form controls represents and is essential for accessibility.

Quick Example

<form>
<fieldset>
  <legend>Contact Preferences</legend>

  <label>
    <input type="checkbox" name="email" checked>
    Email notifications
  </label>

  <label>
    <input type="checkbox" name="sms">
    SMS notifications
  </label>

  <label>
    <input type="checkbox" name="phone">
    Phone calls
  </label>
</fieldset>
</form>

Result

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

<form>
<fieldset>
  <legend>Contact Preferences</legend>

  <label>
    <input type="checkbox" name="email" checked>
    Email notifications
  </label>

  <label>
    <input type="checkbox" name="sms">
    SMS notifications
  </label>

  <label>
    <input type="checkbox" name="phone">
    Phone calls
  </label>
</fieldset>
</form>

Syntax

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

The legend must be the first child of a <fieldset> element.

Attributes

The <legend> element has no specific attributes beyond the global attributes like id, class, and style.

Common Use Cases

Radio Button Groups

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

  <label>
    <input type="radio" name="shipping" value="standard" required>
    Standard Delivery (5-7 days) - Free
  </label>

  <label>
    <input type="radio" name="shipping" value="express">
    Express Delivery (2-3 days) - $9.99
  </label>

  <label>
    <input type="radio" name="shipping" value="overnight">
    Overnight Delivery - $24.99
  </label>
</fieldset>
</form>

Result

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

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

  <label>
    <input type="radio" name="shipping" value="standard" required>
    Standard Delivery (5-7 days) - Free
  </label>

  <label>
    <input type="radio" name="shipping" value="express">
    Express Delivery (2-3 days) - $9.99
  </label>

  <label>
    <input type="radio" name="shipping" value="overnight">
    Overnight Delivery - $24.99
  </label>
</fieldset>
</form>

Checkbox Groups

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

  <label>
    <input type="checkbox" name="interests" value="coding">
    Programming
  </label>

  <label>
    <input type="checkbox" name="interests" value="design">
    Design
  </label>

  <label>
    <input type="checkbox" name="interests" value="marketing">
    Marketing
  </label>

  <label>
    <input type="checkbox" name="interests" value="writing">
    Writing
  </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="coding">
    Programming
  </label>

  <label>
    <input type="checkbox" name="interests" value="design">
    Design
  </label>

  <label>
    <input type="checkbox" name="interests" value="marketing">
    Marketing
  </label>

  <label>
    <input type="checkbox" name="interests" value="writing">
    Writing
  </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="zip">ZIP Code:</label>
  <input type="text" id="zip" name="zip" pattern="[0-9]{5}" required>
</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="zip">ZIP Code:</label>
  <input type="text" id="zip" name="zip" pattern="[0-9]{5}" required>
</fieldset>
</form>

Personal Information

<form>
<fieldset>
  <legend>Personal Details</legend>

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

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

  <label for="gender">Gender:</label>
  <select id="gender" name="gender">
    <option value="">Prefer not to say</option>
    <option value="male">Male</option>
    <option value="female">Female</option>
    <option value="other">Other</option>
  </select>
</fieldset>
</form>

Result

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

<form>
<fieldset>
  <legend>Personal Details</legend>

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

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

  <label for="gender">Gender:</label>
  <select id="gender" name="gender">
    <option value="">Prefer not to say</option>
    <option value="male">Male</option>
    <option value="female">Female</option>
    <option value="other">Other</option>
  </select>
</fieldset>
</form>

Multi-step Forms

<form>
<fieldset>
  <legend>Step 1 of 3: Account Information</legend>

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

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

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

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

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

  <label for="location">Location:</label>
  <input type="text" id="location" name="location">
</fieldset>

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

Result

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

<form>
<fieldset>
  <legend>Step 1 of 3: Account Information</legend>

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

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

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

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

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

  <label for="location">Location:</label>
  <input type="text" id="location" name="location">
</fieldset>

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

Required Field Indication

<form>
<fieldset>
  <legend>
    Payment Method
    <span style="color: red;" aria-label="required">*</span>
  </legend>

  <label>
    <input type="radio" name="payment" value="credit" required>
    Credit Card
  </label>

  <label>
    <input type="radio" name="payment" value="debit">
    Debit Card
  </label>

  <label>
    <input type="radio" name="payment" value="paypal">
    PayPal
  </label>
</fieldset>
</form>

Result

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

<form>
<fieldset>
  <legend>
    Payment Method
    <span style="color: red;" aria-label="required">*</span>
  </legend>

  <label>
    <input type="radio" name="payment" value="credit" required>
    Credit Card
  </label>

  <label>
    <input type="radio" name="payment" value="debit">
    Debit Card
  </label>

  <label>
    <input type="radio" name="payment" value="paypal">
    PayPal
  </label>
</fieldset>
</form>

Styling Legends

Basic Styled Legend

<style>
.styled-legend {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 12px;
}

.styled-fieldset {
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  padding: 20px;
}

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

<form>
<fieldset class="styled-fieldset">
  <legend class="styled-legend">Notification Settings</legend>

  <label>
    <input type="checkbox" name="notify-email">
    Email notifications
  </label>

  <label>
    <input type="checkbox" name="notify-push">
    Push notifications
  </label>
</fieldset>
</form>

Result

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

<style>
.styled-legend {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 12px;
}

.styled-fieldset {
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  padding: 20px;
}

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

<form>
<fieldset class="styled-fieldset">
  <legend class="styled-legend">Notification Settings</legend>

  <label>
    <input type="checkbox" name="notify-email">
    Email notifications
  </label>

  <label>
    <input type="checkbox" name="notify-push">
    Push notifications
  </label>
</fieldset>
</form>

Modern Card Style

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

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

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

<form>
<fieldset class="card-fieldset">
  <legend class="card-legend">Privacy Settings</legend>

  <label>
    <input type="checkbox" name="public-profile">
    Make profile public
  </label>

  <label>
    <input type="checkbox" name="show-email">
    Show email address
  </label>

  <label>
    <input type="checkbox" name="show-location">
    Show location
  </label>
</fieldset>
</form>

Result

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

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

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

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

<form>
<fieldset class="card-fieldset">
  <legend class="card-legend">Privacy Settings</legend>

  <label>
    <input type="checkbox" name="public-profile">
    Make profile public
  </label>

  <label>
    <input type="checkbox" name="show-email">
    Show email address
  </label>

  <label>
    <input type="checkbox" name="show-location">
    Show location
  </label>
</fieldset>
</form>

Colored Legend

<style>
.colored-fieldset {
  border: 2px solid #3b82f6;
  border-radius: 8px;
  padding: 20px;
}

.colored-legend {
  color: #3b82f6;
  font-weight: 600;
  font-size: 16px;
  padding: 0 10px;
}

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

.colored-fieldset input[type="text"] {
  width: 100%;
  padding: 8px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
}
</style>

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

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

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

Result

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

<style>
.colored-fieldset {
  border: 2px solid #3b82f6;
  border-radius: 8px;
  padding: 20px;
}

.colored-legend {
  color: #3b82f6;
  font-weight: 600;
  font-size: 16px;
  padding: 0 10px;
}

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

.colored-fieldset input[type="text"] {
  width: 100%;
  padding: 8px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
}
</style>

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

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

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

Legend with Icon

<style>
.icon-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 18px;
}

.icon-fieldset {
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  padding: 20px;
}

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

<form>
<fieldset class="icon-fieldset">
  <legend class="icon-legend">
    <svg width="20" height="20" fill="#3b82f6" viewBox="0 0 20 20">
      <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"/>
      <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"/>
    </svg>
    Email Preferences
  </legend>

  <label>
    <input type="checkbox" name="newsletter">
    Weekly newsletter
  </label>

  <label>
    <input type="checkbox" name="updates">
    Product updates
  </label>
</fieldset>
</form>

Result

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

<style>
.icon-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 18px;
}

.icon-fieldset {
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  padding: 20px;
}

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

<form>
<fieldset class="icon-fieldset">
  <legend class="icon-legend">
    <svg width="20" height="20" fill="#3b82f6" viewBox="0 0 20 20">
      <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"/>
      <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"/>
    </svg>
    Email Preferences
  </legend>

  <label>
    <input type="checkbox" name="newsletter">
    Weekly newsletter
  </label>

  <label>
    <input type="checkbox" name="updates">
    Product updates
  </label>
</fieldset>
</form>

Full-width Legend

<style>
.full-legend {
  width: 100%;
  background: #3b82f6;
  color: white;
  padding: 12px 16px;
  margin: -20px -20px 16px -20px;
  border-radius: 8px 8px 0 0;
  font-weight: 600;
}

.full-fieldset {
  border: 2px solid #3b82f6;
  border-radius: 8px;
  padding: 20px;
}

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

<form>
<fieldset class="full-fieldset">
  <legend class="full-legend">Account Settings</legend>

  <label>
    <input type="checkbox" name="2fa">
    Enable two-factor authentication
  </label>

  <label>
    <input type="checkbox" name="login-alerts">
    Email me on new login
  </label>
</fieldset>
</form>

Result

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

<style>
.full-legend {
  width: 100%;
  background: #3b82f6;
  color: white;
  padding: 12px 16px;
  margin: -20px -20px 16px -20px;
  border-radius: 8px 8px 0 0;
  font-weight: 600;
}

.full-fieldset {
  border: 2px solid #3b82f6;
  border-radius: 8px;
  padding: 20px;
}

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

<form>
<fieldset class="full-fieldset">
  <legend class="full-legend">Account Settings</legend>

  <label>
    <input type="checkbox" name="2fa">
    Enable two-factor authentication
  </label>

  <label>
    <input type="checkbox" name="login-alerts">
    Email me on new login
  </label>
</fieldset>
</form>

Legend Position

Default Position

<fieldset style="border: 2px solid #ccc; padding: 20px;">
<legend style="padding: 0 10px;">Default Position</legend>

<p>The legend appears at the top-left of the fieldset border by default.</p>
</fieldset>

Result

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

<fieldset style="border: 2px solid #ccc; padding: 20px;">
<legend style="padding: 0 10px;">Default Position</legend>

<p>The legend appears at the top-left of the fieldset border by default.</p>
</fieldset>

Centered Legend

<style>
.center-fieldset {
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
}

.center-legend {
  margin: 0 auto;
  padding: 0 10px;
  font-weight: 600;
}
</style>

<fieldset class="center-fieldset">
<legend class="center-legend">Centered Legend</legend>

<label>
  <input type="radio" name="option" value="1">
  Option 1
</label>

<label>
  <input type="radio" name="option" value="2">
  Option 2
</label>
</fieldset>

Result

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

<style>
.center-fieldset {
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
}

.center-legend {
  margin: 0 auto;
  padding: 0 10px;
  font-weight: 600;
}
</style>

<fieldset class="center-fieldset">
<legend class="center-legend">Centered Legend</legend>

<label>
  <input type="radio" name="option" value="1">
  Option 1
</label>

<label>
  <input type="radio" name="option" value="2">
  Option 2
</label>
</fieldset>

Accessibility

Provides Context for Screen Readers

Screen readers announce the legend before each form control in the fieldset:

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

  <label>
    <input type="radio" name="time" value="morning">
    Morning (8AM - 12PM)
  </label>

  <label>
    <input type="radio" name="time" value="afternoon">
    Afternoon (12PM - 5PM)
  </label>

  <label>
    <input type="radio" name="time" value="evening">
    Evening (5PM - 9PM)
  </label>
</fieldset>
</form>

<p><small>
Screen reader announces: "Preferred Contact Time, Morning 8AM - 12PM, radio button"
</small></p>

Result

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

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

  <label>
    <input type="radio" name="time" value="morning">
    Morning (8AM - 12PM)
  </label>

  <label>
    <input type="radio" name="time" value="afternoon">
    Afternoon (12PM - 5PM)
  </label>

  <label>
    <input type="radio" name="time" value="evening">
    Evening (5PM - 9PM)
  </label>
</fieldset>
</form>

<p><small>
Screen reader announces: "Preferred Contact Time, Morning 8AM - 12PM, radio button"
</small></p>

<legend>Shipping Method</legend>
<legend>Payment Information</legend>
<legend>Contact Preferences</legend>

<legend>
  Please select your preferred shipping method from the following options
</legend>

Screen readers repeat the legend for each control, so keep it short and clear.

Required Group Indication

<form>
<fieldset aria-required="true">
  <legend>
    Delivery Method
    <span aria-label="required">*</span>
  </legend>

  <label>
    <input type="radio" name="delivery" value="pickup" required>
    Store Pickup
  </label>

  <label>
    <input type="radio" name="delivery" value="shipping">
    Home Delivery
  </label>
</fieldset>
</form>

Result

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

<form>
<fieldset aria-required="true">
  <legend>
    Delivery Method
    <span aria-label="required">*</span>
  </legend>

  <label>
    <input type="radio" name="delivery" value="pickup" required>
    Store Pickup
  </label>

  <label>
    <input type="radio" name="delivery" value="shipping">
    Home Delivery
  </label>
</fieldset>
</form>

Best Practices

Always Include a Legend

Good
Avoid

<fieldset>
  <legend>Newsletter Subscription</legend>
  <label>
    <input type="checkbox" name="subscribe">
    Subscribe to newsletter
  </label>
</fieldset>

<fieldset>
  <label>
    <input type="checkbox" name="subscribe">
    Subscribe to newsletter
  </label>
</fieldset>

Use Descriptive Text

Good
Vague

<legend>T-Shirt Size</legend>
<legend>Dietary Restrictions</legend>
<legend>Payment Method</legend>

<legend>Options</legend>
<legend>Selection</legend>
<legend>Choose One</legend>

Legend Must Be First Child

Correct
Incorrect

<fieldset>
  <legend>Title</legend>
  <label><input type="radio" name="x">Option</label>
</fieldset>

<fieldset>
  <div>Some content</div>
  <legend>Title</legend>
  <label><input type="radio" name="x">Option</label>
</fieldset>

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 <legend> element has been supported since early browser versions.

Container element for legend and form controls. Learn more →

Associates text with individual form controls. Learn more →

<legend> - The Legend Element

The <legend> Element

Quick Example

Syntax

Attributes

Common Use Cases

Radio Button Groups

Checkbox Groups

Address Form

Personal Information

Multi-step Forms

Required Field Indication

Styling Legends

Basic Styled Legend

Modern Card Style

Colored Legend

Legend with Icon

Full-width Legend

Legend Position

Default Position

Centered Legend

Accessibility

Provides Context for Screen Readers

Keep Legend Text Concise

Required Group Indication

Best Practices

Always Include a Legend

Use Descriptive Text

Legend Must Be First Child

Browser Support

Related Elements

Specifications

The `<legend>` Element