England Football

Text Input 

<div class="text-input-container">
    <label class="text-input-container__label" for="">

    </label>
    <input class="text-input-container__text-input" type=placeholder=""></input>
    <div for=class="text-input-container__form-field-error">
        <div class="registration-error registration_hide" role="alert">
            <span class="registration-error-message registration_hide" id="invalid-b2c-contact-number">invalid-b2c-contact-number</span>
            <span class="registration-error-message registration_hide" id="invalid-input-required">Requird</span>
            <span class="registration-error-message registration_hide" id="invalid-input-length">invalid-length</span>
            <span class="registration-error-message registration_hide" id="invalid-input-alphabets-only">alphabets-only</span>
            <span class="registration-error-message registration_hide" id="invalid-input-alphanumeric">alpha numeric</span>
            <span class="registration-error-message registration_hide" id="invalid-input-underflow">A junior account cannot be 16 years old or above</span>
            <span class="registration-error-message registration_hide" id="invalid-input-overflow">A junior account cannot be 16 years old or above</span>
            <span class="registration-error-message registration_hide" id="invalid-character-length">length-should-be-9characters</span>
        </div>

    </div>
</div>

No notes defined.

/* No context defined. */
  • Content: 
    .text-input-container {
  &__label {
    font-size: 14px;
    font-family: 'Grot12', arial, helvetica, sans-serif;
    color: $light-blue;
  }

  &__text-input {
    height: 43px;
    background-color: $crest-blue;
    width: 100%;
    border: 1px solid white;
    border-radius: 2px;
    font-size: 16px;
    line-height: 26px;
    color: white;
    padding: 0 20px;
    font-family: 'Grot12', arial, helvetica, sans-serif;
    margin-top: 5px;

    &::placeholder {
      color: $light-blue1;
    }

    &:focus {
      outline: none;
    }

    &:hover {
      background-color: $rj-blue;
    }

    &:disabled {
      background-color: #f0f0f0;
      color: $crest-blue;
    }
  }

  &__form-field-error {
    display: none;
  }
}

.text-input-container.error {
  .text-input-container__form-field-error {
    display: block;
    background-color: $red-error;
    color: $white;
    height: 31px;
    font-size: 13px;
    line-height: 31px;
    padding: 0 20px;
    font-family: 'Grot12', arial, helvetica, sans-serif;

    p::before {
      content: '';
      background: url(./assets/example-content/error.svg) no-repeat center;
      display: inline-block;
      width: 13px;
      height: 13px;
      // margin-top: 9px;
      margin-right: 0.8rem;
      background-size: contain;
    }
  }
  .text-input-container__text-input {
    border-color: red;
    border-radius: 2px 0;
  }
}
  • URL: /components/raw/text-input/text-input.scss
  • Filesystem Path: src/library/components/text-input/text-input.scss
  • Size: 1.4 KB 
<div class="text-input-container">
    {{!-- add error class to make error visible --}}
    <label class="text-input-container__label" for="{{name}}">
        {{copy}}
    </label>
    <input class="text-input-container__text-input" type={{type}} placeholder="{{copy}}" {{#if disabled}}disabled{{/if}} {{#if
        name}}name={{name}} id={{name}} {{/if}} {{#if aria-label}} aria-label="{{ariaLabel}}" {{/if}}></input>
    <div for={{name}} class="text-input-container__form-field-error">
        {{render '@registration-error'}}
    </div>
</div>