Fieldsets

A <fieldset> is the group. A <legend> is the headline. Everything else is a field — .field, radios, switches, a <nav> of radios, a trailing <small> as supporting text. There is no wrapper class. They are CSS only. There is no JavaScript component and nothing to AutoInit.

Material Design 3 has no fieldset component. Tokens follow the outlined grouping container used around related form content, and the outlined text-field shape so a group of fields matches the fields. The container is 4dp corners and a 1dp outline-variant stroke. The legend is title-small / on-surface. Supporting text is body-small. Padding is 16dp; children sit 16dp apart. Disabled is 38%.

Name

First name

Last name

<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

A fieldset is also the right parent for a radio, checkbox, or switch group — the legend names the question, the disabled attribute disables every control inside. Put the labels in a <div class="inline"> to sit them on one line.

Notify me about

Comments Mentions Followers You can change these later in settings.

Plan

Monthly Yearly

<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

The default is outlined. filled is a surface-variant well with no stroke — pair it with outlined fields so the wells stay distinct. rounded is 12dp corners (M3 medium, like a card). outlined and border name the default if you need to say it.

place Address

Street

City

Preferences

Dark theme Compact layout

<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>

Disabled

The HTML disabled attribute on a fieldset disables every control inside it. The legend and outline drop to 38%.

Billing

Card

Expires

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