Skip to content

password-input.mdx

Latest commit

 

History

History
156 lines (147 loc) · 8.29 KB

password-input.mdx

File metadata and controls

156 lines (147 loc) · 8.29 KB
title Password input
description A password input is a form field specifically designed to securely capture a user’s confidential password.
aliases
/docs/forms/password-input/
/docs/components/password-input/
toc true

import { getVersionedDocsPath } from '@libs/path'

You can find here the OUDS [password input design guidelines](https://r.orange.fr/r/S-ouds-doc-password-input).

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.

Even if you don't need a placeholder, you must always define the placeholder attribute with a single space character. This ensures the label behaves correctly by preventing it from overlapping the input text when a value is entered. 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]([[docsref:/components/text-input]]) for more details.

<Example buttonLabel="all variations of password input" code={`

Password Show password

Password Show password
Password
Show password

Enter a password with at least 8 characters (without the DEV- prefix).

Password Show password

Enter a password with at least 8 characters

Password Show password

Enter a password with at least 8 characters

Password
Show password

Enter a password with at least 8 characters (without the DEV- prefix).

Password must be at least 8 characters (without the DEV- prefix).

Password
Show password

Enter a password with at least 8 characters (without the DEV- prefix).

Password must be at least 8 characters (without the DEV- prefix).

Password Show password
`} />