Demos: o-forms

<div class="demo-inverse">
  <form action data-o-component="o-forms">
    <div
      class="o-forms__error-summary o-forms__error-summary--inverse"
      aria-labelledby="my-error-summary"
      role="alert"
    >
      <h4 id="my-error-summary" class="o-forms__error-summary__heading">
        There is a problem
      </h4>
      <ul class="o-forms__error-summary__list">
        <li class="o-forms__error-summary__item">
          <!-- link to the invalid input -->
          <a href="#my-date-input">
            <!-- the name of the invalid input -->
            <span class="o-forms__error-summary__item-overview"
              >My date input</span
            >:
            <!-- a description of what is wrong and how to fix it -->
            <span class="o-forms__error-summary__item-detail">
              Please use the format (DD/MM/YYYY)
            </span>
          </a>
        </li>
      </ul>
    </div>

    <div
      class="o-forms-field o-forms-field--optional o-forms-field--inverse"
      role="group"
      aria-labelledby="date-group-title"
    >
      <span class="o-forms-title">
        <span class="o-forms-title__main" id="date-group-title"
          >Date input</span
        >
        <span class="o-forms-title__prompt">Optional prompt text</span>
      </span>

      <span class="o-forms-input o-forms-input--date">
        <label>
          <input
            class="o-forms-input__day-part"
            id="date"
            type="text"
            name="date"
            value
            pattern="0[1-9]|[12]\d|3[01]"
            aria-label="Day (DD)"
            required
          />
          <span class="o-forms-input__label" aria-hidden="true">DD</span>
        </label>
        <label>
          <input
            class="o-forms-input__month-part"
            type="text"
            name="date"
            value
            pattern="0?[1-9]|1[012]"
            aria-label="Month (MM)"
            required
          />
          <span class="o-forms-input__label" aria-hidden="true">MM</span>
        </label>
        <label>
          <input
            class="o-forms-input__year-part"
            type="text"
            name="date"
            value
            pattern="[0-9]{4}"
            aria-label="Year (YYYY)"
            required
          />
          <span class="o-forms-input__label" aria-hidden="true">YYYY</span>
        </label>
        <span class="o-forms-input__error"
          >Please fill out this field with the required format
          (DD/MM/YYYY)</span
        >
      </span>
    </div>

    <div
      class="o-forms-field o-forms-field--inverse"
      role="group"
      aria-labelledby="date-group-title"
    >
      <span class="o-forms-title" aria-hidden="true">
        <span class="o-forms-title__main" id="date-group-title"
          >Radio box input</span
        >
      </span>

      <span class="o-forms-input o-forms-input--radio-box">
        <div class="o-forms-input--radio-box__container">
          <label>
            <input id="radio" type="radio" name="box" />
            <span class="o-forms-input__label" aria-hidden="true">Yes</span>
          </label>
          <label>
            <input type="radio" name="box" checked />
            <span
              class="o-forms-input__label o-forms-input__label--negative"
              aria-hidden="true"
              >No</span
            >
          </label>
        </div>
      </span>
    </div>

    <label class="o-forms-field o-forms-field--inverse">
      <span class="o-forms-title">
        <span class="o-forms-title__main">Required text input</span>
      </span>

      <span class="o-forms-input o-forms-input--text">
        <input id="required" type="text" name="text" value required />
        <span class="o-forms-input__error">Please fill out this field</span>
      </span>
    </label>

    <label class="o-forms-field o-forms-field--optional o-forms-field--inverse">
      <span class="o-forms-title">
        <span class="o-forms-title__main">Optional text input</span>
        <span class="o-forms-title__prompt">Optional prompt text</span>
      </span>

      <span class="o-forms-input o-forms-input--text">
        <input type="text" name="optional" value />
      </span>
    </label>

    <!-- with no id the error summary can not link to this -->
    <label class="o-forms-field o-forms-field--inverse">
      <span class="o-forms-title">
        <span class="o-forms-title__main"
          >Text input with missing id attribute to link to</span
        >
        <span class="o-forms-title__prompt">prompt text</span>
      </span>

      <span class="o-forms-input o-forms-input--text">
        <input type="text" name="required-no-id" value required />
      </span>
    </label>

    <!-- with no o-forms-title this is not able to show in the error summary -->
    <div class="o-forms-field o-forms-field--inverse">
      <span class="o-forms-input o-forms-input--checkbox">
        <label>
          <input
            id="my-single-checkbox"
            type="checkbox"
            name="my-single-checkbox"
            required
          />
          <span class="o-forms-input__label">I accept these terms.</span>
        </label>
      </span>
    </div>

    <input id="hidden-demo" name="hidden-demo" type="hidden" value="123" />

    <button class="o-buttons o-buttons--primary" type="submit">
      Let&apos;s get started
    </button>
  </form>
</div>

<div class="o-forms-input o-forms-input--pseudo-radio-link">
  <a class="o-forms-input__link o-forms-input__link--current" href="#"
    >Link A</a
  >
  <a class="o-forms-input__link" href="#">Link B</a>
</div>

<div
  class="o-forms-field o-forms-field--optional"
  role="group"
  aria-labelledby="checkbox-group-title"
  aria-describedby="checkbox-group-info"
>
  <span class="o-forms-title">
    <span class="o-forms-title__main" id="checkbox-group-title"
      >Stacked checkboxes</span
    >
    <span class="o-forms-title__prompt" id="checkbox-group-info"
      >Optional prompt/description text</span
    >
  </span>

  <span class="o-forms-input o-forms-input--checkbox">
    <label>
      <input type="checkbox" name="default" value="Stacked 1" checked />

      <span class="o-forms-input__label"> Stacked 1 </span>
    </label>
    <label>
      <input type="checkbox" name="default" value="Stacked 2" />

      <span class="o-forms-input__label"> Stacked 2 </span>
    </label>
    <label>
      <input type="checkbox" name="default" value="Stacked 3" checked />

      <span class="o-forms-input__label"> Stacked 3 </span>
    </label>
  </span>
</div>

<div
  class="o-forms-field"
  role="group"
  aria-labelledby="disabed-checkbox-group-title"
>
  <span class="o-forms-title">
    <span class="o-forms-title__main" id="disabed-checkbox-group-title"
      >Disabled checkboxes</span
    >
  </span>

  <span class="o-forms-input o-forms-input--checkbox">
    <label>
      <input
        type="checkbox"
        name="disabled"
        value="Disabled 1"
        checked
        disabled
      />

      <span class="o-forms-input__label"> Disabled 1 </span>
    </label>
    <label>
      <input type="checkbox" name="disabled" value="Disabled 2" disabled />

      <span class="o-forms-input__label"> Disabled 2 </span>
    </label>
  </span>
</div>

<div
  class="o-forms-field"
  role="group"
  aria-labelledby="error-checkbox-group-title"
>
  <span class="o-forms-title">
    <span class="o-forms-title__main" id="error-checkbox-group-title"
      >Error checkboxes</span
    >
  </span>

  <span class="o-forms-input o-forms-input--checkbox o-forms-input--invalid">
    <label>
      <input type="checkbox" name="error" value="Error 1" required />

      <span class="o-forms-input__label"> Error 1 </span>
    </label>
    <label>
      <input type="checkbox" name="error" value="Error 2" required />

      <span class="o-forms-input__label"> Error 2 </span>
    </label>

    <span class="o-forms-input__error">Please select at least one option</span>
  </span>
</div>

<div
  class="o-forms-field"
  role="group"
  aria-labelledby="inline-checkbox-group-title"
>
  <span class="o-forms-title">
    <span class="o-forms-title__main" id="inline-checkbox-group-title"
      >Inline checkboxes</span
    >
  </span>

  <span class="o-forms-input o-forms-input--checkbox o-forms-input--inline">
    <label>
      <input type="checkbox" name="inline" value="Inlined 1" checked required />

      <span class="o-forms-input__label"> Inlined 1 </span>
    </label>
    <label>
      <input
        type="checkbox"
        name="inline"
        value="This is a very long inlined checkbox to demonstrate the correct alignment of checkboxes"
        required
      />

      <span class="o-forms-input__label">
        This is a very long inlined checkbox to demonstrate the correct
        alignment of checkboxes
      </span>
    </label>
    <label>
      <input type="checkbox" name="inline" value="Inlined 3" required />

      <span class="o-forms-input__label"> Inlined 3 </span>
    </label>
  </span>
</div>

<div
  class="o-forms-field o-forms-field--inline"
  role="group"
  aria-labelledby="inline-field-inline-checkbox-group-title"
>
  <span class="o-forms-title">
    <span
      class="o-forms-title__main"
      id="inline-field-inline-checkbox-group-title"
      >Inline field and checkboxes</span
    >
  </span>

  <span class="o-forms-input o-forms-input--checkbox o-forms-input--inline">
    <label>
      <input
        type="checkbox"
        name="inline-field"
        value="Inline 1"
        checked
        required
      />

      <span class="o-forms-input__label"> Inline 1 </span>
    </label>
    <label>
      <input type="checkbox" name="inline-field" value="Inline 2" required />

      <span class="o-forms-input__label"> Inline 2 </span>
    </label>
  </span>
</div>

<div
  class="o-forms-field o-forms-field--inline"
  role="group"
  aria-labelledby="inline-field-checkbox-group-title"
>
  <span class="o-forms-title">
    <span class="o-forms-title__main" id="inline-field-checkbox-group-title"
      >Inline field and stacked checkboxes</span
    >
  </span>

  <span class="o-forms-input o-forms-input--checkbox">
    <label>
      <input type="checkbox" name="inline-stacked" value="Inline 1" required />

      <span class="o-forms-input__label"> Inline 1 </span>
    </label>
    <label>
      <input
        type="checkbox"
        name="inline-stacked"
        value="Inline 2"
        checked
        required
      />

      <span class="o-forms-input__label"> Inline 2 </span>
    </label>
    <label>
      <input
        type="checkbox"
        name="inline-stacked"
        value="Inline 3"
        checked
        required
      />

      <span class="o-forms-input__label"> Inline 3 </span>
    </label>
  </span>
</div>

<div
  class="o-forms-field"
  role="group"
  aria-labelledby="password-checkbox-group-title"
  aria-describedby="password-checkbox-group-info"
>
  <span class="o-forms-title">
    <span class="o-forms-title__main" id="password-checkbox-group-title"
      >Right side checkboxes</span
    >
    <span class="o-forms-title__prompt" id="password-checkbox-group-info"
      >Interface demo only, password hide/show functionality is not currently
      included in o-forms.</span
    >
  </span>

  <span class="o-forms-input o-forms-input--checkbox o-forms-input--password">
    <label>
      <input type="password" name value="password" required />
    </label>
    <label class="o-forms-input__right">
      <input type="checkbox" name="show" value="Show password" required />

      <span class="o-forms-input__label"> Show password </span>
    </label>
  </span>
</div>

<div
  class="o-forms-field"
  role="group"
  aria-labelledby="extra-content-checkbox-group-title"
  aria-describedby="extra-content-checkbox-group-info"
>
  <span class="o-forms-title">
    <span class="o-forms-title__main" id="extra-content-checkbox-group-title"
      >Checkboxes with extra content</span
    >
    <span class="o-forms-title__prompt" id="extra-content-checkbox-group-info"
      >Indeterminate interface demo only, select/unselect all functionality is
      not currently included in o-forms</span
    >
  </span>

  <span class="o-forms-input o-forms-input--checkbox">
    <label>
      <input type="checkbox" name="extra" value="Select All" required />

      <span class="o-forms-input__label"> Select All </span>
    </label>
    <label>
      <input
        type="checkbox"
        name="extra"
        value="I confirm I have read and agree to the terms &amp; conditions, privacy policy and cookie policy*."
        required
      />

      <span class="o-forms-input__label">
        I confirm I have read and agree to the terms &amp; conditions, privacy
        policy and cookie policy*.
      </span>

      <span class="o-forms-input__label"
        >We will send you occasional emails to improve your experience of the
        Financial Times.</span
      >
    </label>
    <label>
      <input
        type="checkbox"
        name="extra"
        value="This is a disabled checkbox with extra content."
        disabled
      />

      <span class="o-forms-input__label">
        This is a disabled checkbox with extra content.
      </span>

      <span class="o-forms-input__label"
        >Here is the extra content for this checkbox.</span
      >
    </label>
    <label>
      <input
        type="checkbox"
        name="extra"
        value="By submitting this form, you indicate your consent to also being contacted by the Financial Times by email. post or phone about our other products, services or special offers unless you untick this box. You can change your preferences anytime in the My Account section."
        checked
        required
      />

      <span class="o-forms-input__label">
        By submitting this form, you indicate your consent to also being
        contacted by the Financial Times by email. post or phone about our other
        products, services or special offers unless you untick this box. You can
        change your preferences anytime in the My Account section.
      </span>
    </label>
  </span>
</div>

<div
  class="o-forms-field o-forms-field--optional"
  role="group"
  aria-labelledby="date-group-title"
  aria-describedby="date-group-info"
>
  <span class="o-forms-title">
    <span class="o-forms-title__main" id="date-group-title">Date input</span>
    <span class="o-forms-title__prompt" id="date-group-info"
      >Optional prompt/description text</span
    >
  </span>

  <span class="o-forms-input o-forms-input--date">
    <label>
      <input
        type="text"
        name="date"
        value
        class="o-forms-input__day-part"
        inputmode="numeric"
        pattern="0[1-9]|[12]\d|3[01]"
        aria-label="Day (DD)"
      />

      <span class="o-forms-input__label" aria-hidden="true"> DD </span>
    </label>
    <label>
      <input
        type="text"
        name="date"
        value
        pattern="0?[1-9]|1[012]"
        aria-label="Month (MM)"
      />

      <span class="o-forms-input__label" aria-hidden="true"> MM </span>
    </label>
    <label>
      <input
        type="text"
        name="date"
        value
        pattern="[0-9]{4}"
        aria-label="Year (YYYY)"
      />

      <span class="o-forms-input__label" aria-hidden="true"> YYYY </span>
    </label>
  </span>
</div>

<div
  class="o-forms-field"
  role="group"
  aria-labelledby="disabled-date-group-title"
>
  <span class="o-forms-title">
    <span class="o-forms-title__main" id="disabled-date-group-title"
      >Disabled date input</span
    >
  </span>

  <span class="o-forms-input o-forms-input--date">
    <label>
      <input
        type="text"
        name="disabled-date"
        value
        class="o-forms-input__day-part"
        inputmode="numeric"
        pattern="0[1-9]|[12]\d|3[01]"
        aria-label="Day (DD)"
        disabled
      />

      <span class="o-forms-input__label" aria-hidden="true"> DD </span>
    </label>
    <label>
      <input
        type="text"
        name="disabled-date"
        value
        class="o-forms-input__month-part"
        inputmode="numeric"
        pattern="0?[1-9]|1[012]"
        aria-label="Month (MM)"
        disabled
      />

      <span class="o-forms-input__label" aria-hidden="true"> MM </span>
    </label>
    <label>
      <input
        type="text"
        name="disabled-date"
        value
        class="o-forms-input__year-part"
        inputmode="numeric"
        pattern="[0-9]{4}"
        aria-label="Year (YYYY)"
        disabled
      />

      <span class="o-forms-input__label" aria-hidden="true"> YYYY </span>
    </label>
  </span>
</div>

<div
  class="o-forms-field"
  role="group"
  aria-labelledby="error-date-group-title"
  aria-describedby="error-date-group-info"
>
  <span class="o-forms-title">
    <span class="o-forms-title__main" id="error-date-group-title"
      >Invalid date input</span
    >
    <span class="o-forms-title__prompt" id="error-date-group-info"
      >Exemplifies a pattern mismatch</span
    >
  </span>

  <span class="o-forms-input o-forms-input--date o-forms-input--invalid">
    <label>
      <input
        type="text"
        name="invalid-date"
        value="01"
        class="o-forms-input__day-part"
        inputmode="numeric"
        pattern="0[1-9]|[12]\d|3[01]"
        aria-label="Day (DD)"
        required
      />

      <span class="o-forms-input__label" aria-hidden="true"> DD </span>
    </label>
    <label>
      <input
        type="text"
        name="invalid-date"
        value="24"
        class="o-forms-input__month-part"
        inputmode="numeric"
        pattern="0?[1-9]|1[012]"
        aria-label="Month (MM)"
        required
      />

      <span class="o-forms-input__label" aria-hidden="true"> MM </span>
    </label>
    <label>
      <input
        type="text"
        name="invalid-date"
        value="2019"
        class="o-forms-input__year-part"
        inputmode="numeric"
        pattern="[0-9]{4}"
        aria-label="Year (YYYY)"
        required
      />

      <span class="o-forms-input__label" aria-hidden="true"> YYYY </span>
    </label>

    <span class="o-forms-input__error">Not a valid date</span>
  </span>
</div>

<div
  class="o-forms-field o-forms-field--inline"
  role="group"
  aria-labelledby="inline-date-group-title"
>
  <span class="o-forms-title">
    <span class="o-forms-title__main" id="inline-date-group-title"
      >Inline date input</span
    >
  </span>

  <span class="o-forms-input o-forms-input--date o-forms-input--inline">
    <label>
      <input
        type="text"
        name="inline-date"
        value
        class="o-forms-input__day-part"
        inputmode="numeric"
        pattern="0[1-9]|[12]\d|3[01]"
        aria-label="Day (DD)"
        required
      />

      <span class="o-forms-input__label" aria-hidden="true"> DD </span>
    </label>
    <label>
      <input
        type="text"
        name="inline-date"
        value
        pattern="0?[1-9]|1[012]"
        aria-label="Month (MM)"
        required
      />

      <span class="o-forms-input__label" aria-hidden="true"> MM </span>
    </label>
    <label>
      <input
        type="text"
        name="inline-date"
        value
        pattern="[0-9]{4}"
        aria-label="Year (YYYY)"
        required
      />

      <span class="o-forms-input__label" aria-hidden="true"> YYYY </span>
    </label>
  </span>
</div>

<div
  class="o-forms-field o-forms-field--optional"
  role="group"
  aria-labelledby="radio-box-group-title"
  aria-describedby="radio-box-group-info"
>
  <span class="o-forms-title">
    <span class="o-forms-title__main" id="radio-box-group-title"
      >Box style radio buttons</span
    >
    <span class="o-forms-title__prompt" id="radio-box-group-info"
      >Optional prompt text</span
    >
  </span>

  <span class="o-forms-input o-forms-input--radio-box">
    <div class="o-forms-input--radio-box__container">
      <label>
        <input type="radio" name="default" value="Daily" checked />

        <span class="o-forms-input__label"> Daily </span>
      </label>
      <label>
        <input type="radio" name="default" value="Weekly" />

        <span class="o-forms-input__label"> Weekly </span>
      </label>
    </div>
  </span>
</div>

<div
  class="o-forms-field"
  role="group"
  aria-labelledby="negative-radio-box-group-title"
  aria-describedby="negative-radio-box-group-info"
>
  <span class="o-forms-title">
    <span class="o-forms-title__main" id="negative-radio-box-group-title"
      >Negative highlight</span
    >
    <span class="o-forms-title__prompt" id="negative-radio-box-group-info"
      >Requires a modifier on the label</span
    >
  </span>

  <span class="o-forms-input o-forms-input--radio-box o-forms-input--inline">
    <div class="o-forms-input--radio-box__container">
      <label>
        <input type="radio" name="negative" value="Yes" required />

        <span class="o-forms-input__label"> Yes </span>
      </label>
      <label>
        <input type="radio" name="negative" value="No" checked required />

        <span class="o-forms-input__label o-forms-input__label--negative">
          No
        </span>
      </label>
    </div>
  </span>
</div>

<div
  class="o-forms-field"
  role="group"
  aria-labelledby="multiple-radio-box-group-title"
>
  <span class="o-forms-title">
    <span class="o-forms-title__main" id="multiple-radio-box-group-title"
      >Multiple box-styled radio buttons</span
    >
  </span>

  <span class="o-forms-input o-forms-input--radio-box">
    <div class="o-forms-input--radio-box__container">
      <label>
        <input type="radio" name="multiple" value="Daily" required />

        <span class="o-forms-input__label"> Daily </span>
      </label>
      <label>
        <input type="radio" name="multiple" value="Weekly" checked required />

        <span class="o-forms-input__label"> Weekly </span>
      </label>
      <label>
        <input type="radio" name="multiple" value="Monthly" required />

        <span class="o-forms-input__label"> Monthly </span>
      </label>
    </div>
  </span>
</div>

<div
  class="o-forms-field"
  role="group"
  aria-labelledby="disabed-radio-box-group-title"
>
  <span class="o-forms-title">
    <span class="o-forms-title__main" id="disabed-radio-box-group-title"
      >Disabled box-styled radio buttons</span
    >
  </span>

  <span class="o-forms-input o-forms-input--radio-box">
    <div class="o-forms-input--radio-box__container">
      <label>
        <input type="radio" name="disabled" value="Daily" checked disabled />

        <span class="o-forms-input__label"> Daily </span>
      </label>
      <label>
        <input type="radio" name="disabled" value="Monthly" disabled />

        <span class="o-forms-input__label"> Monthly </span>
      </label>
    </div>
  </span>
</div>

<div
  class="o-forms-field"
  role="group"
  aria-labelledby="error-radio-box-group-title"
>
  <span class="o-forms-title">
    <span class="o-forms-title__main" id="error-radio-box-group-title"
      >Error box-style radio buttons</span
    >
  </span>

  <span class="o-forms-input o-forms-input--radio-box o-forms-input--invalid">
    <div class="o-forms-input--radio-box__container">
      <label>
        <input type="radio" name="error" value="Yes" required />

        <span class="o-forms-input__label"> Yes </span>
      </label>
      <label>
        <input type="radio" name="error" value="No" required />

        <span class="o-forms-input__label"> No </span>
      </label>
    </div>

    <span class="o-forms-input__error">Please select an option</span>
  </span>
</div>

<div
  class="o-forms-field o-forms-field--inline"
  role="group"
  aria-labelledby="inline-radio-box-group-title"
>
  <span class="o-forms-title o-forms-title--vertical-center">
    <span class="o-forms-title__main" id="inline-radio-box-group-title"
      >V-centered inline radio box</span
    >
  </span>

  <span class="o-forms-input o-forms-input--radio-box o-forms-input--inline">
    <div class="o-forms-input--radio-box__container">
      <label>
        <input type="radio" name="inline" value="Daily" checked required />

        <span class="o-forms-input__label"> Daily </span>
      </label>
      <label>
        <input type="radio" name="inline" value="Weekly" required />

        <span class="o-forms-input__label"> Weekly </span>
      </label>
    </div>
  </span>
</div>

<div
  class="o-forms-field o-forms-field--inline"
  role="group"
  aria-labelledby="saving-state-group-title-long"
  aria-describedby="saving-state-group-info-long"
>
  <span class="o-forms-title">
    <span class="o-forms-title__main" id="saving-state-group-title-long"
      >Inline box-style radio buttons with very long title. Inline box-style
      radio buttons with very long title</span
    >
    <span class="o-forms-title__prompt" id="saving-state-group-info-long"
      >With a stacked saving state</span
    >
  </span>

  <span class="o-forms-input o-forms-input--radio-box o-forms-input--saving">
    <div class="o-forms-input--radio-box__container">
      <label>
        <input type="radio" name="saving" value="Daily" checked required />

        <span class="o-forms-input__label"> Daily </span>
      </label>
      <label>
        <input type="radio" name="saving" value="Weekly" required />

        <span class="o-forms-input__label"> Weekly </span>
      </label>
    </div>

    <span class="o-forms-input__state"> </span>
  </span>
</div>

<div
  class="o-forms-field o-forms-field--inline"
  role="group"
  aria-labelledby="saved-state-group-title"
>
  <span class="o-forms-title">
    <span class="o-forms-title__main" id="saved-state-group-title"
      >Inline saved state</span
    >
  </span>

  <span
    class="o-forms-input o-forms-input--radio-box o-forms-input--saved o-forms-input--inline"
  >
    <div class="o-forms-input--radio-box__container">
      <label>
        <input type="radio" name="saved" value="Daily" required />

        <span class="o-forms-input__label"> Daily </span>
      </label>
      <label>
        <input type="radio" name="saved" value="Weekly" checked required />

        <span class="o-forms-input__label"> Weekly </span>
      </label>
    </div>

    <span class="o-forms-input__state"> </span>
  </span>
</div>

<div
  class="o-forms-field o-forms-field--inline"
  role="group"
  aria-labelledby="saving-state-group-title"
  aria-describedby="saving-state-group-info"
>
  <span class="o-forms-title">
    <span class="o-forms-title__main" id="saving-state-group-title"
      >Inline saving state</span
    >
    <span class="o-forms-title__prompt" id="saving-state-group-info"
      >Icon only&#x2014;also available for saved state</span
    >
  </span>

  <span
    class="o-forms-input o-forms-input--radio-box o-forms-input--saving o-forms-input--inline"
  >
    <div class="o-forms-input--radio-box__container">
      <label>
        <input type="radio" name="icon" value="Daily" checked required />

        <span class="o-forms-input__label"> Daily </span>
      </label>
      <label>
        <input type="radio" name="icon" value="Weekly" required />

        <span class="o-forms-input__label"> Weekly </span>
      </label>
    </div>

    <span class="o-forms-input__state o-forms-input__state--icon-only"> </span>
  </span>
</div>

<div
  class="o-forms-field o-forms-field--optional"
  role="group"
  aria-labelledby="radio-round-group-title"
  aria-describedby="radio-round-group-info"
>
  <span class="o-forms-title">
    <span class="o-forms-title__main" id="radio-round-group-title"
      >Default round-style radio buttons</span
    >
    <span class="o-forms-title__prompt" id="radio-round-group-info"
      >Optional prompt/description text</span
    >
  </span>

  <span class="o-forms-input o-forms-input--radio-round">
    <label>
      <input type="radio" name="default" value="Default 1" checked />

      <span class="o-forms-input__label"> Default 1 </span>
    </label>
    <label>
      <input type="radio" name="default" value="Default 2" />

      <span class="o-forms-input__label"> Default 2 </span>
    </label>
  </span>
</div>

<div
  class="o-forms-field"
  role="group"
  aria-labelledby="inline-radio-round-group-title"
>
  <span class="o-forms-title">
    <span class="o-forms-title__main" id="inline-radio-round-group-title"
      >Inline round-style radio buttons</span
    >
  </span>

  <span class="o-forms-input o-forms-input--radio-round o-forms-input--inline">
    <label>
      <input
        type="radio"
        name="inline-radio"
        value="Inlined 1"
        checked
        required
      />

      <span class="o-forms-input__label"> Inlined 1 </span>
    </label>
    <label>
      <input type="radio" name="inline-radio" value="Inlined 2" required />

      <span class="o-forms-input__label"> Inlined 2 </span>
    </label>
    <label>
      <input type="radio" name="inline-radio" value="Inlined 3" required />

      <span class="o-forms-input__label"> Inlined 3 </span>
    </label>
  </span>
</div>

<div
  class="o-forms-field"
  role="group"
  aria-labelledby="disabed-radio-round-group-title"
>
  <span class="o-forms-title">
    <span class="o-forms-title__main" id="disabed-radio-round-group-title"
      >Disabled radio buttons</span
    >
  </span>

  <span class="o-forms-input o-forms-input--radio-round">
    <label>
      <input type="radio" name="disabled" value="Disabled 1" checked disabled />

      <span class="o-forms-input__label"> Disabled 1 </span>
    </label>
    <label>
      <input type="radio" name="disabled" value="Disabled 2" disabled />

      <span class="o-forms-input__label"> Disabled 2 </span>
    </label>
  </span>
</div>

<div
  class="o-forms-field"
  role="group"
  aria-labelledby="error-radio-round-group-title"
>
  <span class="o-forms-title">
    <span class="o-forms-title__main" id="error-radio-round-group-title"
      >Error round-style radio buttons</span
    >
  </span>

  <span class="o-forms-input o-forms-input--radio-round o-forms-input--invalid">
    <label>
      <input type="radio" name="error" value="Error 1" required />

      <span class="o-forms-input__label"> Error 1 </span>
    </label>
    <label>
      <input type="radio" name="error" value="Error 2" required />

      <span class="o-forms-input__label"> Error 2 </span>
    </label>

    <span class="o-forms-input__error">Please select an option</span>
  </span>
</div>

<div
  class="o-forms-field"
  role="group"
  aria-labelledby="inline-radio-round-group-title"
>
  <span class="o-forms-title">
    <span class="o-forms-title__main" id="inline-radio-round-group-title"
      >Inline round-style radio buttons</span
    >
  </span>

  <span class="o-forms-input o-forms-input--radio-round o-forms-input--inline">
    <label>
      <input type="radio" name="inline" value="Inlined 1" checked required />

      <span class="o-forms-input__label"> Inlined 1 </span>
    </label>
    <label>
      <input type="radio" name="inline" value="Inlined 2" required />

      <span class="o-forms-input__label"> Inlined 2 </span>
    </label>
    <label>
      <input type="radio" name="inline" value="Inlined 3" required />

      <span class="o-forms-input__label"> Inlined 3 </span>
    </label>
  </span>
</div>

<div
  class="o-forms-field o-forms-field--inline"
  role="group"
  aria-labelledby="inline-field-radio-round-group-title"
>
  <span class="o-forms-title">
    <span class="o-forms-title__main" id="inline-field-radio-round-group-title"
      >Inline field and radio buttons</span
    >
  </span>

  <span class="o-forms-input o-forms-input--radio-round o-forms-input--inline">
    <label>
      <input
        type="radio"
        name="inline-field"
        value="Inlined 1"
        checked
        required
      />

      <span class="o-forms-input__label"> Inlined 1 </span>
    </label>
    <label>
      <input type="radio" name="inline-field" value="Inlined 2" required />

      <span class="o-forms-input__label"> Inlined 2 </span>
    </label>
  </span>
</div>

<div
  class="o-forms-field o-forms-field--inline"
  role="group"
  aria-labelledby="inline-field-stacked-radio-round-group-title"
  aria-describedby="inline-field-stacked-radio-round-group-info"
>
  <span class="o-forms-title">
    <span
      class="o-forms-title__main"
      id="inline-field-stacked-radio-round-group-title"
      >Inline field</span
    >
    <span
      class="o-forms-title__prompt"
      id="inline-field-stacked-radio-round-group-info"
      >And stacked radio buttons</span
    >
  </span>

  <span class="o-forms-input o-forms-input--radio-round">
    <label>
      <input
        type="radio"
        name="inline-stacked"
        value="Inlined 1"
        checked
        required
      />

      <span class="o-forms-input__label"> Inlined 1 </span>
    </label>
    <label>
      <input type="radio" name="inline-stacked" value="Inlined 2" required />

      <span class="o-forms-input__label"> Inlined 2 </span>
    </label>
    <label>
      <input type="radio" name="inline-stacked" value="Inlined 3" required />

      <span class="o-forms-input__label"> Inlined 3 </span>
    </label>
  </span>
</div>

<div
  class="o-forms-field o-forms-field--optional"
  role="group"
  aria-labelledby="toggle-group-title"
  aria-describedby="toggle-group-info"
>
  <span class="o-forms-title">
    <span class="o-forms-title__main" id="toggle-group-title"
      >Default toggle inputs</span
    >
    <span class="o-forms-title__prompt" id="toggle-group-info"
      >Optional prompt text</span
    >
  </span>

  <span class="o-forms-input o-forms-input--toggle">
    <label>
      <input type="checkbox" name="default" value="Stacked 1" checked />

      <span class="o-forms-input__label"> Stacked 1 </span>
    </label>
    <label>
      <input type="checkbox" name="default" value="Stacked 2" />

      <span class="o-forms-input__label"> Stacked 2 </span>
    </label>
  </span>
</div>

<div
  class="o-forms-field"
  role="group"
  aria-labelledby="inlined-toggle-group-title"
>
  <span class="o-forms-title">
    <span class="o-forms-title__main" id="inlined-toggle-group-title"
      >Inline toggle inputs</span
    >
  </span>

  <span class="o-forms-input o-forms-input--toggle o-forms-input--inline">
    <label>
      <input
        type="checkbox"
        name="optional"
        value="Optional 1"
        checked
        required
      />

      <span class="o-forms-input__label"> Optional 1 </span>
    </label>
    <label>
      <input type="checkbox" name="optional" value="Optional 2" required />

      <span class="o-forms-input__label"> Optional 2 </span>
    </label>
  </span>
</div>

<div
  class="o-forms-field"
  role="group"
  aria-labelledby="disabed-toggle-group-title"
>
  <span class="o-forms-title">
    <span class="o-forms-title__main" id="disabed-toggle-group-title"
      >Disabled toggle inputs</span
    >
  </span>

  <span class="o-forms-input o-forms-input--toggle">
    <label>
      <input
        type="checkbox"
        name="disabled"
        value="Disabled 1"
        checked
        disabled
      />

      <span class="o-forms-input__label"> Disabled 1 </span>
    </label>
    <label>
      <input type="checkbox" name="disabled" value="Disabled 2" disabled />

      <span class="o-forms-input__label"> Disabled 2 </span>
    </label>
  </span>
</div>

<div
  class="o-forms-field"
  role="group"
  aria-labelledby="error-toggle-group-title"
>
  <span class="o-forms-title">
    <span class="o-forms-title__main" id="error-toggle-group-title"
      >Error toggle inputs</span
    >
  </span>

  <span class="o-forms-input o-forms-input--toggle o-forms-input--invalid">
    <label>
      <input type="checkbox" name="error" value="Error 1" checked required />

      <span class="o-forms-input__label"> Error 1 </span>
    </label>
    <label>
      <input type="checkbox" name="error" value="Error 2" required />

      <span class="o-forms-input__label"> Error 2 </span>
    </label>

    <span class="o-forms-input__error">Something has gone wrong.</span>
  </span>
</div>

<div
  class="o-forms-field o-forms-field--inline"
  role="group"
  aria-labelledby="inline-field-toggle-group-title"
>
  <span class="o-forms-title">
    <span class="o-forms-title__main" id="inline-field-toggle-group-title"
      >Inline field with toggle</span
    >
  </span>

  <span class="o-forms-input o-forms-input--toggle">
    <label>
      <input
        type="checkbox"
        name="inline-field"
        value="Inlined 1"
        checked
        required
      />

      <span class="o-forms-input__label"> Inlined 1 </span>
    </label>
    <label>
      <input type="checkbox" name="inline-field" value="Inlined 2" required />

      <span class="o-forms-input__label"> Inlined 2 </span>
    </label>
  </span>
</div>

<div
  class="o-forms-field o-forms-field--inline"
  role="group"
  aria-labelledby="inline-field-toggle-group-title"
>
  <span class="o-forms-title">
    <span class="o-forms-title__main" id="inline-field-toggle-group-title"
      >Inline field with inline toggle</span
    >
  </span>

  <span class="o-forms-input o-forms-input--toggle o-forms-input--inline">
    <label>
      <input
        type="checkbox"
        name="inline-all"
        value="Inlined 1"
        checked
        required
      />

      <span class="o-forms-input__label"> Inlined 1 </span>
    </label>
    <label>
      <input type="checkbox" name="inline-all" value="Inlined 2" required />

      <span class="o-forms-input__label"> Inlined 2 </span>
    </label>
  </span>
</div>

<div class="demo-inverse">
  <div
    class="o-forms-field o-forms-field--inverse o-forms-field--optional"
    role="group"
    aria-labelledby="inverse-toggle-group-title"
  >
    <span class="o-forms-title">
      <span class="o-forms-title__main" id="inverse-toggle-group-title"
        >Inverse checkboxes</span
      >
      <span class="o-forms-title__prompt">Inverse prompt text</span>
    </span>

    <span class="o-forms-input o-forms-input--toggle">
      <label>
        <input type="checkbox" name="inverse" value="Inverse 1" checked />

        <span class="o-forms-input__label"> Inverse 1 </span>
      </label>
      <label>
        <input type="checkbox" name="inverse" value="Inverse 2" />

        <span class="o-forms-input__label"> Inverse 2 </span>
      </label>
    </span>
  </div>
</div>

<label class="o-forms-field o-forms-field--optional">
  <span class="o-forms-title">
    <span class="o-forms-title__main">Optional text input</span>
    <span class="o-forms-title__prompt">Optional prompt text</span>
  </span>

  <span class="o-forms-input o-forms-input--text">
    <input type="text" name="text" value />
  </span>
</label>
<label class="o-forms-field">
  <span class="o-forms-title">
    <span class="o-forms-title__main">Text input with a valid entry</span>
  </span>

  <span class="o-forms-input o-forms-input--text o-forms-input--valid">
    <input type="text" name="text" value="Valid Input" required />
  </span>
</label>
<label class="o-forms-field">
  <span class="o-forms-title">
    <span class="o-forms-title__main">Text input with an invalid entry</span>
  </span>

  <span class="o-forms-input o-forms-input--text o-forms-input--invalid">
    <input type="text" name="text" value required />

    <span class="o-forms-input__error">Please fill out this field</span>
  </span>
</label>
<label class="o-forms-field">
  <span class="o-forms-title">
    <span class="o-forms-title__main">Disabled text input</span>
  </span>

  <span class="o-forms-input o-forms-input--text">
    <input type="text" name="text" value="Disabled" disabled />
  </span>
</label>
<label class="o-forms-field">
  <span class="o-forms-title">
    <span class="o-forms-title__main">Small text input</span>
  </span>

  <span class="o-forms-input o-forms-input--text o-forms-input--small">
    <input type="text" name="text" value="Value" required />
  </span>
</label>
<label class="o-forms-field o-forms-field--optional">
  <span class="o-forms-title">
    <span class="o-forms-title__main">Text input with suffix</span>
  </span>

  <span class="o-forms-input o-forms-input--text o-forms-input--suffix">
    <input type="text" name="text" value />

    <button class="o-buttons o-buttons--secondary o-buttons--big">Go</button>
  </span>
</label>
<label class="o-forms-field">
  <span class="o-forms-title">
    <span class="o-forms-title__main">Small text input with suffix</span>
  </span>

  <span
    class="o-forms-input o-forms-input--text o-forms-input--small o-forms-input--suffix"
  >
    <input type="text" name="text" value required />

    <button class="o-buttons o-buttons--secondary">Go</button>
  </span>
</label>
<label class="o-forms-field o-forms-field--inline o-forms-field--optional">
  <span
    class="o-forms-title o-forms-title--shrink o-forms-title--vertical-center"
  >
    <span class="o-forms-title__main">Shrunken title</span>
    <span class="o-forms-title__prompt">Vertically centered</span>
  </span>

  <span class="o-forms-input o-forms-input--text">
    <input type="text" name="text" value />
  </span>
</label>
<label class="o-forms-field">
  <span class="o-forms-title">
    <span class="o-forms-title__main">Password input</span>
  </span>

  <span class="o-forms-input o-forms-input--password">
    <input type="password" name="text" value="password" required />
  </span>
</label>