TTBaseUITextField

Core

Enhanced UITextField subclass with 4 border styles, built-in keyboard dismiss accessory view, AwesomePro icon support (left/right), real-time text change handler, email auto-fill, force uppercase, and chainable API. Automatically constrains height to SizeConfig.H_TEXTFIELD when isSetHeight: true.

🎨 Field Types

public enum TYPE {
    case DEFAULT      // Rounded rect border (system style)
    case NO_BORDER    // No border, no background line
    case NO_PADING    // Zero padding (embed in custom container)
    case ONLY_BOTTOM  // Bottom underline only (flat style)
}

Type	Border	Padding	Use Case
`.DEFAULT`	Rounded rect	5pt uniform	Standard form fields
`.NO_BORDER`	None	5pt uniform	Custom-styled containers
`.NO_PADING`	System default	None	Tight layouts, embedded in panels
`.ONLY_BOTTOM`	Bottom line only	5pt uniform	Flat/modern form style

🚀 Usage

Basic Text Fields

// Standard rounded field with dismiss keyboard accessory
let nameField = TTBaseUITextField(withPlaceholder: "Enter name")

// Bottom underline style (flat look)
let emailField = TTBaseUITextField(
    withPlaceholder: "Email",
    type: .ONLY_BOTTOM
)
emailField.setKeyboardStyleByEmail()

// No border, embedded inside a custom styled panel
let searchField = TTBaseUITextField(
    withPlaceholder: "Search...",
    type: .NO_BORDER
)

// Fixed height (from SizeConfig.H_TEXTFIELD, default 44pt)
let fixedField = TTBaseUITextField(
    withPlaceholder: "Fixed height",
    isSetHeight: true
)

Real-time Text Change Handler

let usernameField = TTBaseUITextField(withPlaceholder: "Username")
usernameField.onTextEditChangedHandler = { field, text in
    print("Typing: \(text)")
    validateButton.setEnable()
}

// Editing began / ended
usernameField.editingDidBeginHandle = { field in
    field.layer.borderColor = UIColor.systemBlue.cgColor
}
usernameField.editingDidEndHandle = { field in
    field.layer.borderColor = UIColor.lightGray.cgColor
}

With AwesomePro Icon

let searchField = TTBaseUITextField(withPlaceholder: "Search products")
// Left icon
searchField.setIcon(icon: .magnifyingGlass, isRight: false)

// Right icon (e.g. clear button)
searchField.setIcon(icon: .xmark, isRight: true)
searchField.onTouchIconHandler = { field in
    field.text = ""
}

// Custom icon size + color
searchField.setIcon(
    icon: .envelope,
    isRight: false,
    size: CGSize(width: 20, height: 20),
    iconColor: .systemBlue
)

Keyboard Styles

let phoneField = TTBaseUITextField(withPlaceholder: "Phone number")
phoneField.setKeyboardStyleByPhone()    // numberPad
phoneField.setKeyboardStyleByEmail()    // emailAddress
phoneField.setKeyboardStyleByNumber()   // numberPad
phoneField.setKeyboardStyleByMoney()    // decimalPad

Special Modes

// Force all input to uppercase
let codeField = TTBaseUITextField(withPlaceholder: "Promo code")
codeField.setForceInputUpperCase()

// Auto-fill common email domains (gmail, yahoo, etc.)
let emailField = TTBaseUITextField(withPlaceholder: "Email")
emailField.setAutoFillEmail()
emailField.setKeyboardStyleByEmail()

// Read-only field that shows a picker/date when tapped
let dateField = TTBaseUITextField(withPlaceholder: "Select date")
dateField.setTouchHandler()
dateField.onTouchHandler = { field in
    // show date picker
}

// Password field
let passField = TTBaseUITextField(withPlaceholder: "Password")
passField.setPasswordView()

Return Key Handler

let nameField = TTBaseUITextField(
    withPlaceholder: "Name",
    returnKeyType: .next
)
nameField.onTouchReturnKeyHandler = { field, keyType in
    if keyType == .next {
        emailField.becomeFirstResponder()
    }
}

// "Next" keyboard toolbar button
nameField.setNextKeyboardAccessoryView {
    emailField.becomeFirstResponder()
}

📖 API Reference

Method / Property	Returns	Description
`onTextEditChangedHandler`	`Closure?`	Called on every keystroke with current text
`onDismissKeyboard`	`Closure?`	Called when accessory dismiss button tapped
`onTouchIconHandler`	`Closure?`	Called when left/right icon is tapped
`onTouchHandler`	`Closure?`	Called when field is tapped (touch mode only)
`onTouchReturnKeyHandler`	`Closure?`	Called on Return key press with key type
`editingDidBeginHandle`	`Closure?`	Called when field begins editing
`editingDidEndHandle`	`Closure?`	Called when field ends editing
`setText(text:)`	`Void`	Set field value programmatically
`setTextColor(color:)`	`TTBaseUITextField`	Set text color (chainable)
`setBgColor(_:)`	`Void`	Set background color
`setNoBorder()`	`TTBaseUITextField`	Remove all borders
`setPasswordView()`	`Void`	Enable secure text entry
`setTouchHandler()`	`TTBaseUITextField`	Make read-only, fire onTouchHandler on tap
`setForceInputUpperCase()`	`TTBaseUITextField`	Force all characters to uppercase
`setAutoFillEmail()`	`TTBaseUITextField`	Auto-complete common email domains
`setRemoveDiacritics()`	`TTBaseUITextField`	Strip accents/diacritics from input
`setIcon(icon:isRight:size:iconColor:)`	`Void`	Set left or right AwesomePro icon
`setHiddenKeyboardAccessoryView()`	`TTBaseUITextField`	Add dismiss keyboard accessory bar
`setNextKeyboardAccessoryView(touchHandle:)`	`TTBaseUITextField`	Add "Next" button accessory bar
`setKeyboardStyleByEmail/Number/Phone/Money/Date()`	`TTBaseUITextField`	Set keyboard type

⚙️ Configuration

// Control height of all text fields
TTBaseUIKitConfig
    .withDefaultConfig()
    .withSizeConfig(
        TTBaseUIKitSizeConfig(H_TEXTFIELD: 48)
    )
    .start()

// Dismiss keyboard style: .ICON | .ICON_TEXT | .TEXT
TTBaseUIKitConfig
    .withDefaultConfig()
    .withStyleConfig(
        TTBaseUIKitStyleConfig(
            dismissKeyboardType: .ICON_TEXT
        )
    )
    .start()

Pro Tip: Use setTouchHandler() to turn any text field into a read-only tappable trigger (e.g., date pickers, dropdowns). The iconImageView property gives you direct access to the left/right icon view after calling setIcon().

← TTBaseUIButton TTBaseUITextView →