Password

Import: @bnotk/dsx/css/password.css

Live Preview

Classes

Class	Description
`.dsx-password`	Base password field wrapper
`.dsx-password__input`	Password input element
`.dsx-password__toggle`	Visibility toggle button
`.dsx-password__clear`	Clear value button
`.dsx-password--with-clear`	Shows the clear action and adds extra input padding
`.dsx-password--validated`	Reserves space for validation feedback
`.dsx-password--error`	Error validation state
`.dsx-password--warning`	Warning validation state
`.dsx-password--success`	Success validation state

Examples

<div class="dsx-password dsx-password--warning dsx-password--validated dsx-password--with-clear">
  <input class="dsx-input dsx-password__input" type="password" value="Needs one more symbol">
  <button class="dsx-password__toggle" type="button" aria-label="Show password" aria-pressed="false">
    <svg viewBox="0 0 24 24" aria-hidden="true"></svg>
  </button>
  <button class="dsx-password__clear" type="button" aria-label="Clear password">
    <svg viewBox="0 0 24 24" aria-hidden="true"></svg>
  </button>
</div>