Autumn Sale50% offCOMPOT
Inputs & Text EditorsPro ComponentiOS 16.0+Xcode 15+

TextEditor with Placeholder & Custom Background

Enhanced TextEditor with floating placeholder support and custom background container.

SwiftUI Implementation

Pure Vanilla Swift • No Dependencies
textEditorWPlaceholderCustomBackground.swift
import SwiftUI

struct TextEditorWPlaceholderCustomBackground: View {
    
    @State private var text: String = ""
    @FocusState private var isFocused: Bool
    
    var body: some View {
            VStack(alignment: .leading, spacing: 4) {
                Text("Description")
                    .font(.system(size: 13, weight: .light))
                    .foregroundStyle(.secondary)
                    .textCase(.uppercase)
                    .padding(.leading, 12)
                
                ZStack {
                    if text.isEmpty {
                        HStack {
                            Text("Placeholder")
                                .font(.body)
                                .foregroundStyle(Color(UIColor.placeholderText))
                        }
                        .padding(.horizontal)
                        .padding(.vertical)
                        .frame(maxWidth: .infinity, maxHeight: 120, alignment: .topLeading)
                    }
                    
                    TextEditor(text: $text)
                        .font(.body)
                        .padding(.vertical, 8)
                        .padding(.horizontal, 12)
                        .frame(maxWidth: .infinity)
                        .frame(height: 120)
                        .focused($isFocused)
                        .scrollContentBackground(.hidden)
                        .background(.blue.opacity(0.2), in: RoundedRectangle(cornerRadius: 8.0))
                }
                
                Text("You've written ^[\\(text.count) \("character")](inflect: true).")
                    .font(.system(size: 12, weight: .light))
                    .fontWeight(.light)
                    .foregroundStyle(.secondary)
                    .frame(maxWidth: .infinity, alignment: .trailing)
            }
            .padding()
            .toolbar {
                ToolbarItemGroup(placement: .keyboard) {
                    Spacer()
                    Button("Done") {
                        isFocused = false
                    }
                    
                }
            }
    }
}

#Preview {
    TextEditorWPlaceholderCustomBackground()
}

Ready to copy and paste directly into any Xcode project running iOS 16.0+.

Recommended Use Cases

  • Dashboard overviews, stats tracking, and metric highlights

Component Details

iOS Compatibility
iOS 16.0+
Xcode Version
Xcode 15+
Platform
iOS
License Tier
Pro
Themes & Contexts
dashboard
C

Compot for iOS

Native SwiftUI playground app

Preview all 130+ components interactively on your device and copy code straight to Xcode with 1 tap.

Get Compot on the App Store