How to style Forage iOS Elements
Learn how to style Forage Elements when building with the iOS SDK
To style a Forage Element when using the iOS SDK, add styling properties after initializing the Element, as in the below examples:
// EBT Card PAN Element:
private let foragePanTextField: ForagePANTextField = {
let tf = ForagePANTextField()
tf.masksToBounds = true
tf.cornerRadius = 4
tf.borderColor = .black
tf.borderWidth = 2.5
tf.placeholder = "EBT Card Number"
return tf
}()
// Balance + Capture PIN Elements:
private let foragePinTextField: ForagePINTextField = {
let tf = ForagePINTextField()
tf.masksToBounds = true
tf.cornerRadius = 16
tf.backgroundColor = .systemGray6
tf.textAlignment = .center
return tf
}()
The below tables list all possible styling properties per Element type.
ForagePANTextField
options
ForagePANTextField
optionsAttribute | Swift Type | Default value |
---|---|---|
cornerRadius | CGFloat | 4 |
masksToBounds | Bool | true |
borderColor | UIColor | .black |
borderWidth | CGFloat | 0.1 |
clearButtonMode | UITextField.ViewMode | .never |
font | UIFont | .systemFont(ofSize: 14, weight: .regular) |
placeholder | String | "" |
size | Double | 24.0 |
textAlignment | NSTextAlignment | .natural |
tfTintColor | UIColor | .black |
ForagePINTextField
options
ForagePINTextField
optionsAttribute | Swift Type | Default value |
---|---|---|
backgroundColor | UIColor | .systemGray6 |
cornerRadius | CGFloat | 16 |
masksToBounds | Bool | true |
borderColor | UIColor | .clear |
borderWidth | CGFloat | 0 |
font | UIFont | .systemFont(ofSize: 14, weight: .regular) |
padding | UIEdgeInsets | UIEdgeInsets(top: 0, left: 8, bottom: 0, right: 0) |
size (font size) | CGFloat | 24.0 |
textAlignment | NSTextAlignment | .natural |
textColor | UIColor | .black |
tfTintColor | UIColor | .black |
Next steps
- Check out the iOS Quickstart for a complete integration guide
Updated 3 months ago