@mozaic-ds/vue/src/components/pincode/README.md

Mozaic-Vue is the Vue.js implementation of ADEO Design system

# MPincode

A pincode input is a specialized input field used to enter short numeric codes, such as verification codes, security PINs, or authentication tokens. It typically separates each digit into individual fields to improve readability and ease of entry. This component is commonly used in two-factor authentication (2FA), password recovery, and secure access flows, ensuring a structured and user-friendly experience.<br><br> To put a label, requierement text, help text or to apply a valid or invalid message, the examples are available in the [Field section](/docs/form-elements-field--docs#input).


## Props

| Name | Description | Type | Default |
| --- | --- | --- | --- | 
| `id*` | A unique identifier for the pincode element, used to associate the label with the form element. | `string` | - |
| `length` | The number of input displayed in the pincode element. | `4` `5` `6` | `6` |
| `name` | The name attribute for the pincode element, typically used for form submission. | `string` | - |
| `modelValue` | The current value of the pincode field. | `string` `number` | - |
| `isInvalid` | If `true`, applies an invalid state to the pincode. | `boolean` | - |
| `disabled` | If `true`, disables the pincode, making it non-interactive. | `boolean` | - |
| `readonly` | If `true`, the pincode is read-only (cannot be edited). | `boolean` | - |

## Events

| Name | Description | Type |
| --- | --- | --- |
| `update:modelValue` | Emits when the pincode value changes, updating the modelValue prop. | [value: string] |