<div>
  <form [formGroup]="testForm">
    <div style="display: flex" class="input-count-example-wrapper">
      <label
        for="input-count-example"
        class="sky-control-label"
        style="flex-grow: 1"
      >
        First name
      </label>

      <sky-character-counter-indicator #indicator />
    </div>

    <input
      aria-label="Input"
      class="sky-form-control"
      formControlName="firstName"
      id="first-name-input"
      type="text"
      skyCharacterCounter
      [skyCharacterCounterIndicator]="indicator"
      [skyCharacterCounterLimit]="maxCharacterCount"
    />

    @if (firstName.errors?.skyCharacterCounter) {
    <div class="sky-error-label">
      Limit First name to {{maxCharacterCount}} characters.
    </div>
    }

    <div style="display: flex" class="input-count-example-wrapper-last-name">
      <label
        for="input-count-example-last-name"
        class="sky-control-label"
        style="flex-grow: 1"
      >
        Last name
      </label>

      <sky-character-counter-indicator #indicatorLastName />
    </div>

    <input
      aria-label="Input"
      class="sky-form-control"
      formControlName="lastName"
      id="last-name-input"
      type="text"
      skyCharacterCounter
      [skyCharacterCounterLimit]="maxCharacterCountLastName"
      [skyCharacterCounterIndicator]="indicatorLastName"
    />

    @if (lastName.errors?.skyCharacterCounter) {
    <div class="sky-error-label">
      Limit Last name to {{maxCharacterCount}} characters.
    </div>
    }
  </form>
</div>
