Components

Password input

scss:Readyfigma:Ready
Usage
Code
Accessibility

Import

Import the settings, the text-input, the password-input and the fields scss files.

@import 'settings-tools/all-settings';


@import 'components/_c.text-input';
@import 'components/_c.password-input';
@import 'components/_c.fields';

Usage

To implement the Password Input in your code, you must therefore use and respect the following HTML structure:

<div class="example">
  <div class="mc-field">
    <label class="mc-field__label" for="default">Label</label>


    <div class="mc-password-input mc-field__element">
      <input
        type="password"
        class="mc-text-input mc-password-input__control"
        id="default"
        name="default"
      />
      <button
        type="button"
        class="mc-password-input__button"
        role="switch"
        aria-pressed="false"
      >
        Show
      </button>
    </div>
  </div>
</div>
Viewport: px 
<div class="example">
  <div class="mc-password-input">
    <input
      type="password"
      class="mc-text-input mc-password-input__control"
      id="default"
      placeholder="Placeholder"
      name="default"
      value="Password1234"
    />
    <button
      type="button"
      class="mc-password-input__button"
      role="switch"
      aria-pressed="false"
    >
      Show
    </button>
  </div>
</div>


<script>
  // Make the checkbox indeterminate via JavaScript
  var button = document.querySelector('.mc-password-input__button')
  var input = document.querySelector('input')
  button.addEventListener('click', function () {
    var buttonState = button.getAttribute('aria-pressed')
    if (buttonState === 'false') {
      button.setAttribute('aria-pressed', 'true')
      button.innerText = 'Hide'
      input.type = 'text'
    } else {
      button.setAttribute('aria-pressed', 'false')
      button.innerText = 'Show'
      input.type = 'password'
    }
  })
</script>

States

The various states of the Password Input component are identical to the states implemented for the Field component.

For more information, please read the associated documentation for the MField component.

Behaviour

By default, the HTML <input /> tag in the Password Input component has an type="password" attribute. This attribute is used to hide the text entered by the user inside the field.

In order to make the text entered in the field visible, the type="password" attribute must be replaced by the type="text" attribute dynamically using Javascript.