HomeGuidesReference
Log In

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

AttributeSwift TypeDefault value
cornerRadiusCGFloat4
masksToBoundsBooltrue
borderColorUIColor.black
borderWidthCGFloat0.1
clearButtonModeUITextField.ViewMode.never
fontUIFont.systemFont(ofSize: 14, weight: .regular)
placeholderString""
sizeDouble24.0
textAlignmentNSTextAlignment.natural
tfTintColorUIColor.black

ForagePINTextField options

AttributeSwift TypeDefault value
backgroundColorUIColor.systemGray6
cornerRadiusCGFloat16
masksToBoundsBooltrue
borderColorUIColor.clear
borderWidthCGFloat0
fontUIFont.systemFont(ofSize: 14, weight: .regular)
paddingUIEdgeInsetsUIEdgeInsets(top: 0, left: 8, bottom: 0, right: 0)
size (font size)CGFloat24.0
textAlignmentNSTextAlignment.natural
textColorUIColor.black
tfTintColorUIColor.black

Next steps