<fieldset>

<fieldset> groups related form elements together and can optionally include a <legend> label.

You can also combine it with [role="group"] and [role="search"], to make use of the ARIA roles while also applying the group styling.

With a Form Input

<fieldset>
  <label for="input-email">Email</label>
  <input type="email" id="input-email" aria-describedby="input-email-helper" placeholder="Type your email" />
  <small id="input-email-helper">Cannot be empty.</small>
</fieldset>

Input Search Group

For more search examples see Search documentation.

<fieldset role="search">
  <input type="search" placeholder="Search..." />
  <button type="submit">Search</button>
</fieldset>

Input Button Group

<fieldset role="group" aria-label="Email subscription">
  <input type="email" name="email" placeholder="Enter your email" autocomplete="email" />
  <input type="submit" value="Subscribe" />
</fieldset>

Select Button Group

<fieldset role="group">
  <select>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>
  <button>Action</button>
</fieldset>

Dropdown Button Group

<fieldset role="group">
  <details class="w-100">
    <summary aria-haspopup="menu">Select phases of matter...</summary>
    <ul role="menu">
      <li>
        <label>
          <input type="checkbox" name="solid" />
          Solid
        </label>
      </li>
      <li>
        <label>
          <input type="checkbox" name="liquid" />
          Liquid
        </label>
      </li>
    </ul>
  </details>
  <button>Action</button>
</fieldset>

Multiple Inputs Group

<fieldset role="group">
  <input type="text" placeholder="First name">
  <input type="text" placeholder="Last name">
  <button>Save</button>
</fieldset>

Form Example

Inputs are width: 100% by default and match button sizes for consistent layouts. For label placement and helper text, see <label>.

<form>
  <fieldset>
    <label for="input-email">Email</label>
    <input type="email" placeholder="Type your email" id="input-email" />
    
    <label for="password">Password</label>
    <input type="password" id="password" placeholder="Type your password" />
  </fieldset>
  
  <input type="submit" value="Sign In" />
</form>

Disabled

Setting disabled on a <fieldset> disables all contained form elements.

<fieldset disabled="disabled">
  <label for="input-email">Email</label>
  <input type="email" placeholder="Type your email" id="input-email" />
  
  <label for="password">Password</label>
  <input type="password" id="password" placeholder="Type your password" />
  
  <input type="submit" value="Sign In" />
</fieldset>

As a section

<fieldset>
  <legend>Personal Information</legend>
  <label>
    First name
    <input name="first_name" placeholder="First name" autocomplete="given-name" />
  </label>
  <label>
    Last name
    <input name="last_name" placeholder="Last name" autocomplete="family-name" />
  </label>
  <label>
    Email
    <input type="email" name="email" placeholder="Email" autocomplete="email" />
  </label>
</fieldset>