input email

The email input element let the user enter and edit an email address

According to the Web Content Accessibility Guidelines (WCAG), it is highly reccomended to use a label together with the email input.

This component works with all its features only in browsers that have support for the :has CSS selector. Please refer to the reference on MDN.
If you need to run this component in a browser with no support for the :has CSS selector, please use the FROK Release 3.6.x.
table of content

component variations

input email

Open on blank page
<div class="a-email-input">
  <input type="email" id="email-input-1" name="input email" />
</div>

input email disabled

Open on blank page
<div class="a-email-input">
  <input
    type="email"
    id="email-input-2"
    name="input email disabled"
    disabled=""
  />
</div>

input email readonly

Open on blank page
<div class="a-email-input">
  <input
    type="email"
    id="email-input-3"
    name="input email readonly"
    readonly=""
  />
</div>

input email with label

Open on blank page
<div class="a-email-input">
  <label for="email-input-4">label</label>
  <input type="email" id="email-input-4" name="input email with label" />
</div>

input email with label disabled

Open on blank page
<div class="a-email-input">
  <label for="email-input-5">label</label>
  <input
    type="email"
    id="email-input-5"
    name="input email with label disabled"
    disabled=""
  />
</div>

input email with label readonly

Open on blank page
<div class="a-email-input">
  <label for="email-input-6">label</label>
  <input
    type="email"
    id="email-input-6"
    name="input email with label readonly"
    readonly=""
  />
</div>

input email with very long label

Open on blank page
<div class="a-email-input">
  <label for="email-input-7">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae omnis labore
    consequatur distinctio provident voluptatum nisi recusandae quod asperiores
    quo, architecto cum nesciunt nemo, vel minima possimus et blanditiis
    numquam, cupiditate deserunt fugit delectus earum ducimus alias! Quam atque
    laborum tempore alias magnam tenetur fuga facere totam, harum, ipsa sit!
  </label>
  <input
    type="email"
    id="email-input-7"
    name="input email with very long label"
  />
</div>

input email with very long label disabled

Open on blank page
<div class="a-email-input">
  <label for="email-input-8">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae omnis labore
    consequatur distinctio provident voluptatum nisi recusandae quod asperiores
    quo, architecto cum nesciunt nemo, vel minima possimus et blanditiis
    numquam, cupiditate deserunt fugit delectus earum ducimus alias! Quam atque
    laborum tempore alias magnam tenetur fuga facere totam, harum, ipsa sit!
  </label>
  <input
    type="email"
    id="email-input-8"
    name="input email with very long label disabled"
    disabled=""
  />
</div>

input email with very long label readonly

Open on blank page
<div class="a-email-input">
  <label for="email-input-9">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae omnis labore
    consequatur distinctio provident voluptatum nisi recusandae quod asperiores
    quo, architecto cum nesciunt nemo, vel minima possimus et blanditiis
    numquam, cupiditate deserunt fugit delectus earum ducimus alias! Quam atque
    laborum tempore alias magnam tenetur fuga facere totam, harum, ipsa sit!
  </label>
  <input
    type="email"
    id="email-input-9"
    name="input email with very long label readonly"
    readonly=""
  />
</div>

input email with placeholder

Open on blank page
<div class="a-email-input">
  <input
    type="email"
    id="email-input-10"
    name="input email with placeholder"
    placeholder="Write your email here"
  />
</div>

input email with placeholder disabled

Open on blank page
<div class="a-email-input">
  <input
    type="email"
    id="email-input-11"
    name="input email with placeholder disabled"
    placeholder="Write your email here"
    disabled=""
  />
</div>

input email with placeholder readonly

Open on blank page
<div class="a-email-input">
  <input
    type="email"
    id="email-input-12"
    name="input email with placeholder readonly"
    placeholder="Write your email here"
    readonly=""
  />
</div>

input email with placeholder and label

Open on blank page
<div class="a-email-input">
  <label for="email-input-13">label</label>
  <input
    type="email"
    id="email-input-13"
    name="input email with placeholder and label"
    placeholder="Write your email here"
  />
</div>

input email with placeholder and label disabled

Open on blank page
<div class="a-email-input">
  <label for="email-input-14">label</label>
  <input
    type="email"
    id="email-input-14"
    name="input email with placeholder and label disabled"
    placeholder="Write your email here"
    disabled=""
  />
</div>

input email with placeholder and label readonly

Open on blank page
<div class="a-email-input">
  <label for="email-input-15">label</label>
  <input
    type="email"
    id="email-input-15"
    name="input email with placeholder and label readonly"
    placeholder="Write your email here"
    readonly=""
  />
</div>

additional content

styles SCSS

.a-email-input {
  height: 3rem;
  position: relative;
  width: auto;

  input {
    background-color: var(--neutral__enabled__fill__default);
    border: 0;
    border-bottom: 0.0625rem solid var(--neutral__enabled__front__default);
    color: var(--neutral__enabled__front__default);
    height: 3rem;
    padding: 0 1rem;
    width: 100%;

    &::-webkit-contacts-auto-fill-button {
      visibility: hidden;
    }

    &[readonly],
    &:focus[readonly] {
      background-color: var(--plain__enabled__fill__default);
      pointer-events: none;
    }

    &::placeholder {
      color: var(--plain__enabled__front__default);
      opacity: 0.5;
    }

    &:hover:not(:disabled):not(:read-only) {
      background-color: var(--neutral__enabled__fill__hovered);
    }

    &:active:not(:disabled):not(:read-only) {
      background-color: var(--neutral__enabled__fill__pressed);
    }

    &:focus {
      background-color: var(--neutral__focused__fill__default);
      border-bottom-color: var(--neutral__focused__front__default);
    }

    &:focus-visible {
      border: 3px solid var(--plain__enabled__front__default);
      outline: 3px solid var(--background);
      outline-offset: -6px;
      padding-inline: 13px;
      padding-block-end: 1px;
    }

    &:disabled {
      border-bottom-color: var(--neutral__disabled__front__default);
      background-color: var(--neutral__disabled__fill__default);
      pointer-events: none;

      &::placeholder {
        color: var(--neutral__disabled__front__default);
      }
    }
  }

  label {
    margin: 0.25rem 1rem auto 1rem;
    max-width: calc(100% - 4rem);
    overflow: hidden;
    position: absolute;
    text-overflow: ellipsis;
    white-space: nowrap;

    &:has(~ input:disabled) {
      color: var(--neutral__disabled__front__default);
    }

    + input {
      padding-top: 1.125rem;
      padding-bottom: 0.3125rem;

      &:focus-visible {
        padding-block-end: 0.375rem;
      }
    }
  }
}