<fieldset class="">
    <legend>Legend</legend>
    <div class="fieldset-grid">
        Content
    </div>
</fieldset>
<fieldset class="{{modifier}}">
  <legend>{{legend}}</legend>
  <div class="fieldset-grid">
    {{#> @partial-block}}
      {{content}}
    {{/ @partial-block}}
  </div>
</fieldset>
{
  "legend": "Legend",
  "content": "Content"
}
  • Content:
    @media screen {
    
      /**
       * Fieldset
       */
      fieldset {
        border: 0;
        background-color: var(--fieldset-bg);
        padding: 0.5rem 1rem 1rem;
        box-shadow: var(--fieldset-shadow);
      }
    
      @supports (display: grid) {
    
        .fieldset-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
          grid-gap: 1em;
          align-content: start;
        }
    
        .fieldset-grid > .form-item + .form-item {
          margin-top: 0;
        }
    
        .fieldset-grid > .submit-area {
          grid-column: 1 / -1;
        }
      }
    
      legend {
        font-weight: 600;
        background-color: var(--fieldset-bg);
        border-radius: var(--form-radius);
        padding: 0 0.5rem;
        margin-left: -0.5rem;
        box-shadow: var(--legend-shadow);
      }
    
      legend + * {
        margin-top: 0.25em;
      }
    
      /* Slim fieldset */
      fieldset.slim,
      fieldset.slim legend {
        border: 0;
        padding: 0;
        box-shadow: none;
        background-color: transparent;
      }
    
      fieldset.slim + fieldset.slim {
        margin-top: 0.25em;
      }
    
      fieldset.slim legend {
        margin-left: 0;
      }
    
      /* Slim inline fieldset */
      fieldset.slim.inline label {
        margin: 0.5em 0 0;
      }
    
      fieldset.slim.inline label + label {
        margin-left: 1em;
      }
    }
    
  • URL: /components/raw/fieldset/fieldset.css
  • Filesystem Path: components/02_molecules/form-controls/fieldset/fieldset.css
  • Size: 1.2 KB

Fieldset

The HTML <fieldset> element is used to group several controls as well as labels (<label>) within a web form.

Please see the article on MDN for more info.

Variants

Grid fieldset

Same premises as an ordinary <fieldset> with the exception of a inner container that is a grid container.

<fieldset class="">
  <legend>Legend</legend>
  <div class="fieldset-grid">
      Content
  </div>
</fieldset>