> For the complete documentation index, see [llms.txt](https://docs.navigaglobal.com/writer/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.navigaglobal.com/writer/api-reference/uicomponents/uiinputpassword.md).

# UIInputPassword

Create a search input base on style guide

**Since**: 7.2.0

| Name           | Type       | Default             | Description                                                   |
| -------------- | ---------- | ------------------- | ------------------------------------------------------------- |
| id             | `string`   |                     | **Required** - Id of the input                                |
| value          | `string`   |                     | **Required** - Value for input                                |
| label          | `string`   |                     | The text label                                                |
| secondaryLabel | `string`   |                     | The secondary text label displayed in top right corner        |
| placeholder    | `string`   |                     | Placeholder                                                   |
| size           | `string`   |                     | Size of the input                                             |
| variant        | `string`   |                     | Variant for the input                                         |
| icon           | `string`   |                     | To get input with leadin icon                                 |
| disabled       | `boolean`  | `false`             | Whether the input is disabled or not                          |
| autocomplete   | `string`   | `""off""` | Sets autocomplete attribute on input field, defaults to "off" |
| onChange       | `function` |                     | **Required** - Callback for when the input value changes      |

### Example

```js
import {UIInputPassword} from 'writer'

render($$) {
    const el = $$('div')
    return el.append(
        $$(UIInputPassword, {
            id: 'myPasswordInput',
            label: this.getLabel('Password'),
            placehodlder: 'My placeholder',
            size: 'large',
            value: '',
            onChange: (value) => {
                // Do something
            }
        })
    )
}
```