Auth Code Input Showcase
Component Documentation
Component Name
AuthCodeInput
Builder Function Name
create_auth_code_input_manager
Description
renders a 6-digit numeric code input, typically used for one-time passcodes or verification codes
Use like example
Config
| Property | Type | Default | Description |
|---|---|---|---|
| val | string | current 6-digit code value | |
| name | string | code | name attribute for the input |
| is_required | boolean | false | marks the input as required if true |
| is_read_only | boolean | false | makes the input read-only if true |
| autocomplete | string | one-time-code | determines the browser’s autocomplete type |
| is_valid | boolean | optionally control or reflect validation state | |
| is_disabled | boolean | false | disables the input if true |
| border_radius | number | 1 | border radius for the input container in rem |
| ml | number | 0 | margin-left in rem |
| mr | number | 0 | margin-right in rem |
| mt | number | 0 | margin-top in rem |
| mb | number | 0 | margin-bottom in rem |
| on_change | function | callback invoked when the input value changes, receives the cleaned value | |
| on_sixth | function | callback invoked when the input reaches 6 digits, receives the final code |
Methods
| Method | Description | Parameters | Returns |
|---|---|---|---|
| set_val | assigns a new code value to the input, strips non-numeric characters, calls on_change/on_sixth | input: string | void |
| focus | programmatically focuses the input element | No Params | void |
Returned Properties
| Property | Type | Description |
|---|---|---|
| id | string | unique identifier for the code input field |
| val | string | current stored code value |
| name | string | name attribute for the input field |
| is_required | boolean | true if the input is required |
| is_read_only | boolean | true if the code input is read-only |
| autocomplete | string | the browser autocomplete type, often 'one-time-code' |
| is_valid | boolean | reflects if the code is currently 6 digits |
| is_disabled | boolean | disables input if true |
| border_radius | number | border radius for the input container in rem |
| ml | number | margin-left in rem |
| mr | number | margin-right in rem |
| mt | number | margin-top in rem |
| mb | number | margin-bottom in rem |
