Forms

Create everything from simple newsletter signups to complex data entry forms.

Basic form elements

The Form element lets you create custom forms with any combination of inputs, buttons, and FormItem:

Form {
    TextField("Name", prompt: "Enter your name")
        .type(.text)
        .width(1)

    Button("Submit")
        .type(.submit)
        .role(.primary)
        .width(1)
}
.columns(2)

Name

Submit

Label styles

Forms support three different label styles:

floating

Floating labels animate when focused, providing a modern and space-efficient interface.

Form {
    TextField("Name", prompt: "Enter your name")
        .type(.text)

    Button("Submit")
        .type(.submit)
        .role(.primary)
}
.labelStyle(.floating)

Name

Submit

leading

Leading labels appear to the left of inputs, providing a traditional form layout.

Form {
    TextField("Name", prompt: "Enter your name")
        .type(.text)

    Button("Submit")
        .type(.submit)
        .role(.primary)
}
.labelStyle(.leading)

Name

Submit

hidden

Hidden labels are accessible to screen readers but not visible, creating a clean interface.

Form {
    TextField("Name", prompt: "Enter your name")
        .type(.text)

    Button("Submit")
        .type(.submit)
        .role(.primary)
}
.labelStyle(.hidden)

Submit

Control groups

Use ControlGroup to combine related form elements into a single visual unit:

Form {
    ControlGroup("Username") {
        Span("@")
        TextField("Username", prompt: "Choose a username")
    }

    ControlGroup("Password") {
        TextField("Password", prompt: "Enter your password")
            .type(.password)
        Button("Unlock", systemImage: "key-fill")
            .role(.primary)
    }
}

Username

@

Username

Password

Password

Unlock

Built-in Forms

Ignite includes specialized forms for common use cases like newsletter subscriptions.

Newsletter subscriptions

The SubscribeForm makes it easy to collect email addresses for newsletters:

SubscribeForm(.buttondown("yourusername"))
    .emailFieldLabel("Your email address")
    .subscribeButtonLabel("Join our newsletter")
    .formStyle(.stacked)

Join our newsletter