# r-input-code A segmented digit input for entering short numeric or alphanumeric codes such as OTP or verification codes. Example: ``` ``` ## class: `RInputCode`, `r-input-code` ### Fields | Name | Privacy | Type | Default | Description | Inherited From | | --------------------- | ------- | ------------------------------------------------------------------------------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | | `ariaCharacterLabel` | | `string` | | Defines label for each character's input.
Default "Character: ${character number}" | | | `autocomplete` | | `string` | `'one-time-code'` | Specifies the autocomplete behavior. Default is 'one-time-code' for SMS OTP autofill. | | | `customErrorMessage` | | `string` | | Set custom message for `customError` property of a ValidityState object indicating whether the element's custom validity message has been set to a non-empty string by calling the element's setCustomValidity() method. | | | `disabled` | | `boolean` | | Whether the input is disabled | | | `enterkeyhint` | | `"done" \| "enter" \| "go" \| "next" \| "previous" \| "search" \| "send"` | `'done'` | Specifies the enter key hint for the virtual keyboard. Default is 'done' for OTP completion. | | | `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 `

` to which the element belongs. | | | `fullWidth` | | `boolean` | | Defines if the component suppose to occupy 100% width | | | `hint` | | `string` | | Description for accessibility | | | `inputmode` | | `"decimal" \| "email" \| "none" \| "numeric" \| "search" \| "tel" \| "text" \| "url"` | `'numeric'` | Specifies the input mode for the virtual keyboard on mobile devices. Default is 'numeric' for OTP codes. | | | `invalid` | | `boolean` | | Validity indicator, serving to change UI of the component | | | `label` | | `string` | `'Verification code'` | Label for accessibility. | | | `length` | | `number` | `4` | Number of digits (typically 4–6). | | | `marker` | | `"auto" \| "invalid" \| "none" \| "valid"` | `'auto'` | Controls the validation marker strategy.
\`auto` (default) shows the valid/invalid marker dynamically based on state and value.
\`valid` always shows the valid marker, `invalid` always shows the invalid marker,
\`none` hides the validation marker entirely. | | | `name` | | `string` | `'input-code'` | Specifies a name for an input for submission within formData object. | | | `novalidate` | | `boolean` | | Specifies if element must be ignored during validation of the form elements. | | | `readonly` | | `boolean` | | Read-only mode (mirrors native `readonly`): value cannot be changed by the user,
but the field can still receive focus, be selected, and be submitted with a form. | | | `required` | | `boolean` | | Whether the input is required | | | `submitOnEnter` | | `boolean` | `true` | Controls whether pressing Enter triggers implicit form submission when this input is inside a form.
Set to `false` for custom Enter behavior without submitting the form. | | | `tooShortMessage` | | `string` | | Set custom message for `tooShort` property of a ValidityState object (set by `minlength`) within Constrain Validation API | | | `valid` | | `boolean` | | Visual indication of valid state | | | `value` | | `string` | `''` | Defines initial value | | | `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 code without triggering UI and returns a boolean indicating its validity. | | `Promise` | | | `focusSegment` | | Focuses a specific segment (input) by index. | `index: number` | `Promise` | | | `getSegmentValue` | | Gets the value of a specific segment by index. | `index: number` | `Promise` | | | `getValue` | | Gets the current complete code value by joining all individual digit values. | | `Promise` | | | `reset` | | Resets the component by clearing all input values and focusing the first input. | | `Promise` | | | `setCustomValidity` | | Validates an element, displays provided message in case value is invalid. | `message: string` | `Promise` | | | `setSegmentValue` | | Sets the value of a specific segment by index. | `index: number, value: string` | `Promise` | | | `setValue` | | Sets provided value. | `value: string` | `Promise` | | ### Events | Name | Type | Description | Inherited From | | ----------- | -------------------------------------------------------------- | ----------------------------------------------------------------- | -------------- | | `rChange` | `CustomEvent<{ value: string; }>` | Emits the current code value as it changes | | | `rComplete` | `CustomEvent<{ value: string; isComplete: boolean; }>` | Emits when all segments are filled with values | | | `rReset` | `CustomEvent<{ element: HTMLRInputCodeElement; value: any; }>` | Emits 'rReset' event when form containing the component was reset | | | `rValidate` | `CustomEvent<{ state: string; message: string; }>` | Emits event after each validation | | ### Attributes | Name | Field | Inherited From | | ----------------------- | ------------------- | -------------- | | `aria-character-label` | ariaCharacterLabel | | | `autocomplete` | autocomplete | | | `custom-error-message` | customErrorMessage | | | `disabled` | disabled | | | `enterkeyhint` | enterkeyhint | | | `error` | error | | | `field-indicator` | fieldIndicator | | | `form` | form | | | `full-width` | fullWidth | | | `hint` | hint | | | `inputmode` | inputmode | | | `invalid` | invalid | | | `label` | label | | | `length` | length | | | `marker` | marker | | | `name` | name | | | `novalidate` | novalidate | | | `readonly` | readonly | | | `required` | required | | | `submit-on-enter` | submitOnEnter | | | `too-short-message` | tooShortMessage | | | `valid` | valid | | | `value` | value | | | `value-missing-message` | valueMissingMessage | | ### Slots | Name | Description | | ---------- | ---------------------------------------------------------------- | | `label` | Custom label content placed above the input | | `leading` | Leading icon or element inside the input on the left | | `message` | Custom hint or validation message below the input | | `popover` | Popover element attached to the label area | | `prefix` | Content placed before the input group (outside the input border) | | `suffix` | Content placed after the input group (outside the input border) | | `trailing` | Trailing icon or element inside the input on the right |

---

## Exports | Kind | Name | Declaration | Module | Package | | --------------------------- | -------------- | ----------- | ------ | ------- | | `js` | `RInputCode` | RInputCode | | | | `custom-element-definition` | `r-input-code` | RInputCode | | |