# Fieldsets

> Grouped form sections, from the HTML.

## Introduction

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](https://m3.material.io/components/text-fields/specs) 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.

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