Pin Input
You can edit 8 Components for free. Get premium for unlimited access.
Choose between Figma, SwiftUI, React Native or Jetpack Compose Documentation.
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
SwiftUI
The DLPinInput 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 .normal, .error, .success, .disabled parameter.
-
text: $pinText,
state: .normal
)
DLPinInput(
text: $pinText,
state: .error
)
DLPinInput(
text: $pinText,
state: .success
)
DLPinInput(
text: .constant(""),
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
)
React Native
This component is on the roadmap and in Progress This means that it is currently being edited and will be published in the next few weeks/months. Check back often to stay informed about the latest updates.
🚧
Discover more content
You have questions or need help?
You want to try?
Save time and money?