Field Label

macOS 13.3+

Pairs a caption with a form control.

import SwiftUIstruct FieldLabelUsageExample: View {    @State private var name = ""    @State private var email = ""    var body: some View {        VStack(spacing: FLXSpacing.lg) {            FLXFieldLabel("Name") {                FLXTextField(text: $name)            }            FLXFieldLabel("Email") {                FLXTextField(text: $email)            }        }        .padding(FLXSpacing.xl)    }}

Installation

Requires the design system foundation (tokens and theme).

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

Usage

FLXFieldLabel("Email") {    FLXTextField(text: $email)}

The pairing is structural, not id-based like HTML's <label for="">. If the wrapped control has no visible text, set .accessibilityLabel(_:) on it.

Orientation

Two orientations, set via orientation:. Defaults to .vertical.

FLXFieldLabel("Email") {  FLXTextField(text: $email)}FLXFieldLabel("Notifications", orientation: .horizontal) {  FLXToggle("", isOn: $notifications)      .labelsHidden()}

Custom styling

FLXFieldLabelStyle conforms to SwiftUI's native LabeledContentStyle. Override rendering for a subtree with any LabeledContentStyle via .flxFieldLabelStyle(_:):

struct FLXCaptionLabelStyle: LabeledContentStyle {  func makeBody(configuration: Configuration) -> some View {      VStack(alignment: .leading, spacing: FLXSpacing.xs) {          configuration.label              .flxFont(.caption, weight: .semibold)              .textCase(.uppercase)              .tracking(1)              .foregroundStyle(.secondary)          configuration.content      }  }}VStack(spacing: FLXSpacing.lg) {  FLXFieldLabel("Default style") {      FLXTextField(text: $email)  }  FLXFieldLabel("Caption style") {      FLXTextField(text: $email)  }  .flxFieldLabelStyle(FLXCaptionLabelStyle())}

API Reference

FLXFieldLabel

init(    orientation: FLXFieldLabelOrientation = .vertical,    @ViewBuilder content: @escaping () -> Content,    @ViewBuilder label: @escaping () -> Label)init(    _ titleKey: LocalizedStringKey,    orientation: FLXFieldLabelOrientation = .vertical,    @ViewBuilder content: @escaping () -> Content)init(    _ titleResource: LocalizedStringResource,    orientation: FLXFieldLabelOrientation = .vertical,    @ViewBuilder content: @escaping () -> Content)init<S: StringProtocol>(    _ title: S,    orientation: FLXFieldLabelOrientation = .vertical,    @ViewBuilder content: @escaping () -> Content)

Orientation

CaseDescription
verticalLabel above the control.
horizontalLabel and control on the same row.

For more information about FLXFieldLabel props, see the Apple documentation.