SwiftUI Textfields | Liquisset

Liquisset gives you a wide range of textfields that allow you to enter any type of data with customizable and easy-to-use options.

Simple Textfield

Default textfield with bindable text.

@State var text = ""

LQTextfield(text: $text, placeholderText: "Enter some text")

Number Textfield

Limit your users to entering only numbers and set a maximum input length.

@State var text = ""

LQTextfield(text: $text, placeholderText: "Enter your number", keyboardType: .numberPad, maxCount: 10)

Textfield with leading image

Set a custom leading image for your textfield.

@State var text = "Awesome Textfield!"

LQTextfield(text: $text, leadingImage: Image(systemName: "pencil"))

Password Textfield

Secure textfield with custom icon.

@State var password = ""

LQTextfield(text: $password, placeholderText: "Enter your password")
            .setSecureText(true)

Textfield with custom style

Customize your textfield to match your app design.

var customStyle = LQTextfieldStyle(
    borderType: .bottomLine,
    backgroundColor: .clear,
    borderWidth: 2,
    borderColor: .blue,
    lineWidth: 2,
    textColor: .blue,
    trailingImageColor: .blue
)

LQTextfield(style: customStyle, text: $textStyle, trailingImage: Image(systemName: "heart.fill"))

Textfield image

Customize your Textfield

Each Liquisset component comes with multiple options to customize. Just create a custom instance of LQTextfieldStyle and set the properties you want.

LQButtonStyle.swift

public init(
    width: CGFloat? = nil,
    height: CGFloat? = nil,
    borderType: BorderStyle? = nil,
    cornerRadius: CGFloat? = nil,
    backgroundColor: Color? = nil,
    borderWidth: CGFloat? = nil,
    borderColor: Color? = nil,
    lineWidth: CGFloat? = nil,
    textColor: Color? = nil,
    textFont: Font? = nil,
    placeholderColor: Color? = nil,
    placeholderFont: Font? = nil,
    leadingImageColor: Color? = nil,
    trailingImageColor: Color? = nil
)

ContentView.swift

var customStyle = LQTextfieldStyle(
    borderType: .bottomLine,
    backgroundColor: .clear,
    borderWidth: 2,
    borderColor: .blue,
    lineWidth: 2,
    textColor: .blue,
    trailingImageColor: .blue
)

LQTextfield(style: customStyle, text: $textStyle, trailingImage: Image(systemName: "heart.fill"))