Swiftlets
DocumentationShowcaseAbout

Form Elements

Interactive form inputs, buttons, and form handling examples

← Back to Showcase

Text Input Types

Text Input

Input(type: "text", name: "username", placeholder: "Enter username")

Email Input

Input(type: "email", name: "email", placeholder: "user@example.com")

Password Input

Input(type: "password", name: "password", placeholder: "Enter password")

Number Input

Input(type: "number", name: "age", placeholder: "Age")
    .attribute("min", "0")
    .attribute("max", "120")

Select & TextArea

Select Dropdown

Dropdown selection with multiple options.

Swift Code

Select(name: "country") {
    Option("Choose a country", value: "")
    Option("United States", value: "us")
    Option("United Kingdom", value: "uk")
    Option("Canada", value: "ca")
}

Generated HTML

<select name="country">
    <option value="">Choose a country</option>
    <option value="us">United States</option>
    <option value="uk">United Kingdom</option>
    <option value="ca">Canada</option>
</select>

Preview

TextArea

Multi-line text input for longer content.

Swift Code

TextArea(name: "message", rows: 4, placeholder: "Enter your message...")

Generated HTML

<textarea name="message" rows="4" placeholder="Enter your message..."></textarea>

Preview

Buttons

Button Types

Different button types with custom styling.

Swift Code

HStack(spacing: 16) {
    Button("Submit", type: "submit")
        .class("btn btn-primary")
    Button("Reset", type: "reset")
        .class("btn btn-secondary")
    Button("Click Me", type: "button")
        .class("btn btn-success")
}

Generated HTML

<div class="hstack" style="gap: 16px">
    <button type="submit" class="btn btn-primary">Submit</button>
    <button type="reset" class="btn btn-secondary">Reset</button>
    <button type="button" class="btn btn-success">Click Me</button>
</div>

Preview

Complete Form Example

Working Form with SwiftUI-Style Property Wrappers

This form uses @FormValue property wrappers to access submitted data

ListsMedia Elements