<!-- AUTO-GENERATED from the @riverty/web-components custom elements manifest. Do not edit by hand. -->

# r-input-password

A password input field with a built-in visibility toggle, validation.

Example
```
<r-input-password name="password" label="Password" placeholder="Enter your password" required></r-input-password>
```

## class: `RInputPassword`, `r-input-password`

### Fields

| Name                     | Privacy | Type                                            | Default                      | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Inherited From |
| ------------------------ | ------- | ----------------------------------------------- | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------- |
| `autocomplete`           |         | `"current-password" \| "new-password" \| "off"` |                              | Password-specific autocomplete behavior for browser password managers.                                                                                                                                                                                                                                                                                                                                                                                                   |                |
| `customErrorMessage`     |         | `string`                                        |                              | Custom error message displayed for any validation failures in the input.                                                                                                                                                                                                                                                                                                                                                                                                 |                |
| `disabled`               |         | `boolean`                                       |                              | Prevents user interaction and applies disabled style                                                                                                                                                                                                                                                                                                                                                                                                                     |                |
| `error`                  |         | `string`                                        |                              | The way to provide error message separately from Constraint Validation API.                                                                                                                                                                                                                                                                                                                                                                                              |                |
| `fieldIndicator`         |         | `string`                                        |                              | Text of an additional marker in the label                                                                                                                                                                                                                                                                                                                                                                                                                                |                |
| `form`                   |         | `string`                                        |                              | Specifies the `id` of the `<form>` to which the element belongs                                                                                                                                                                                                                                                                                                                                                                                                          |                |
| `fullWidth`              |         | `boolean`                                       |                              | Defines if the component suppose to occupy 100% width                                                                                                                                                                                                                                                                                                                                                                                                                    |                |
| `hiddenPasswordMessage`  |         | `string`                                        | `"Your password is hidden."` | Custom message when the password is hidden to alert screen reader users.                                                                                                                                                                                                                                                                                                                                                                                                 |                |
| `hidePasswordAriaLabel`  |         | `string`                                        | `'Hide password.'`           | Defines label for characters hide button.                                                                                                                                                                                                                                                                                                                                                                                                                                |                |
| `hint`                   |         | `string`                                        |                              | Optional hint, visually presented under the input,<br>giving additional context to the user                                                                                                                                                                                                                                                                                                                                                                             |                |
| `invalid`                |         | `boolean`                                       |                              | Validity indicator, serving to change UI of the component                                                                                                                                                                                                                                                                                                                                                                                                                |                |
| `label`                  |         | `string`                                        |                              | The text on the label                                                                                                                                                                                                                                                                                                                                                                                                                                                    |                |
| `maxlength`              |         | `number`                                        |                              | Maximum character length (enforced by native input).                                                                                                                                                                                                                                                                                                                                                                                                                     |                |
| `minlength`              |         | `number`                                        |                              | Minimum character length (validation only).                                                                                                                                                                                                                                                                                                                                                                                                                              |                |
| `name`                   |         | `string`                                        |                              | Specifies a name for a input                                                                                                                                                                                                                                                                                                                                                                                                                                             |                |
| `novalidate`             |         | `boolean`                                       |                              | Specifies if element must be ignored during validation of the form elements                                                                                                                                                                                                                                                                                                                                                                                              |                |
| `passwordrules`          |         | `string`                                        |                              | Safari-specific password rules for strong password generation.<br>Format: "minlength: X; required: lower; required: upper; required: digit; required: special;"<br>Example: "minlength: 8; required: lower; required: upper; required: digit; required: special;"<br>Note: This attribute is Safari-specific and will be ignored by other browsers.<br>See: https://developer.apple.com/documentation/security/password_autofill/customizing_password_autofill_rules |                |
| `pattern`                |         | `string`                                        |                              | Regex pattern the value must match (string form).                                                                                                                                                                                                                                                                                                                                                                                                                        |                |
| `patternMismatchMessage` |         | `string`                                        |                              | Custom message for `patternMismatch`.                                                                                                                                                                                                                                                                                                                                                                                                                                    |                |
| `placeholder`            |         | `string`                                        |                              | Specifies a short hint that describes the expected value of a input                                                                                                                                                                                                                                                                                                                                                                                                      |                |
| `readonly`               |         | `boolean`                                       |                              | Makes the input read-only: users can focus and copy the value,<br>but cannot modify it (value still submitted with the form unlike disabled).                                                                                                                                                                                                                                                                                                                           |                |
| `required`               |         | `boolean`                                       |                              | Specifies that an input is required/must be filled out                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
| `showPasswordAriaLabel`  |         | `string`                                        | `'Show password.'`           | Defines label for characters show button.                                                                                                                                                                                                                                                                                                                                                                                                                                |                |
| `shownPasswordMessage`   |         | `string`                                        | `"Your password is shown."`  | Custom message when the password is shown to alert screen reader users.                                                                                                                                                                                                                                                                                                                                                                                                  |                |
| `submitOnEnter`          |         | `boolean`                                       | `true`                       | Controls whether pressing Enter triggers implicit form submission when this input is inside a form.<br>Set to `false` for custom Enter behavior without submitting the form.                                                                                                                                                                                                                                                                                            |                |
| `tooLongMessage`         |         | `string`                                        |                              | Custom message for `tooLong`.                                                                                                                                                                                                                                                                                                                                                                                                                                            |                |
| `tooShortMessage`        |         | `string`                                        |                              | Custom message for `tooShort`.                                                                                                                                                                                                                                                                                                                                                                                                                                           |                |
| `valid`                  |         | `boolean`                                       |                              | Visual indication of valid state                                                                                                                                                                                                                                                                                                                                                                                                                                         |                |
| `value`                  |         | `string`                                        | `''`                         | The value of the password input                                                                                                                                                                                                                                                                                                                                                                                                                                          |                |
| `valueMissingMessage`    |         | `string`                                        |                              | Set custom message for `valueMissing` property of a ValidityState object (set by `required`) within Constrain Validation API                                                                                                                                                                                                                                                                                                                                             |                |

### Methods

| Name                | Privacy | Description                                                                                       | Parameters        | Return             | Inherited From |
| ------------------- | ------- | ------------------------------------------------------------------------------------------------- | ----------------- | ------------------ | -------------- |
| `checkValidity`     |         | Validates the input password without triggering UI and returns a boolean indicating its validity. |                   | `Promise<boolean>` |                |
| `getValue`          |         | Get the input value                                                                               |                   | `Promise<string>`  |                |
| `hidePassword`      |         | Hide password text.                                                                               |                   | `Promise<void>`    |                |
| `setCustomValidity` |         | Validates an element, displays provided message in case value is invalid.                         | `message: string` | `Promise<void>`    |                |
| `setValue`          |         | Set the input value                                                                               | `value: string`   | `Promise<void>`    |                |
| `showPassword`      |         | Show password text.                                                                               |                   | `Promise<void>`    |                |
| `toggleShow`        |         | Toggle password text visibility.                                                                  |                   | `Promise<void>`    |                |

### Events

| Name                | Type                                                                     | Description                                                         | Inherited From |
| ------------------- | ------------------------------------------------------------------------ | ------------------------------------------------------------------- | -------------- |
| `rChange`           | `CustomEvent<{ element: HTMLRInputPasswordElement; value: any; }>`       | Emits 'rChange' event when value of the component has been changed  |                |
| `rInput`            | `CustomEvent<{ element: HTMLRInputPasswordElement; value: any; }>`       | Emits 'rInput' event when value of the component is changing        |                |
| `rReset`            | `CustomEvent<{ element: HTMLRInputPasswordElement; value: any; }>`       | Emits 'rReset' event when form containing the component was reset   |                |
| `rValidate`         | `CustomEvent<{ state: string; message: string; }>`                       | Emits event after each validation                                   |                |
| `rVisibilityChange` | `CustomEvent<{ element: HTMLRInputPasswordElement; visible: boolean; }>` | Emits 'rVisibilityChange' event when password visibility is toggled |                |

### Attributes

| Name                       | Field                  | Inherited From |
| -------------------------- | ---------------------- | -------------- |
| `autocomplete`             | autocomplete           |                |
| `custom-error-message`     | customErrorMessage     |                |
| `disabled`                 | disabled               |                |
| `error`                    | error                  |                |
| `field-indicator`          | fieldIndicator         |                |
| `form`                     | form                   |                |
| `full-width`               | fullWidth              |                |
| `hidden-password-message`  | hiddenPasswordMessage  |                |
| `hide-password-aria-label` | hidePasswordAriaLabel  |                |
| `hint`                     | hint                   |                |
| `invalid`                  | invalid                |                |
| `label`                    | label                  |                |
| `maxlength`                | maxlength              |                |
| `minlength`                | minlength              |                |
| `name`                     | name                   |                |
| `novalidate`               | novalidate             |                |
| `passwordrules`            | passwordrules          |                |
| `pattern`                  | pattern                |                |
| `pattern-mismatch-message` | patternMismatchMessage |                |
| `placeholder`              | placeholder            |                |
| `readonly`                 | readonly               |                |
| `required`                 | required               |                |
| `show-password-aria-label` | showPasswordAriaLabel  |                |
| `shown-password-message`   | shownPasswordMessage   |                |
| `submit-on-enter`          | submitOnEnter          |                |
| `too-long-message`         | tooLongMessage         |                |
| `too-short-message`        | tooShortMessage        |                |
| `valid`                    | valid                  |                |
| `value`                    | value                  |                |
| `value-missing-message`    | valueMissingMessage    |                |

### Slots

| Name      | Description                                |
| --------- | ------------------------------------------ |
| `popover` | Popover element attached to the label area |

<hr/>

## Exports

| Kind                        | Name               | Declaration    | Module | Package |
| --------------------------- | ------------------ | -------------- | ------ | ------- |
| `js`                        | `RInputPassword`   | RInputPassword |        |         |
| `custom-element-definition` | `r-input-password` | RInputPassword |        |         |