Form Field

iOS 16.4+iPadOS 16.4+

Groups a label, control, description, and error message for a form field.

FLXFormField example
import SwiftUIstruct FormFieldUsageExample: View {    @State private var email = ""    var body: some View {        FLXFormField {            FLXFieldLabel("Email") {                FLXTextField("teammate@company.com", text: $email)            }            FLXFormFieldDescription("We'll never share your email.")        }        .padding(FLXSpacing.xl)    }}

Installation

Requires the design system foundation (tokens and theme).

pnpm dlx shadcn@latest add https://swiftui.flexnative.com/r/ios-form-field.json

Usage

FLXFormField {    FLXFieldLabel("Email") {        FLXTextField("teammate@company.com", text: $email)    }}

Composition

FLXFormField has no label/description/error parameters. Compose FLXFieldLabel, the control, FLXFormFieldDescription, and FLXFormFieldError as children:

FLXFormField with a description and a conditional error
FLXFormField {  FLXFieldLabel("Username") {      FLXTextField("Username", text: $username)  }  FLXFormFieldDescription("Visible to other members.")  if username.count < 3 {      FLXFormFieldError("Must be at least 3 characters.")  }}

Custom styling

FLXFormFieldStyle, FLXFormFieldDescriptionStyle, and FLXFormFieldErrorStyle are FLX protocols. Override each independently via .flxFormFieldStyle(_:), .flxFormFieldDescriptionStyle(_:), and .flxFormFieldErrorStyle(_:):

FLXFormField custom error styling
struct FLXWarningFormFieldErrorStyle: FLXFormFieldErrorStyle {  func makeBody(configuration: Configuration) -> some View {      Label {          configuration.text      } icon: {          Image(systemName: "exclamationmark.triangle.fill")      }          .flxFont(.footnote)          .foregroundStyle(.orange)  }}VStack(spacing: FLXSpacing.lg) {  FLXFormField {      FLXFieldLabel("Email") {          FLXTextField("Email", text: $email)      }      FLXFormFieldError("Something went wrong.")  }  FLXFormField {      FLXFieldLabel("Email") {          FLXTextField("Email", text: $email)      }      FLXFormFieldError("Something went wrong.")  }  .flxFormFieldErrorStyle(FLXWarningFormFieldErrorStyle())}

API Reference

FLXFormField

init(@ViewBuilder content: @escaping () -> Content)

FLXFormFieldDescription

init(_ textKey: LocalizedStringKey)init(_ textResource: LocalizedStringResource)init<S: StringProtocol>(_ text: S)

FLXFormFieldError

init(_ textKey: LocalizedStringKey)init(_ textResource: LocalizedStringResource)init<S: StringProtocol>(_ text: S)