TextField

public class TextField : UIView

Note

This component is available in the following variants:
  • ✅ Standard

With the following attribute status:

  • ✅ Disabled
  • ✅ Read-only
  • ✅ Helper text
  • Size:
    • ✅ MediumX
    • ✅ Medium
  • Style:
    • ✅ Outlined
  • Interaction state:
    • ✅ Enabled
    • ✅ Active (focus)
    • ✅ Filled
  • Feedback state:
    • ✅ Error
    • ✅ Success
  • Action:
    • ✅ None
    • ✅ Icon button
    • ✅ Image
  • Type:
    • ✅ Text
    • ✅ Password
    • ✅ Number
    • ❌ Multiline

TextField is a class that represents a component from the design system.

It can be configured with 2 different sizes:

  • MediumX (default)
  • Medium

Example of usage:

       let textField = TextField()
       textfield.configure(size: .medium)

The textField styles, keyboards, capitalization and autocorrection properties changes according to the chosen type.

This TextField has 4 types:

  • Text (default type)
  • Name
  • Number
  • Password

Example of usage:

   textField.configure(type: .text)
   textField.configure(type: .password(keyboardType: .numberPad)

The TextField has 3 states for feedback, that can be configured with a message:

  • Error
  • Success
  • None (clear error/success states)

Example of usage:

   textField.configure(state: .error, with: "Error")
   // to clear the state:
   textField.configure(state: .none)

It also can be configured as a required field, ‘read-only’ field or disabled textField. Each interaction state has its pre-defined style:

   textField.configure(isEnabled: false)
   textField.configure(readOnly: true)
   textField.configure(required: true)

The TextField also has an action item on the right, which can be configured with an icon from NatDSIcons, a local image or a remote image:

   textField.configure(icon: getIcon(.outlinedDefaultMockup)) { action }
   textField.configure(image: UIImage(named: "imageName")) { action }
   textField.configure(remoteImageURL: URL(string: "urlForImage")) { action }

There are properties that changes the textfield styles as well.

Properties:

  • title: Label text always displayed above textfield
  • placeholder: Hint text to display when the text is empty
  • helper: Hint text always displayed below textfield
  • error: Text that alerts about an error

To manage the TextField, use UITextFieldDelegate protocol as usual.

   textField.delegate = yourDelegate

Requires

It’s necessary to configure the Design System with a theme or fatalError will be raised.

DesignSystem().configure(with: AvailableTheme)

Public vars

  • A string with the text to be always displayed above textfield

    Declaration

    Swift

    public var title: String? { get set }

  • Undocumented

    Declaration

    Swift

    public var theme: AvailableTheme

  • Undocumented

    Declaration

    Swift

    public static var currentTheme: AvailableTheme

  • A string with the text inside the textField

    Declaration

    Swift

    public var text: String? { get set }

  • A string with the hint text to be displayed when the textField is empty

    Declaration

    Swift

    public var placeholder: String? { get set }

  • A string with a helper text to be displayed below textField

    Declaration

    Swift

    public var helper: String? { get set }

  • A string with a text that alerts about an error. It triggers the state .error for the textField.

    Declaration

    Swift

    public var error: String? { get set }

  • The type of the textfield, chosen from the TextFieldType enum

    Declaration

    Swift

    public var type: TextFieldType { get set }

  • A boolean that indicates if filling the textField is mandatory

    Declaration

    Swift

    public var required: Bool { get set }

  • A boolean that indicates if the textField is filled with info that can’t be changed

    Declaration

    Swift

    public var readOnly: Bool { get set }

  • A boolean that indicates if the textField is enabled or disabled

    Declaration

    Swift

    public var isEnabled: Bool { get set }

  • The size of the textfield, chosen from the TextField.Size enum

    Declaration

    Swift

    public var size: Size { get set }

  • Undocumented

    Declaration

    Swift

    public weak var delegate: UITextFieldDelegate? { get set }

Private vars

  • Undocumented

    Declaration

    Swift

    public private(set) lazy var textField: NatField { get set }

  • Undocumented

    Declaration

    Swift

    public init(theme: AvailableTheme = .none)

  • FeedbackState is an enum that represents the possible states for a TextField. The chosen state indicates the type of feedback should be displayed, and sets the style for the textField. The error and success states also display an icon with the corresponding color and image. The none state clears the textField if they’re already configured with another state.

    These are all states allowed for a TextField:

    • error
    • success
    • none
    See more

    Declaration

    Swift

    public enum FeedbackState

  • Undocumented

    See more

    Declaration

    Swift

    public enum InteractionState : CaseIterable

  • Undocumented

    See more

    Declaration

    Swift

    public struct ThemeColor

  • Size is an enum that represents the possible sizes for the TextField height. The default size is mediumX.

    These are all sizes allowed for a TextField:

    • medium
    • mediumX
    See more

    Declaration

    Swift

    public enum Size : CaseIterable

  • Undocumented

    Declaration

    Swift

    @discardableResult
override func becomeFirstResponder() -> Bool

  • Undocumented

    Declaration

    Swift

    @discardableResult
override func resignFirstResponder() -> Bool

Public Methods

  • Sets the textField title, displayed above the textField box

    Declaration

    Swift

    public func configure(title: String)

    Parameters

    title

    A string with the text for the title

  • Sets the textField placeholder, a hint text displayed inside the textField box when it is empy

    Declaration

    Swift

    public func configure(placeholder: String)

    Parameters

    placeholder

    A string with the text for the placeholder

  • Sets the textField size, which changes it’s height

    Declaration

    Swift

    public func configure(size: Size)

    Parameters

    size

    An option from TextField.Size enum

  • Sets the textField type, which changes it’s configuration for keyboard, secure text, capitalization and autocorrection

    Declaration

    Swift

    public func configure(type: TextFieldType)

    Parameters

    type

    An option from TextFieldType

  • Sets the state of the textField and a text to describe the state

    Declaration

    Swift

    public func configure(state: FeedbackState, with text: String?)

    Parameters

    state

    An option from TextField.FeedbackState: error, success or none
    text

    A string with the text to be displayed below the textField box. If the state is error or success, the text will have a small icon next to it. If the state is none, the text will be displayed as a helper text.

  • Sets if the textField is required, when its filling is mandatory

    Declaration

    Swift

    public func configure(required: Bool)

    Parameters

    required

    A boolean indicating if the textField is required

  • Sets if the textField is enabled or disabled

    Declaration

    Swift

    public func configure(isEnabled: Bool)

    Parameters

    isEnabled

    A boolean indicating if the textField is enabled

  • Sets if the textField is read only

    Declaration

    Swift

    public func configure(readOnly: Bool)

    Parameters

    readOnly

    A boolean indicating if the textField is read only

  • Sets a helper text to be displayed below the textField box

    Declaration

    Swift

    public func configure(helperText: String)

    Parameters

    helperText

    A string with the helper text

  • Undocumented

    Declaration

    Swift

    public func configure(icon: String?, with action: @escaping () -> Void)

  • Sets an icon button to be displayed inside the textField box, aligned with it’s right side.

    Declaration

    Swift

    public func configure(iconButton: NatIconButton)

    Parameters

    iconButton

    An NatIconButton to be displayed in the textField right edge

  • Sets a local image to be displayed inside the textField box, aligned with the right side, and the action to be executed when it is tapped.

    Declaration

    Swift

    public func configure(image: UIImage?, with action: @escaping () -> Void)

    Parameters

    image

    An UIImage to be displayed in the textField right edge
    action

    A block of code to be executed when the image is tapped

  • Sets a remote image to be displayed inside the textField box, aligned with the right edge, and the action to be executed when it is tapped.

    Declaration

    Swift

    public func configure(remoteImageURL: URL, with action: @escaping () -> Void)

    Parameters

    remoteImageURL

    A URL that contains the remote address to the image. Example: URL(string: "http://myimage")!
    action

    A block of code the be executed when the image is tapped

  • Removes the action item, whether it’s an icon or an image

    Declaration

    Swift

    public func configureRemoveAction()

  • Sets a delegate for the TextField

    Declaration

    Swift

    public func configure(delegate: UITextFieldDelegate?)