Used to enter a one-time password (OTP).
Custom Length
The length of the input fields can be customized by setting the
length prop.
el_input_otp("otp_len", length = 4)Types
There are three types available: outlined (default),
filled, and underlined.
tags$div(
style = "display: grid; gap: 16px",
el_input_otp("otp_o", type = "outlined"),
el_input_otp("otp_f", type = "filled"),
el_input_otp("otp_u", type = "underlined")
)Sizes
There are three sizes available: large,
default, and small.
tags$div(
style = "display: grid; gap: 16px",
el_input_otp("otp_l", size = "large"),
el_input_otp("otp_d"),
el_input_otp("otp_s", size = "small")
)Disabled & Readonly
Disabled and readonly states are supported.
el_input_otp("otp_dis", value = "123456", disabled = TRUE)Custom Validation
Set the validator prop to validate the input character,
and use inputmode to specify the keyboard type.
validator, a JS() function, decides which
characters each field takes.
el_input_otp(
"otp_val",
validator = JS("function(char) { return /^[0-9]$/.test(char); }")
)API
Element Plus’s tables, and beside each entry where it is in R.
Attributes
| Element | In R | Description | Type | Accepted | Default |
|---|---|---|---|---|---|
model-value |
value; input$<id>
|
The value of the OTP fields. Since numbers must not have leading
zeros, modelValue is allowed to be a number only during
initialization. |
1 / 2 | undefined | |
length |
length |
The OTP fields length | 3 | 6 | |
validator |
validator |
Custom validator function |
4(char: string, index: number) => boolean
|
() => true | |
inputmode |
inputmode |
Native inputmode attribute |
5 | — | |
type |
type |
The type of the OTP fields |
6'outlined' \\| 'filled' \\| 'underlined'
|
‘outlined’ | |
size |
size |
The size of the OTP fields |
7'large' \\| 'default' \\| 'small'
|
— | |
mask |
mask |
Whether to enable password mode | 8 | — | |
disabled |
disabled |
Whether the OTP fields are disabled | 9 | undefined | |
separator |
separator |
The separator between OTP fields |
10
/ 11 /
12() => string \\| VNode
|
— | |
validate-event |
validate_event |
Whether to trigger form validation | 13 | true | |
readonly |
readonly |
Same as readonly in native input |
14 | false | |
id |
id, the Shiny input’s |
Native id attribute |
15 | — | |
aria-label |
aria_label |
Native aria-label attribute |
16 | — |
Events
| Element | In R | Description |
|---|---|---|
change |
input$<id>_change |
Triggers when the value changes after input blur |
finish |
input$<id>_finish |
Fires when all fields have been filled |
focus |
input$<id>_focus |
Triggers when input is focused |
blur |
input$<id>_blur |
Triggers when input is blurred |