Français

<fieldset>

Group fields that belong together: address, payment, preferences

— 1 min read

  • HTML
  • accessibility
  • semantics
  • forms

<fieldset> + <legend> — The field group

The <fieldset> element groups related form fields. The <legend> provides a heading for the group. Together, they create a semantic structure that assistive technologies understand.

When to use it

You want to group shipping address fields, payment method options, notification preferences, mutually exclusive radio buttons, or any set of fields related by a common topic.

What you gain

Accessibility: screen readers announce the <legend> before each field in the group. For radio buttons "Size: S, M, L", the user hears "Size" then "S", not just "S" without context.

Code example

<fieldset>
  <legend>Shipping address</legend>
  <label for="street">Street:</label>
  <input type="text" id="street" name="street" autocomplete="street-address">
  <label for="city">City:</label>
  <input type="text" id="city" name="city" autocomplete="address-level2">
</fieldset>
 
<fieldset>
  <legend>Size</legend>
  <label><input type="radio" name="size" value="s"> S</label>
  <label><input type="radio" name="size" value="m"> M</label>
  <label><input type="radio" name="size" value="l"> L</label>
</fieldset>

Further reading