The <fieldset> element groups a set of related form fields together — commonly a group of radio buttons or checkboxes belonging to the same overall question.
Syntax
<fieldset>
<legend>Group title</legend>
...related fields...
</fieldset>Basic Example
<fieldset>
<legend>Contact Information</legend>
<label for="name">Name</label>
<input type="text" id="name" name="name">
<label for="email">Email</label>
<input type="email" id="email" name="email">
</fieldset>Browser output: a visible border box around the grouped fields by default, with the <legend> text overlapping the top edge of that border.
How It Works
Beyond visual grouping, <fieldset> also supports a genuinely useful disabled attribute — setting it disables every field nested inside at once, without needing to disable each one individually.
Important Attributes
| Attribute | Purpose |
|---|---|
disabled | Disables every field nested inside the fieldset in one go |
Real-World Example
<fieldset>
<legend>Preferred Payment Method</legend>
<input type="radio" id="card" name="payment" value="card">
<label for="card">Card</label>
<input type="radio" id="upi" name="payment" value="upi">
<label for="upi">UPI</label>
</fieldset>Grouping a radio button set — this is one of the single most common, most appropriate <fieldset> use cases, since the buttons genuinely form one question with one shared purpose.
Common Mistakes
- Wrapping an entire long form (unrelated fields all mixed together) in one giant
<fieldset>, defeating its purpose as a meaningful, focused grouping - Omitting
<legend>— a<fieldset>without one loses much of its accessibility value
Best Practices
- Use
<fieldset>specifically for genuinely related fields — radio/checkbox groups, or a distinct sub-section like "Billing Address" - Always pair it with a
<legend>
Accessibility Considerations
Screen readers announce a fieldset's <legend> as context when a user enters any field inside it — meaning each field's individual label is heard alongside the group's overall purpose (e.g. "Payment Method, Card").
SEO Considerations
No direct ranking effect.
Browser & Modern HTML Notes
The default border styling can be fully customized (or removed) with CSS — the semantic grouping and accessibility benefits remain regardless of visual styling.
Mini Practice
- Group a set of checkboxes inside a properly labeled
<fieldset>. - Use the
disabledattribute to disable an entire fieldset's fields at once.
