input-group

On iPad

The same installed source at a regular width. It adapts its layout without a separate design.

Install

With the sweetui tool (brew install mangobyte-dev/tap/sweetui):

sweetui install input-group --destination Sources/YourFeature/Components

Installs in order: button 0.5.2, input-group 0.2.1. Point --destination at a folder inside the consuming target's sources.

Usage

@State private var query = ""

InputGroup {
    Image(systemName: "magnifyingglass")
        .accessibilityHidden(true)
} content: {
    TextField("Search transactions", text: $query)
        .accessibilityLabel("Search transactions")
} trailing: {
    if !query.isEmpty {
        Button("Clear search", systemImage: "xmark.circle.fill") { query = "" }
            .labelStyle(.iconOnly)
            .buttonStyle(.registryGhost)
            .controlSize(.small)
    }
}

Accessibility contract

• TextField/SecureField; MUST have accessibilityLabel (placeholder).
• Leading decorative MUST accessibilityHidden(true); informational visible via label; trailing: label, 44pt area.
• Focus: accent ring; invalid: negative border wins; SHOULD pair message.
• 44-point min height; disabled opacity.

Details