Password input - CSS Component

...

Browser support

Detected engine:  

• Chromium

• Webkit

• Gecko

Construction

Common API

For the basics, check the common specifications.

The CSS component uses the <label> tag.

z-password-input

The z-password-input is the main parameter used to render the password input component.

Password inputPassword input

Playground

Customization

HTML Examples

Imports

<script type="module" src="/0.4.4/@zurich/css-components/javascript.js"></script>
<link rel="stylesheet" href="/0.4.4/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.4.4/@zurich/css-components/PasswordInput.css" />

Code

<!-- Default -->
  <label z-password-input>
    <span>Password input</span>
    <input type="password" />
  </label>
  <label z-password-input="shaped">
    <span>Password input</span>
    <input type="password" />
  </label>

<!-- With value -->
  <label z-password-input>
    <span>Password input</span>
    <input type="password" value="password" />
  </label>
  <label z-password-input="shaped">
    <span>Password input</span>
    <input type="password" value="password" />
  </label>

<!-- Disabled -->
  <label z-password-input>
    <span>Password input</span>
    <input type="password" disabled />
  </label>
  <label z-password-input="shaped">
    <span>Password input</span>
    <input type="password" disabled />
  </label>

<!-- Readonly -->
  <label z-password-input>
    <span>Password input</span>
    <input type="password" readonly value="password" />
  </label>
  <label z-password-input="shaped">
    <span>Password input</span>
    <input type="password" readonly value="password" />
  </label>

<!-- With help text -->
  <label z-password-input>
    <span>Password input</span>
    <small>Help text</small>
    <input type="password" />
  </label>
  <label z-password-input="shaped">
    <span>Password input</span>
    <small>Help text</small>
    <input type="password" />
  </label>

<!-- Invalid -->
  <label z-password-input>
    <span>Password input</span>
    <small>Invalid input</small>
    <input type="password" data-invalid />
  </label>
  <label z-password-input="shaped">
    <span>Password input</span>
    <small>Invalid input</small>
    <input type="password" data-invalid />
  </label>