Fieldsets

Wrap related fields in a <fieldset> and give it a <legend> as the headline. Everything else inside is a field. That can be a .field, radios, switches, a <nav> of radios, or a trailing <small> as supporting text. Fieldsets need no wrapper class. They are CSS only, with no JavaScript component to AutoInit.

Material Design 3 has no fieldset component. The tokens follow the outlined grouping container used around related form content. They also follow the outlined text-field shape, so a group of fields matches the fields inside it. The container has 4dp corners and a 1dp outline-variant stroke. The legend uses title-small in on-surface. Supporting text is body-small. Padding is 16dp, and children sit 16dp apart. A disabled group drops to 38%.

<fieldset>
  <legend>Name</legend>
  <div class="field">
    <input id="first" type="text" placeholder=" ">
    <label for="first">First name</label>
  </div>
  <div class="field">
    <input id="last" type="text" placeholder=" ">
    <label for="last">Last name</label>
  </div>
</fieldset>

Choices

Use a fieldset as the parent of a radio, checkbox, or switch group too. The legend names the question, and the disabled attribute disables every control inside. To put the labels on one line, wrap them in a <div class="inline">.

<fieldset>
  <legend>Notify me about</legend>
  <label class="switch">
    <input type="checkbox" checked>
    Comments
  </label>
  <label class="switch">
    <input type="checkbox">
    Mentions
  </label>
  <small>You can change these later in settings.</small>
</fieldset>

<fieldset>
  <legend>Plan</legend>
  <div class="inline">
    <label>
      <input name="plan" type="radio" checked>
      Monthly
    </label>
    <label>
      <input name="plan" type="radio">
      Yearly
    </label>
  </div>
</fieldset>

Variants

Fieldsets are outlined by default. To state that explicitly, add outlined or border. Add filled for a surface-container-highest well with no stroke, and pair it with outlined fields so the wells stay distinct. rounded gives 12dp corners (M3 medium, like a card).

<fieldset class="filled">
  <legend>
    <span class="material-symbols" aria-hidden="true">place</span>
    Address
  </legend>
  <div class="field outlined">…</div>
</fieldset>

<fieldset class="filled rounded">
  <legend>Preferences</legend>
  …
</fieldset>

Add plain to drop the container for a group that already sits on a surface, such as radios in a card or a dialog. The group loses its outline, fill, padding, and the margin from a preceding fieldset. The legend starts flush with the content.

<fieldset class="plain">
  <legend>Delivery</legend>
  <label><input type="radio" name="delivery" value="daily" checked>Daily</label>
  <label><input type="radio" name="delivery" value="weekly">Weekly</label>
</fieldset>

Disabled

Add the HTML disabled attribute to a fieldset to disable every control inside it. The legend and outline drop to 38%.

<fieldset disabled>
  <legend>Billing</legend>
  <div class="field">…</div>
</fieldset>