Password input
A password input is a form field specifically designed to securely capture a user’s confidential password.
On this page
- Password input v1.2.0
You can find here the OUDS Text Input design guidelines.
Overview
The password input masks the characters as they are typed, typically replacing them with dots, in order to protect the input from being read by others nearby. While the primary goal is to enhance privacy and security, the field may also include usability features such as a "show/hide password" toggle and helper text to guide password creation.
A password input is a specific configuration of the text input. It uses a .text-input wrapper to create a textual form field with OUDS styles, then wraps a pair of <input class="text-input-field"> and <label> elements in .text-input-container. Note that the <label> must come before the <input>.
A placeholder attribute is required on each <input> as our CSS-only floating label implementation relies on the :placeholder-shown pseudo-element to detect when the input is empty.
If the placeholder text is empty, it is not visible: only the <label> is shown to users.
All other available features of the text input component can be used with the password input, such as leading icons, helper text, and validation states. Please refer to the text input documentation for more details.
Enter a password with at least 8 characters
Enter a password with at least 8 characters
Enter a password with at least 8 characters
Enter a password with at least 8 characters
Password must be at least 8 characters
Enter a password with at least 8 characters
Password must be at least 8 characters
<div class="text-input mb-medium">
<div class="text-input-container">
<label for="inputPassword">Password</label>
<input type="password" id="inputPassword" aria-describedby="prefixSuffixIconTextHelpBlock" class="text-input-field" placeholder="">
<button class="btn btn-minimal btn-icon">
<svg aria-hidden="true">
<use xlink:href="/orange/docs/0.6/assets/img/ouds-web-sprite.svg#accessibility-vision"/>
</svg>
<span class="visually-hidden">Show password</span>
</button>
</div>
</div>
<div class="text-input mb-medium">
<div class="text-input-container">
<svg aria-hidden="true">
<use xlink:href="/orange/docs/0.6/assets/img/ouds-web-sprite.svg#lock-closed"/>
</svg>
<label for="inputPasswordIcon">Password</label>
<input type="password" id="inputPasswordIcon" aria-describedby="prefixSuffixIconTextHelpBlock" class="text-input-field" placeholder="Minimum 8 characters">
<button class="btn btn-minimal btn-icon">
<svg aria-hidden="true">
<use xlink:href="/orange/docs/0.6/assets/img/ouds-web-sprite.svg#accessibility-vision"/>
</svg>
<span class="visually-hidden">Show password</span>
</button>
</div>
</div>
<div class="text-input mb-medium">
<div class="text-input-container">
<svg aria-hidden="true">
<use xlink:href="/orange/docs/0.6/assets/img/ouds-web-sprite.svg#lock-closed"/>
</svg>
<label for="inputPasswordPrefix">Password</label>
<div class="input-container" data-bs-prefix="DEV-">
<input type="password" id="inputPasswordPrefix" aria-describedby="prefixSuffixIconTextHelpBlock" class="text-input-field" placeholder="">
</div>
<button class="btn btn-minimal btn-icon">
<svg aria-hidden="true">
<use xlink:href="/orange/docs/0.6/assets/img/ouds-web-sprite.svg#accessibility-vision"/>
</svg>
<span class="visually-hidden">Show password</span>
</button>
</div>
<p class="helper-text">Enter a password with at least 8 characters</p>
</div>
<div class="text-input mb-medium">
<div class="text-input-container text-input-container-outlined">
<svg aria-hidden="true">
<use xlink:href="/orange/docs/0.6/assets/img/ouds-web-sprite.svg#lock-closed"/>
</svg>
<label for="inputPasswordOutlined">Password</label>
<input type="password" id="inputPasswordOutlined" aria-describedby="prefixSuffixIconTextHelpBlock" class="text-input-field" placeholder="">
<button class="btn btn-minimal btn-icon">
<svg aria-hidden="true">
<use xlink:href="/orange/docs/0.6/assets/img/ouds-web-sprite.svg#accessibility-vision"/>
</svg>
<span class="visually-hidden">Show password</span>
</button>
</div>
<p class="helper-text">Enter a password with at least 8 characters</p>
</div>
<div class="text-input mb-medium">
<div class="text-input-container text-input-container-outlined">
<svg aria-hidden="true">
<use xlink:href="/orange/docs/0.6/assets/img/ouds-web-sprite.svg#lock-closed"/>
</svg>
<label for="inputPasswordOutlinedValue">Password</label>
<input type="password" id="inputPasswordOutlinedValue" aria-describedby="prefixSuffixIconTextHelpBlock" class="text-input-field" placeholder="" value="My$ecureP@ssw0rd">
<button class="btn btn-minimal btn-icon">
<svg aria-hidden="true">
<use xlink:href="/orange/docs/0.6/assets/img/ouds-web-sprite.svg#accessibility-vision"/>
</svg>
<span class="visually-hidden">Show password</span>
</button>
</div>
<p class="helper-text">Enter a password with at least 8 characters</p>
</div>
<div class="text-input mb-medium">
<div class="text-input-container">
<label for="inputPasswordInvalid">Password</label>
<div class="input-container" data-bs-prefix="DEV-">
<input type="password" id="inputPasswordInvalid" class="text-input-field is-invalid" aria-describedby="prefixSuffixIconTextHelpBlock" placeholder="" value="12345">
</div>
<button class="btn btn-minimal btn-icon">
<svg aria-hidden="true">
<use xlink:href="/orange/docs/0.6/assets/img/ouds-web-sprite.svg#accessibility-vision"/>
</svg>
<span class="visually-hidden">Show password</span>
</button>
</div>
<p class="helper-text">Enter a password with at least 8 characters</p>
<p class="error-text">Password must be at least 8 characters</p>
</div>
<div class="text-input">
<div class="text-input-container text-input-container-outlined">
<svg aria-hidden="true">
<use xlink:href="/orange/docs/0.6/assets/img/ouds-web-sprite.svg#lock-closed"/>
</svg>
<label for="inputPasswordOutlinedInvalid">Password</label>
<div class="input-container" data-bs-prefix="DEV-">
<input type="password" id="inputPasswordOutlinedInvalid" class="text-input-field is-invalid" aria-describedby="prefixSuffixIconTextHelpBlock" placeholder="" value="12345">
</div>
<button class="btn btn-minimal btn-icon">
<svg aria-hidden="true">
<use xlink:href="/orange/docs/0.6/assets/img/ouds-web-sprite.svg#accessibility-vision"/>
</svg>
<span class="visually-hidden">Show password</span>
</button>
</div>
<p class="helper-text">Enter a password with at least 8 characters</p>
<p class="error-text">Password must be at least 8 characters</p>
</div>