SweetUI

Search items

Jump to an item

block

signup-form

Composes input, button, card, checkbox; caller owns fields, validation, terms, submission state.

sign-upregistrationformvalidationautofillshadcn
signup-form, light

On iPad

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

signup-form on iPad, light

Install

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

sweetui install signup-form --destination Sources/YourFeature/Components

Installs in order: input 0.5.1, button 0.5.2, card 0.2.1, checkbox 0.3.2, signup-form 0.1.2. Point --destination at a folder inside the consuming target's sources.

Usage

@State private var name = ""
@State private var email = ""
@State private var password = ""
@State private var confirmation = ""
@State private var acceptsTerms = false
@State private var isSubmitting = false
let formError: LocalizedStringResource? = nil

// Errors derive from state; nil hides the message and clears the invalid style.
var nameError: LocalizedStringResource? { nil }
var emailError: LocalizedStringResource? {
    email.isEmpty || email.contains("@") ? nil : "Enter a valid email address."
}
var passwordError: LocalizedStringResource? {
    password.isEmpty || password.count >= 8 ? nil : "Use at least 8 characters."
}
var confirmationError: LocalizedStringResource? {
    confirmation == password ? nil : "Passwords do not match."
}
var termsError: LocalizedStringResource? { nil }

SignUpForm(
    "Create your account",
    name: $name,
    nameError: nameError,
    email: $email,
    emailError: emailError,
    password: $password,
    passwordError: passwordError,
    confirmation: $confirmation,
    confirmationError: confirmationError,
    acceptsTerms: $acceptsTerms,
    termsError: termsError,
    formError: formError,
    isSubmitting: isSubmitting,
    isSubmitEnabled: !name.isEmpty && emailError == nil && passwordError == nil && confirmationError == nil && acceptsTerms,
    secondaryActionTitle: "Already have an account?",
    onSecondaryAction: { },
    onSubmit: { }
)

Accessibility contract

  • Fields: explicit accessibilityLabel = title. iOS 27: label+prompt initializer shows placeholder only; unlabeled = unnamed.
  • Focus: name, email, password, confirmation; Next advances, confirmation Go submits.
  • Invalid: no color-alone; border-width increases; footnote under field = accessibility hint (terms error: same, under checkbox).
  • Autofill fixed: name=.name; email=.username (email keyboard); passwords=.newPassword (system offers, reuses). Verify manually, saved credential.
  • Field/terms/form errors post AccessibilityNotification.Announcement on change; unchanged = no re-announce. Timing unverified on device.
  • Terms toggle: checkbox style, native Toggle, 44pt min-row, no color-alone.
  • isSubmitting: disables controls, shared opacity; submit shows spinner, title stays label.
  • Card title: header trait.

Details

Kindblock
Version0.1.2
PlatformsiOS 26.0+
Dependenciesinput, button, card, checkbox
SourceRegistry/sources/blocks/SignUpForm.swift
Xcode previewSign Up Form