MIPinCodeView is a customizable SwiftUI component for creating a PIN code input view with various styling options. It supports boxed, circle, and underlined styles, as well as secure input, custom colors, and rounded corners.
- Different styles: boxed, circle, and underlined
- Show/hide PIN option for secure input
- Custom background and text colors
- Rounded corners option
- Easily configurable PIN length
To integrate MIPinCodeView into your project, use the Swift Package Manager:
- Open your project in Xcode.
- Go to
File
>Add Packages...
. - Enter the repository URL:
https://github.com/markhorix/MIPinCodeView.git
. - Select the latest version and add the package to your project.
To use MIPinCodeView in your SwiftUI project, follow these steps:
-
Import the package:
import MIPinCodeView
-
Add the
MIPinCodeView
to your view:struct ContentView: View { @State private var pin: String = "" var body: some View { MIPinCodeView( pin: $pin, length: 4, isSecure: true, style: .boxed, backgroundColor: .gray, textColor: .black, cornerRadius: 8, width: 40, height: 40, keyboardType: .numberpad ) } }
MIPinCodeView
provides several customization options:
- length: The length of the PIN (default is 4).
- isSecure: Toggle secure input (default is
true
). - style: The style of the PIN view (
boxed
,circle
,underlined
). - backgroundColor: The background color of each PIN character view.
- textColor: The text color of each PIN character.
- cornerRadius: The corner radius for boxed style.
- width: The width of each PIN character view.
- height: The height of each PIN character view.
- spacing: The spacing between each PIN character view.
- keyboardType: The Keyboard Type for PIN Code View.
MIPinCodeView(
pin: $pin,
length: 6,
isSecure: false,
style: .circle,
backgroundColor: .blue,
textColor: .white,
cornerRadius: 12
width: 40,
height: 40,
keyboardType: .numberpad
)
This project is licensed under the MIT License - see the LICENSE file for details.