Forms

GitHub Source Link src/elements/forms/forms

Demonstration
True or False
Markup
<form>
  <div class="fieldset">
    <label class="label">Input</label>
    <div class="input">
      <!--{ @required  required="true" specifies wether the input is required by a form }-->
      <!--{ @pattern   pattern="{{ my regular expression }}" a regular expression the input's value must match in order to validate }-->
      <!--{ @tabindex  Add tabindex="-1" to insure focusable elements are not visible when parent is hidden }-->
      <input id="9aef508f0fb4b" name="input['9aef508f0fb4b']" required="true" type="text" />
    </div>
  </div>
  <div class="fieldset">
    <label class="legend">Select</label>
    <div class="select ">
      <select id="dbba25faa474c" name="select['dbba25faa474c']" required="true">
        <option selected="true" value="">Select an option</option>
      </select>
      <svg aria-hidden="true" class="select__graphic">
        <use href="#select-wnyc-chevrons"></use>
      </svg>
    </div>
  </div>
  <fieldset>
    <legend>True or False</legend>
    <!--{ @for       Should match the id of the input }-->
    <!--{ @tabindex  Add tabindex="-1" to insure focusable elements are not visible when parent is hidden }-->
    <label class="option " for="a98d95f50bdf3">
      <!--{ @tabindex  Add tabindex="-1" to insure focusable elements are not visible when parent is hidden }-->
      <input id="a98d95f50bdf3" name="boolean" type="radio" value="true" />
      <span class="option__base">
        <svg aria-hidden="true" class="option__graphic">
          <use href="#option-wnyc-radio"></use>
        </svg>
        <span class="option__label">True</span>
      </span>
    </label>
    <!--{ @for       Should match the id of the input }-->
    <!--{ @tabindex  Add tabindex="-1" to insure focusable elements are not visible when parent is hidden }-->
    <label class="option " for="8cbf61fd11d18">
      <!--{ @tabindex  Add tabindex="-1" to insure focusable elements are not visible when parent is hidden }-->
      <input id="8cbf61fd11d18" name="boolean" type="radio" value="false" />
      <span class="option__base">
        <svg aria-hidden="true" class="option__graphic">
          <use href="#option-wnyc-radio"></use>
        </svg>
        <span class="option__label">False</span>
      </span>
    </label>
  </fieldset>
  <button class="btn btn-primary" type="submit">
    <span>Submit</span>
  </button>
</form>