> For the complete documentation index, see [llms.txt](https://apcom.gitbook.io/altrone-ui/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://apcom.gitbook.io/altrone-ui/components/forms/passwordinput.md).

# PasswordInput

PasswordInput is a wrapper over [TextInput](/altrone-ui/components/forms/textinput.md) with necessary properties to make it safe for entering secret information. 

## Useful features

PasswordInput provides special action as Right [TextInput Island](/altrone-ui/components/forms/textinput.md#text-input-islands). There is a special button which toggle visibility of the inputed text. 

To hide this special action you should set `showControls` prop to `false`. 

## Properties

| Property                                              | Type                                                | Description                                                                                      |
| ----------------------------------------------------- | --------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
| **`value`**<mark style="color:red;">**`*`**</mark>    | `string`                                            | Inputed value                                                                                    |
| **`onChange`**<mark style="color:red;">**`*`**</mark> | `(value: string) => void`                           | Callback is called when user changed the value in the text field                                 |
| **`placeholder`**                                     | `string`                                            | Placeholder of the input                                                                         |
| **`leftIsland`**                                      | [`InputIsland`](#inputisland)                       | Left TextInput Island                                                                            |
| **`rightIsland`**                                     | [`InputIsland`](#inputisland)                       | Right TextInput Island. Don't work when `showControls` is `true`                                 |
| **`prefix`**                                          | `string`                                            | Shortcut for `text` TextInput Island on the left side                                            |
| **`suffix`**                                          | `string`                                            | Shortcut for `text` TextInput Island on the right side. Don't work when `showControls` is `true` |
| **`leftIcon`**                                        | `JSX.Element`                                       | Shortcut for `icon` TextInput Island on the left side                                            |
| **`rightIcon`**                                       | `JSX.Element`                                       | Shortcut for `icon` TextInput Island on the left side. Don't work when `showControls` is `true`  |
| **`errorText`**                                       | `string`                                            | Error message for TextInput                                                                      |
| **`hintText`**                                        | `string`                                            | Hint message for TextInput                                                                       |
| **`size`**                                            | [`Size`](/altrone-ui/utils/enums/size.md)           | Size of the text input                                                                           |
| **`disabled`**                                        | `boolean`                                           | Marks input as disabled                                                                          |
| **`required`**                                        | `boolean`                                           | Marks input as required                                                                          |
| **`showControls`**                                    | `boolean`                                           | Shows special actions for PasswordInput instead of right island. Default value is `true`         |
| **`Component`**                                       | `JSX.Element`                                       | Custom html input element                                                                        |
| **`surface`**                                         | [`Surface`](/altrone-ui/utils/enums/surface.md)     | Surface of the input                                                                             |
| **`elevation`**                                       | [`Elevation`](/altrone-ui/utils/enums/elevation.md) | Shadows of the input                                                                             |
| **`classNames`**                                      | `{ control?: string }`                              | Custom CSS class                                                                                 |

## History

* **`Altrone 2.0`**:
  * added surface prop
  * added elevation prop
* **`Altrone 1.0`**: initial release