React Components

# Password

_**Password** component is an  field for entering a password that can be hidden or not._

## Overview

---

The **Password** component is an Input field of which the content is replaced with middle dot symbol symbols "·" by default and the masking can be toggled using a show/hide action.

<table class="_table_e3iru_2 _table--md_e3iru_59 _table--striped_e3iru_167 _identity-card__table_75e8e_7" data-ods="table" data-storybook="table"><tbody><tr><th scope="row">Name</th><td>Password</td></tr><tr><th scope="row">Also known as</th><td>Password field, Password input</td></tr><tr><th scope="row">Links</th><td><a class="_link_1qra4_2 _identity-card__app-link_75e8e_12" data-ods="link" href="https://www.figma.com/design/9jDDTcR4a9jPRFcdjawAlf/ODS---UI-Kit?node-id=48-4526" target="_blank">Design <span class="_icon_g76et_2 _icon--external-link_g76et_256" data-ods="icon" role="presentation"></span></a><a class="_link_1qra4_2 _identity-card__app-link_75e8e_12" data-ods="link" href="https://github.com/ovh/design-system/tree/master/packages/ods-react/src/components/password" target="_blank">Github <span class="_icon_g76et_2 _icon--external-link_g76et_256" data-ods="icon" role="presentation"></span></a><a class="_link_1qra4_2 _identity-card__app-link_75e8e_12" data-ods="link" href="https://ovh.github.io/design-system/v18.6.4/?path=/docs/ods-components-form-elements-password--documentation" target="_blank">Previous major version <span class="_icon_g76et_2 _icon--external-link_g76et_256" data-ods="icon" role="presentation"></span></a><a class="_link_1qra4_2" data-ods="link" href="#">Form Guidelines</a></td></tr></tbody></table>

## Usage

---

A **Password** is mainly used to let users enter a password or secret information.

Entered password can be masked or visible as plain text when users need to check what they have entered.

It can also be used for displaying tokens.

### Dos & Don'ts

| ✅ Do |
| --- |
| - Use the Password component for sensitive inputs, such as login credentials, tokens, or API keys |
| - Use the read-only mode for displaying generated tokens or credentials that users may need to copy, without editing |
| - Pair Password fields with clear labels and helper texts for expected format or complexity requirements |

| ❌ Don't |
| --- |
| - Don't use the Password component when users need to see what they're typing by default, use a standard Input instead |
| - Don't hide the label. Users should always know what the Password field is for |
| - Don't use Passwords for non-sensitive or public information; this could cause unnecessary friction |
| - Don't rely only on placeholders to communicate password requirements |
| - Don't remove the toggle visibility option unless there is a strong security or UX reason to do so |

### Best Practices in Context

1.  **Password**
2.  **Placeholder or input text**
3.  **Show/Hide button**
4.  **Clearable button** - optional

## Placement

---

**Password** should be vertically aligned with other form components on a same page.

## Behavior

---

**Password** can be used in read-only mode, especially for displaying sensitive tokens.

Users can toggle the password masking (show/hide) by clicking an action button. The selected visibility state remains until the user clicks again.

**Password** supports a clear action to quickly reset its content.

A loading state can be displayed inside the field when needed, for example during validation or processing.

## Navigation

---

### Focus Management

When tabbing through the page, the Password field receives focus as part of the natural tab order.

If present, the clear button is focusable immediately after the Password field.

If present, the toggle mask button (show/hide password) is focusable after the clear button.

If the Password field is read-only, it can still receive focus but cannot be edited.

### General Keyboard Shortcuts

Pressing Tab moves focus forward.

Pressing Shift + Tab moves focus backward to the previous interactive element.

Pressing any character key while the Password field is focused enters text into the field (unless it is read-only).

Pressing Backspace deletes the last character before the cursor position.

Pressing Enter while the clear button is focused clears the Password content.

Pressing Enter while the toggle mask button is focused toggles between showing and hiding the field content.

## Accessibility

---

To ensure proper accessibility, the **Password** component must be correctly labeled and provide meaningful context when interactive elements (such as icon buttons) are used.

### Always provide an explicit label

Every **Password** must have a clear and explicit label to ensure that users (especially screen reader users) understand its purpose, using either **FormField** or a native label tag.

Password:

```jsx
<FormField>
  <FormFieldLabel>
    Password:  </FormFieldLabel>
  <Password />
</FormField>
```

Screen readers will announce the label, the field and its content.

### Override action context

To provide more context on the interactive elements, you can provide your own custom translations to the component.

Password:

```jsx
<FormField>
  <FormFieldLabel>
    Password:  </FormFieldLabel>
  <Password i18n={{
  [INPUT_I18N.maskButtonHide]: 'Hide the password',
  [INPUT_I18N.maskButtonShow]: 'Show the password'
}} />
</FormField>
```

Screen readers will announce the label, the field, its content and custom label of focused action.