legend

The legend HTML element represents a caption for the content of its parent fieldset, providing a caption or title for a group of related form elements.

It enhances accessibility, organization, and improves the overall structure of forms.

Ensure that an instance of this component is used inside a parent component with the fieldset tag.
table of content

component variations

default

Open on blank page
label
<legend class="a-legend">label</legend>

legend inside fieldset

Open on blank page
fieldset legend label
<style>
  .legend-inside-fieldset-example {
    border: 0;
  }
  .legend-inside-fieldset-example .a-text-field {
    margin-bottom: 1rem;
  }
  .legend-inside-fieldset-example .a-text-field:last-child {
    margin-bottom: 0;
  }
</style>
<fieldset class="legend-inside-fieldset-example">
  <legend class="a-legend">fieldset legend label</legend>
  <div class="a-text-field">
    <label for="first textfield">Label</label>
    <input
      type="text"
      id="text-input-first textfield"
      placeholder="e.g.: hint"
    />
  </div>
  <div class="a-text-field">
    <label for="second textfield">Label</label>
    <input
      type="text"
      id="text-input-second textfield"
      placeholder="e.g.: hint"
    />
  </div>
  <div class="a-text-field">
    <label for="third textfield">Label</label>
    <input
      type="text"
      id="text-input-third textfield"
      placeholder="e.g.: hint"
    />
  </div>
</fieldset>

additional content

styles SCSS

legend {
  background-color: var(--plain__enabled__fill__default);
  color: var(--plain__enabled__front__default);
  display: block;
  font-weight: bold;
  margin-bottom: 1rem;

  &:first-letter {
    text-transform: capitalize;
  }
}