Back to TILs.

Calmcode TIL

Fieldset logoFieldset

Modern HTML provides us with a <fieldset> tag that allows you to visually group UI elements together.

Here's an example snippet.

<fieldset>
  <legend>Choose your monster's features:</legend>

  <div>
    <input type="checkbox" id="scales" name="scales" checked />
    <label for="scales">Scales</label>
  </div>

  <div>
    <input type="checkbox" id="horns" name="horns" />
    <label for="horns">Horns</label>
  </div>
</fieldset>

Here's what it looks like.

Choose your monster's features:

One interesting feature of a fieldset is that it can also be used to turn off a group of elements by adding disabled to the main <fieldset> element.

<fieldset disabled>
  <legend>Choose your monster's features:</legend>

  <div>
    <input type="checkbox" id="scales" name="scales" checked />
    <label for="scales">Scales</label>
  </div>

  <div>
    <input type="checkbox" id="horns" name="horns" />
    <label for="horns">Horns</label>
  </div>
</fieldset>

You can't select all the elements inside anymore.

Choose your monster's features:

To learn more about this feature, check the Mozilla HTML Docs. It's a great resource!


Back to TILs.