<h2 class="mt-24">Fieldset Legend</h2>
<!-- Fieldset Legend Only -->
<fieldset class="fieldset">
    <legend class="fieldset__legend">Legend Element</legend>
</fieldset>

<!-- Fieldset with Form Inputs -->
<form>
    <fieldset class="fieldset">
        <legend class="fieldset__legend">Legend Element</legend>
        <!-- text input -->
        <div class="text full-width">
            <label class="text__label" for="example_textinput">Label</label>
            <input class="text__input" type="text" name="example_textinput" placeholder="Type something">
            <span class="text__error">Error message is hidden</span>
        </div>
        <div class="radio">
            <input class="radio__input" type="radio" name="radio" value="radio1">
            <label class="radio__label" for="">Radio 1</label>
            <input class="radio__input" type="radio" name="radio" value="radio2">
            <label class="radio__label" for="">Radio 2</label>
        </div>
        <div class="select full-width">
            <label class="select__label" for="example_selection-fullwidth">Full-width Label and Dropdown Menu</label>
            <select class="select__menu" name="example_selection-fullwidth">
                <option class="select__placeholder" disabled selected>Make a selection</option>
                <option class="select__option" value="Epsum">Epsum factorial non deposit quid</option>
                <option class="select__option" value="Pro">Pro quo hic escorol olypian</option>
                <option class="select__option" value="Et">Et gorilla congolium sic</option>
                <option class="select__option" value="Ad">Ad nauseum souvlaki ignitus carborundum</option>
                <option class="select__option" value="Ad">This selection is an error</option>
            </select>
            <span class="select__help">Helpful text goes here</span>
            <span class="select__error">Error message is hidden</span>
        </div>
        <div class="checkbox">
            <input type="checkbox" class="checkbox__input" name="example_checkbox" />
            <label class="checkbox__label" for="example_checkbox">Textbox label</label>
        </div>
    </fieldset>
</form>
<h2 class="mt-24">Fieldset Legend</h2>
<!-- Fieldset Legend Only -->
<fieldset class="fieldset">
  <legend class="fieldset__legend">Legend Element</legend>
</fieldset>

<!-- Fieldset with Form Inputs -->
<form>
  <fieldset class="fieldset">
    <legend class="fieldset__legend">Legend Element</legend>
    <!-- text input -->
    <div class="text full-width">
      <label class="text__label" for="example_textinput">Label</label>
      <input class="text__input" type="text" name="example_textinput" placeholder="Type something">
      <span class="text__error">Error message is hidden</span>
    </div>
    <div class="radio">
      <input class="radio__input" type="radio" name="radio" value="radio1">
      <label class="radio__label" for="">Radio 1</label>
      <input class="radio__input" type="radio" name="radio" value="radio2">
      <label class="radio__label" for="">Radio 2</label>
    </div>
    <div class="select full-width">
      <label class="select__label" for="example_selection-fullwidth">Full-width Label and Dropdown Menu</label>
      <select class="select__menu" name="example_selection-fullwidth">
        <option class="select__placeholder" disabled selected>Make a selection</option>
        <option class="select__option" value="Epsum">Epsum factorial non deposit quid</option>
        <option class="select__option" value="Pro">Pro quo hic escorol olypian</option>
        <option class="select__option" value="Et">Et gorilla congolium sic</option>
        <option class="select__option" value="Ad">Ad nauseum souvlaki ignitus carborundum</option>
        <option class="select__option" value="Ad">This selection is an error</option>
      </select>
      <span class="select__help">Helpful text goes here</span>
      <span class="select__error">Error message is hidden</span>
    </div>
    <div class="checkbox">
      <input type="checkbox" class="checkbox__input" name="example_checkbox" />
      <label class="checkbox__label" for="example_checkbox">Textbox label</label>
    </div>
  </fieldset>
</form>
{
  "ordrer": 2
}
  • Handle: @forms--fieldset-legend
  • Preview:
  • Filesystem Path: src/components/03-components/08-forms/forms--fieldset-legend.hbs

No notes defined.