England Football

Registration Text Input 

<div class="registration-text-input-container">
    <label class="registration-text-input-container__label" for=primary>
        Input field
    </label>
    <input class="registration-text-input-container__text-input" type="text" name="primary" id="primary" placeholder="ESTC input field" />
    <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>

No notes defined.

{
  "modifier": "primary",
  "id": "primary",
  "name": "primary",
  "ariaLabel": "Input field",
  "type": "text",
  "placeholder": "ESTC input field",
  "label": "Input field"
}
  • Content: 
    .registration-text-input-container {
  &__label {
    font-size: 14px;
    font-family: $registration-font;
    color: $light-blue;
    font-weight: 400;
  }

  &__text-input {
    height: 44px;
    background-color: $crest-blue;
    width: 100%;
    border: 1px solid white;
    border-radius: 2px;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    color: white;
    padding: 0 20px;
    font-family: $registration-font;
    margin-top: 6px;
    opacity: 1;

    &::-webkit-calendar-picker-indicator {
      filter: invert(1);
    }

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

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

    &:focus-visible,
    &:not(:disabled):hover {
      background-color: $rj-blue;
      outline: none;
    }
  }

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

  &.error {
    .registration-text-input-container__text-input {
      border-color: $Embarrassment-red;
      border-bottom: 0;
      border-radius: 2px 2px 0 0;
    }
  }
}
  • URL: /components/raw/registration-text-input/registration-text-input.scss
  • Filesystem Path: src/library/modules/registration/registration-text-input/registration-text-input.scss
  • Size: 1.1 KB 
<div class="registration-text-input-container">
    {{!-- add error class to make error visible --}}
    <label class="registration-text-input-container__label" {{#if name }}for={{name}} {{/if}}>
        {{label }}
    </label>
    <input class="registration-text-input-container__text-input"  {{#if maxlength }}data-maxlength="{{maxlength}}" {{/if}} {{#if type }}type="{{type}}" {{/if}} {{#if
        disabled}}disabled{{/if}} {{#if max}}data-max='{{max}}' {{/if}} {{#if min}}data-min='{{min}}' {{/if}} {{#if
        max}}max='9999-12-31' {{/if}} {{#if name}}name="{{name}}" {{/if}} {{#if id}} id="{{id}}" {{/if}} {{#if
        autocomplete}}autocomplete="{{autocomplete}}" {{/if}} {{#if placeholder}} placeholder="{{placeholder}}" {{/if}}
        {{#if aria-label}} aria-label="{{ariaLabel}}" {{/if}} />
    {{render '@registration-error'}}
</div>