TextEditor with Placeholder & Custom Background
Enhanced TextEditor with floating placeholder support and custom background container.
SwiftUI Implementation
Pure Vanilla Swift • No DependenciestextEditorWPlaceholderCustomBackground.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
- Category
- Inputs & Text Editors
- 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 StoreRelated SwiftUI Components
More components in Inputs & Text Editors and related app architectures.
ButtonsiOS 16.0+
Bouncy Button Icon
Interactive button featuring fluid spring animations and smooth scale feedback upon tap.
View Component & Code
ButtonsiOS 16.0+
Button with Repeat Behavior
Stepper-like button with continuous press-and-hold repeating action for counters and volume adjustment.
View Component & Code
ButtonsiOS 16.0+
Button for Copying
Smart copy button that temporarily switches icon and text to "Copied!" with tactile haptic feedback.
View Component & Code