@mozaic-ds/vue
Version:
Mozaic-Vue is the Vue.js implementation of ADEO Design system
26 lines (19 loc) • 1.75 kB
Markdown
# MPasswordInput
A password input is a specialized input field used to securely enter and manage passwords. It typically masks the characters entered to protect sensitive information from being seen. It includes a toggle button to show or hide the password, improving usability while maintaining security. Password inputs are commonly used in login forms, account creation, and authentication flows.
## Props
| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `id*` | A unique identifier for the password input element, used to associate the label with the form element. | `string` | - |
| `name` | The name attribute for the password input element, typically used for form submission. | `string` | - |
| `modelValue` | The current value of the password input field. | `string` `number` | - |
| `placeholder` | A placeholder text to show in the password input when it is empty. | `string` | - |
| `isInvalid` | If `true`, applies an invalid state to the password input. | `boolean` | - |
| `disabled` | If `true`, disables the password input, making it non-interactive. | `boolean` | - |
| `readonly` | If `true`, the password input is read-only (cannot be edited). | `boolean` | - |
| `isClearable` | If `true`, a clear button will appear when the password input has a value. | `boolean` | - |
| `clearLabel` | The label text for the clear button. | `string` | `"Clear content"` |
| `buttonLabel` | Labels of the button displayed when showing or hiding the password. | `{ show: string; hide: string; }` | `{ show: "Show", hide: "Hide" }` |
## Events
| Name | Description | Type |
| --- | --- | --- |
| `update:modelValue` | Emits when the input value changes, updating the `modelValue` prop. | [value: string | number] |