UIKit Components

How to configure appearance and manage behavior of UIKit components.

Naming

All UIKit components start with the UK prefix — for example, UKButton, UKInputField, and UKProgressBar.

Appearance

Just like SwiftUI components, UIKit components are configured using view models.

Example:

let inputFieldVM = InputFieldVM {
  $0.title = "Email"
  $0.placeholder = "Enter your email"
  $0.isRequired = true
}

Learn more about view models in the View Models documentation.

Behavior

In UIKit, you manage component behavior through their public properties and actions.

Example of managing focus and input:

class ViewController: UIViewController {
  override func viewDidLoad() {
    super.viewDidLoad()
    
    let button = UKButton(model: .init {
      $0.title = "Show Keyboard"
    })
    
    let inputField = UKInputField(
      model: inputFieldVM,
      onValueChange: { text in
        // Track changes in the inputted text
        print("Email: \(text)")
      }
    )
    
    button.action = { [weak inputField, weak button] in
      // Control the focus (hide / show the keyboard)
      guard let inputField, let button else { return }
      if inputField.isFirstResponder {
        inputField.resignFirstResponder()
        button.model.title = "Show Keyboard"
      } else {
        inputField.becomeFirstResponder()
        button.model.title = "Hide Keyboard"
      }
    }

    view.addSubview(inputField)
    view.addSubview(button)
    
    inputField.horizontally(16)
    inputField.centerVertically(offset: -50)
    
    button.below(inputField, padding: 10)
    button.horizontally(16)
  }
}

Layout

UIKit components in ComponentsKit support all types of layout — manual frames, Auto Layout, or third-party layout libraries.

If you decide to use Auto Layout in your project, we recommend using our Auto Layout helper library to speed up constraint writing and keep your layout code clean.