React Components

# Password

## Overview

---

## Anatomy

---

Password

---

## Password

---

| Property | Type | Required | Default value | Description |
| --- | --- | --- | --- | --- |
| This component extends all the native [input attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#attributes) . |
| 
clearable

 | `boolean` | - | `undefined` | Whether the clear button is displayed. |
| 

i18n

 | `Partial` | - | `undefined` | Internal translations override (see Input i18n keys). |
| 

invalid

 | `boolean` | - | `undefined` | Whether the component is in error state. |
| 

loading

 | `boolean` | - | `undefined` | Whether the component is in loading state. |
| 

locale

 | `LOCALE` | - | `undefined` | The locale used for the translation of the internal elements. |
| 

maskInitialState

 | `INPUT_MASK_STATE` | - | `undefined` | The masked display initial state. |
| 

onClear

 | `() => void` | - | `undefined` | Callback fired when the input value is cleared. |

## Examples

---

### Default

```jsx
{
  globals: {
    imports: `import { Password } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <Password />
}
```

### Disabled

```jsx
{
  globals: {
    imports: `import { Password } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <Password disabled />
}
```

### Readonly

```jsx
{
  globals: {
    imports: `import { Password } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <Password defaultValue="Readonly" readOnly />
}
```

### Clearable

```jsx
{
  globals: {
    imports: `import { Password } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <Password clearable defaultValue="Clearable" />
}
```

### Loading

```jsx
{
  globals: {
    imports: `import { Password } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <Password loading />
}
```

### Form field

```jsx
{
  globals: {
    imports: `import { FormField, FormFieldLabel, Password } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <FormField>
      <FormFieldLabel>
        Password:      </FormFieldLabel>
      <Password />
    </FormField>
}
```

## Recipes

---

No recipe defined for now.