<fieldset>, <legend>

Syntax

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

Examples

<fieldset>
  <legend>Preferred Contact Method</legend>
  <label><input type="radio" name="contact" value="email"> Email</label>
  <label><input type="radio" name="contact" value="phone"> Phone</label>
</fieldset>

<form>
  <fieldset>
    <legend>Personal Details</legend>
    <input type="text" placeholder="Full Name">
    <input type="email" placeholder="Email">
  </fieldset>
  <fieldset>
    <legend>Address</legend>
    <input type="text" placeholder="Street">
    <input type="text" placeholder="City">
  </fieldset>
</form>

<fieldset disabled>
  <legend>Payment Details (complete Step 1 first)</legend>
  <input type="text" placeholder="Card Number">
</fieldset>

Attributes

• disabled (boolean): Disables every form control nested inside the fieldset
• name (string): Associates the fieldset with the form for scripting purposes

Best practices

• Always include a <legend> as the first child of a <fieldset> — it is what gives the group its accessible name
• Use fieldset to group related radio buttons or checkboxes so screen readers announce the group context
• Use the disabled attribute on a fieldset to disable a whole section at once instead of each input individually
• Avoid using fieldset purely for visual styling — use a <div> if there is no genuine grouping of controls

Browser compatibility

Related HTML documentation

Specifications & further reading

• HTML Living Standard