input password

The password input element let the user enter a password.

The password input features a control that will show the password to the user. Note that this will not have any impact on the data transmitted.

According to the Web Content Accessibility Guidelines (WCAG), it is highly reccomended to use a label together with the password 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 password

Open on blank page
<div class="a-password-input">
  <input
    type="password"
    id="password-input-1"
    name="input password"
    value="Bosch0711"
  />
  <button
    type="button"
    class="a-password-input__icon-password"
    aria-label="Show password"
  >
    <i class="a-icon ui-ic-watch-on"></i>
  </button>
</div>

input password readonly

Open on blank page
<div class="a-password-input">
  <input
    type="password"
    id="password-input-2"
    name="input password readonly"
    readonly=""
    value="Bosch0711"
  />
  <button
    type="button"
    class="a-password-input__icon-password"
    aria-label="Show password"
  >
    <i class="a-icon ui-ic-watch-on"></i>
  </button>
</div>

input password disabled

Open on blank page
<div class="a-password-input">
  <input
    type="password"
    id="password-input-3"
    name="input password disabled"
    disabled=""
    value="Bosch0711"
  />
  <button
    type="button"
    class="a-password-input__icon-password"
    disabled=""
    aria-label="Show password"
  >
    <i class="a-icon ui-ic-watch-on"></i>
  </button>
</div>

input password with label

Open on blank page
<div class="a-password-input">
  <label for="password-input-4">Password</label>
  <input
    type="password"
    id="password-input-4"
    name="input password with label"
    value="Bosch0711"
  />
  <button
    type="button"
    class="a-password-input__icon-password"
    aria-label="Show password"
  >
    <i class="a-icon ui-ic-watch-on"></i>
  </button>
</div>

input password with label readonly

Open on blank page
<div class="a-password-input">
  <label for="password-input-5">Password</label>
  <input
    type="password"
    id="password-input-5"
    name="input password with label readonly"
    readonly=""
    value="Bosch0711"
  />
  <button
    type="button"
    class="a-password-input__icon-password"
    aria-label="Show password"
  >
    <i class="a-icon ui-ic-watch-on"></i>
  </button>
</div>

input password with label disabled

Open on blank page
<div class="a-password-input">
  <label for="password-input-6">Password</label>
  <input
    type="password"
    id="password-input-6"
    name="input password with label disabled"
    disabled=""
    value="Bosch0711"
  />
  <button
    type="button"
    class="a-password-input__icon-password"
    disabled=""
    aria-label="Show password"
  >
    <i class="a-icon ui-ic-watch-on"></i>
  </button>
</div>

input password with very long label

Open on blank page
<div class="a-password-input">
  <label for="password-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="password"
    id="password-input-7"
    name="input password with very long label"
    value="Bosch0711"
  />
  <button
    type="button"
    class="a-password-input__icon-password"
    aria-label="Show password"
  >
    <i class="a-icon ui-ic-watch-on"></i>
  </button>
</div>

input password with very long label readonly

Open on blank page
<div class="a-password-input">
  <label for="password-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="password"
    id="password-input-8"
    name="input password with very long label readonly"
    readonly=""
    value="Bosch0711"
  />
  <button
    type="button"
    class="a-password-input__icon-password"
    aria-label="Show password"
  >
    <i class="a-icon ui-ic-watch-on"></i>
  </button>
</div>

input password with very long label disabled

Open on blank page
<div class="a-password-input">
  <label for="password-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="password"
    id="password-input-9"
    name="input password with very long label disabled"
    disabled=""
    value="Bosch0711"
  />
  <button
    type="button"
    class="a-password-input__icon-password"
    disabled=""
    aria-label="Show password"
  >
    <i class="a-icon ui-ic-watch-on"></i>
  </button>
</div>

input password with placeholder

Open on blank page
<div class="a-password-input">
  <input
    type="password"
    id="password-input-10"
    name="input password with placeholder"
    placeholder="e.g.: hint"
  />
  <button
    type="button"
    class="a-password-input__icon-password"
    aria-label="Show password"
  >
    <i class="a-icon ui-ic-watch-on"></i>
  </button>
</div>

input password with placeholder readonly

Open on blank page
<div class="a-password-input">
  <input
    type="password"
    id="password-input-11"
    name="input password with placeholder readonly"
    placeholder="e.g.: hint"
    readonly=""
  />
  <button
    type="button"
    class="a-password-input__icon-password"
    aria-label="Show password"
  >
    <i class="a-icon ui-ic-watch-on"></i>
  </button>
</div>

input password with placeholder disabled

Open on blank page
<div class="a-password-input">
  <input
    type="password"
    id="password-input-12"
    name="input password with placeholder disabled"
    placeholder="e.g.: hint"
    disabled=""
  />
  <button
    type="button"
    class="a-password-input__icon-password"
    disabled=""
    aria-label="Show password"
  >
    <i class="a-icon ui-ic-watch-on"></i>
  </button>
</div>

input password with placeholder and label

Open on blank page
<div class="a-password-input">
  <label for="password-input-13">Password</label>
  <input
    type="password"
    id="password-input-13"
    name="input password with placeholder and label"
    placeholder="e.g.: hint"
  />
  <button
    type="button"
    class="a-password-input__icon-password"
    aria-label="Show password"
  >
    <i class="a-icon ui-ic-watch-on"></i>
  </button>
</div>

input password with placeholder and label readonly

Open on blank page
<div class="a-password-input">
  <label for="password-input-14">Password</label>
  <input
    type="password"
    id="password-input-14"
    name="input password with placeholder and label readonly"
    placeholder="e.g.: hint"
    readonly=""
  />
  <button
    type="button"
    class="a-password-input__icon-password"
    aria-label="Show password"
  >
    <i class="a-icon ui-ic-watch-on"></i>
  </button>
</div>

input password with placeholder and label disabled

Open on blank page
<div class="a-password-input">
  <label for="password-input-15">Password</label>
  <input
    type="password"
    id="password-input-15"
    name="input password with placeholder and label disabled"
    placeholder="e.g.: hint"
    disabled=""
  />
  <button
    type="button"
    class="a-password-input__icon-password"
    disabled=""
    aria-label="Show password"
  >
    <i class="a-icon ui-ic-watch-on"></i>
  </button>
</div>

confirm password example

Open on blank page
Set a new Password
<style>
  .frontend-kit-example_password {
      display: flex;
      flex-direction: column;
      min-width: 18rem;
  }
  .frontend-kit-example_password > * {
      margin-bottom: 1rem;
  }
  .frontend-kit-example_password h5 {
      margin-top: 0;
  }
  .frontend-kit-example_password button {
      align-self: end;
      margin-bottom: 0;
      width: fit-content;
  }
</style>
<div class="frontend-kit-example_password">
  <div class="-size-l highlight">Set a new Password</div>
  <div class="a-password-input">
    <label for="password-input-160">Password</label>
    <input type="password" id="password-input-160" name="add-password" />
    <button
      type="button"
      class="a-password-input__icon-password"
      aria-label="Show password"
    >
      <i class="a-icon ui-ic-watch-on"></i>
    </button>
  </div>
  <div class="a-password-input">
    <label for="password-input-170">Confirm Password</label>
    <input type="password" id="password-input-170" name="confirm-password" />
    <button
      type="button"
      class="a-password-input__icon-password"
      aria-label="Show password"
    >
      <i class="a-icon ui-ic-watch-on"></i>
    </button>
  </div>
  <button type="button" class="a-button a-button--primary -without-icon">
    <span class="a-button__label">Update Password</span>
  </button>
</div>

additional content

styles SCSS

.a-password-input {
  @include text-field;
  display: flex;

  input {
    &::-ms-reveal,
    &::-ms-clear {
      display: none;
    }

    &[readonly] {
      ~ .a-password-input__icon-password {
        background-color: var(--plain__enabled__fill__default);
        color: var(--plain__enabled__front__default);

        &:hover {
          background-color: var(--plain__enabled__fill__hovered);
          color: var(--plain__enabled__front__hovered);
        }

        &:active {
          background-color: var(--plain__enabled__fill__pressed);
          color: var(--plain__enabled__front__pressed);
        }

        &:focus {
          color: var(--plain__focused__front__default);
        }
      }
    }
  }
}