SwiftUI Components

How to configure appearance and manage behavior of SwiftUI components.

Naming

All SwiftUI components start with the SU prefix — for example, SUButton, SUInputField, and SUProgressBar.

Appearance

To configure the appearance of a SwiftUI component, use a view model.

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

To control the behavior of components in SwiftUI, use bindings.

Example of handling text input and focus state:

struct App: View {
  @State var email = ""
  @FocusState var isEmailFieldFocused: Bool
  
  var body: some View {
    VStack {
      SUInputField(
        text: $email,
        isFocused: $isEmailFieldFocused,
        model: inputFieldVM
      )
      .onChange(of: self.email) { newValue in
        // Track changes in the inputted text
        print("Email: \(newValue)")
      }
      
      SUButton(
        model: .init {
          $0.title = isEmailFieldFocused
          ? "Hide Keyboard"
          : "Show Keyboard"
          $0.isFullWidth = true
        },
        action: {
          // Control the focus (hide / show the keyboard)
          self.isEmailFieldFocused.toggle()
        }
      )
    }
    .padding(.horizontal)
  }
}