Input OTP
You can edit 8 Components for free. Get premium for unlimited access.
Accessible one-time password component with copy paste functionality.
Figma
The Pin Input component is used to enter a code for verification.
1. Reference
This component inherits props from the Pin Input.
2. State
You can edit the state with the default, active, filled, error, success or disabled parameter.
Image 2.1 : State default
Image 2.2 : State active
Image 2.3 : State filled
Image 2.4 : State error
Image 2.5 : State success
Image 2.6 : State disabled
Jetpack Compose
The PinInput component is used to enter a code for verification.
1. Reference
This component inherits props from the Pin Input.
-
-
-
2. State
You can edit the state with the PinInputState.default, PinInputState.error, PinInputState.success, PinInputState.disabled parameter.
-
value = remember {
mutableStateOf("3")
},
state = PinInputState.default
)
PinInput(
value = remember {
mutableStateOf("3")
},
state = PinInputState.error
)
PinInput(
value = remember {
mutableStateOf("3")
},
state = PinInputState.success
)
PinInput(
value = remember {
mutableStateOf("3")
},
state = PinInputState.disabled
)
Preview
Preview
Code
const DlOTPInput()Usage
Add this code example to your project to see how the component works.
DlOTPInput(
size: DlOtpInputSize.lg,
state: DlOtpInputState.error
)
API Reference
DlOTPInput is a fixed-size, fully tappable one-digit input component with masking behavior, size variants lg , md and sm , and visual states default , error , success and disabled .
Examples
States
Preview
Code
const Wrap(
spacing: DlSpacingTokens.p_16,
runSpacing: DlSpacingTokens.p_16,
children: [
DlOTPInput(
state: DlOtpInputState.error
),
DlOTPInput(
state: DlOtpInputState.success
),
],
)Size
Preview
Code
const Wrap(
spacing: DlSpacingTokens.p_16,
runSpacing: DlSpacingTokens.p_16,
children: [
DlOTPInput(
size: DlOtpInputSize.lg
),
DlOTPInput(
size: DlOtpInputSize.md
),
DlOTPInput(
size: DlOtpInputSize.sm
),
],
)Disabled
Preview
Code
-
DlOTPInput(
state: DlOtpInputState.disabled
)Discover more content
You have questions or need help?
You want to try?
Save time and money?