Password Input v0.20.0+

The Password Input component provides markup to define an input control when a user must enter or update the password.

Basic Password Input

Label Annotation
Control Options

(Invalid styling applied after user interaction.)

Optional Text
Please enter a valid password

<hx-password-control>
  <input
    id="pwdDemo"
    type="password"
  />
  <label
    for="pwdDemo">
  Password
  </label>
  <p class="hxHelpText" hidden>
    At least 8 characters with 1 uppercase, 1 lowercase, and 1 number.
  </p>
  <p class="hxErrorText" hidden>
    <hx-error>
        Please enter a valid password
    </hx-error>
  </p>
</hx-password-control>

The <input> element must have the type="password" attribute, in order for CSS styles to apply.

See Also