{"id":938,"date":"2024-08-28T23:04:48","date_gmt":"2024-08-28T21:04:48","guid":{"rendered":"https:\/\/mic.st\/blog\/?p=938"},"modified":"2025-09-02T15:55:15","modified_gmt":"2025-09-02T13:55:15","slug":"labeled-textfield-in-swiftui","status":"publish","type":"post","link":"https:\/\/mic.st\/blog\/labeled-textfield-in-swiftui\/","title":{"rendered":"Create a labeled TextField in SwiftUI"},"content":{"rendered":"\n

Today, I wanted to create a labeled TextField<\/code> in SwiftUI. More specifically the label should appear as a small text above the TextField<\/code>. My first quick hack was to just add a label above a TextField<\/code>. Obviously, we can do better. Let me show you how.<\/p>\n\n\n\n

LabeledContent<\/h2>\n\n\n\n

As a major thing in SwiftUI is its declarative syntax, it is not a big surprise that there is already an official element which does exactly what we want, i.e. labeling content. And it is also named like that.<\/p>\n\n\n\n

According to the official docs, it is “A container for attaching a label to a value-bearing view.” (see https:\/\/developer.apple.com\/documentation\/swiftui\/labeledcontent<\/a>). It is really exactly what we want. I mean almost.<\/p>\n\n\n\n

Default behavior<\/h2>\n\n\n\n

The following snippet shows the bare minimum (with some styling of the textfield):<\/p>\n\n\n

LabeledContent<\/span> {\n<\/span><\/span>\tTextField<\/span>(\"\"<\/span>, text: $text)\n<\/span><\/span>\t\t.textFieldStyle(.roundedBorder)\n<\/span><\/span>\t\t.frame(width: 200<\/span>)\n<\/span><\/span>} label: {\n<\/span><\/span>\tText<\/span>(\"Name\"<\/span>)\n<\/span><\/span>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> Swift<\/span> (<\/span>swift<\/span>)<\/span><\/small><\/pre>\n\n\n
It is a labeled Textfield but it is not exactly looking like what we wanted. It will result in something like this:<\/p>\n\n\n
\n
\"\"
LabeledContent wrapped around a TextField in SwiftUI<\/figcaption><\/figure>\n<\/div>\n\n\n
As we see, the default layout is horizontal and not our desired vertical layout. Also there is a huge margin we do not want. Can we modify this? Yes, of course.<\/p>\n\n\n\n
Custom LabeledContentStyle<\/h2>\n\n\n\n
A lot of SwiftUI elements can be modified by using an associated style configuration. Luckily, this is also possible for LabeledContent<\/code>. By doing this instead of building a custom View<\/code>, we still get all the nice SwiftUI sugar and accessibility features for free.<\/p>\n\n\n\n
There is the following modifier we can use for that:<\/p>\n\n\n
func labeledContentStyle<S<\/span>><\/span>(_ style: S) -> some View where S : LabeledContentStyle<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
As we see, this modifier needs a style that conforms to LabeledContentStyle<\/code> passed into it. Based on the passed style, the LabeledContent<\/code> is styled however we want.<\/p>\n\n\n\n
    \n
  1. We want to have a label above the textfield (we need a VStack<\/code>)<\/li>\n\n\n\n
  2. The label should be a little smaller than the TextField<\/code>‘s input (we modify the label with some smaller font)<\/li>\n\n\n\n
  3. Label and textfield should be aligned to the leading edge (set alignment of the VStack<\/code> to .leading<\/code>).<\/li>\n<\/ol>\n\n\n\n
    With these requirements, we can build a really simple struct conforming to LabeledContentStyle<\/code>:<\/p>\n\n\n
    struct<\/span> TopLabeledStyleConfig<\/span>: LabeledContentStyle<\/span> <\/span>{\n<\/span><\/span>\n<\/span><\/span>\tfunc<\/span> makeBody<\/span>(configuration: Configuration)<\/span><\/span> -> some View<\/span> {\n<\/span><\/span>\t\tVStack<\/span>(alignment: .leading) {\n<\/span><\/span>\t\t\tconfiguration.label\n<\/span><\/span>\t\t\t\t.font(.caption)\n<\/span><\/span>\t\t\tconfiguration.content\n<\/span><\/span>\t\t}\n<\/span><\/span>\t}\n<\/span><\/span>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> Swift<\/span> (<\/span>swift<\/span>)<\/span><\/small><\/pre>\n\n\n
    After that, we can append our newly created style via the labeledContentStyle<\/code> modifier:<\/p>\n\n\n
    LabeledContent<\/span> {\n<\/span><\/span>\tTextField<\/span>(\"\"<\/span>, text: $text)\n<\/span><\/span>\t\t.textFieldStyle(.roundedBorder)\n<\/span><\/span>\t\t.frame(width: 200<\/span>)\n<\/span><\/span>} label: {\n<\/span><\/span>\tText<\/span>(\"Name\"<\/span>)\n<\/span><\/span>}\n<\/span><\/span>.labeledContentStyle(TopLabeledStyleConfig<\/span>())\n<\/span><\/span><\/code><\/span>Code language:<\/span> Swift<\/span> (<\/span>swift<\/span>)<\/span><\/small><\/pre>\n\n\n
    Which will result in this:<\/p>\n\n\n
    \n
    \"\"
    Textfield wrapped with LabeledContent using custom style<\/figcaption><\/figure>\n<\/div>\n\n\n
    Much better right?<\/p>\n\n\n\n
    Of course now you can fine tune it, change the margin, font type, etc. however you like. You could also think about adding small animations when focussing the textfield and so on.<\/p>\n\n\n\n
    TopLabeledTextField<\/h2>\n\n\n\n
    If you want to reuse this labeled and styled TextField<\/code> in your SwiftUI views more often, it makes sense to create a reusable component. By that you do not have to think about adding your modifier manually.<\/p>\n\n\n\n
    Just put everything in one file and you have your own TopLabeledTextField<\/code>:<\/p>\n\n\n
    struct<\/span> TopLabeledStyleConfig<\/span>: LabeledContentStyle<\/span> <\/span>{\n<\/span><\/span>\n<\/span><\/span>\tfunc<\/span> makeBody<\/span>(configuration: Configuration)<\/span><\/span> -> some View<\/span> {\n<\/span><\/span>\t\tVStack<\/span>(alignment: .leading) {\n<\/span><\/span>\t\t\tconfiguration.label\n<\/span><\/span>\t\t\t\t.font(.caption)\n<\/span><\/span>\t\t\tconfiguration.content\n<\/span><\/span>\t\t}\n<\/span><\/span>\t}\n<\/span><\/span>\n<\/span><\/span>}\n<\/span><\/span>\n<\/span><\/span>struct<\/span> TopLabeledTextField<\/span>: View<\/span> <\/span>{\n<\/span><\/span>\n<\/span><\/span>\t@Binding<\/span> var<\/span> text: String<\/span>\n<\/span><\/span>\tvar<\/span> placeholderText: String<\/span>\n<\/span><\/span>\n<\/span><\/span>    var<\/span> body: some View<\/span> {\n<\/span><\/span>\t\tLabeledContent<\/span> {\n<\/span><\/span>\t\t\tTextField<\/span>(\"\"<\/span>, text: $text)\n<\/span><\/span>\t\t\t\t.textFieldStyle(.roundedBorder)\n<\/span><\/span>\t\t\t\t.frame(width: 200<\/span>)\n<\/span><\/span>\t\t} label: {\n<\/span><\/span>\t\t\tText<\/span>(placeholderText)\n<\/span><\/span>\t\t}\n<\/span><\/span>\t\t.labeledContentStyle(TopLabeledStyleConfig<\/span>())\n<\/span><\/span>    }\n<\/span><\/span>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> Swift<\/span> (<\/span>swift<\/span>)<\/span><\/small><\/pre>\n\n\n
    Conclusion<\/h2>\n\n\n\n
    I hope you learned something new today. If there is one thing you should take away: Always look around for style configurations on any SwiftUI elements. This is often a better way to style things in contrast to building together more or less generic View<\/code>s.<\/p>\n\n\n\n
    E.g. when you want to add custom styled Toggle<\/code> elements, this is also the way to go. No need for basic View<\/code> and onTapGesture<\/code>.<\/p>\n","protected":false},"excerpt":{"rendered":"
    Today, I wanted to create a labeled TextField in SwiftUI. More specifically the label should appear as a small text above the TextField. My first quick hack was to just add a label above a TextField. Obviously, we can do better. Let me show you how. LabeledContent As a major thing in SwiftUI is its…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"templates\/template-full-width.php","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[3,82],"tags":[4,35,61],"class_list":["post-938","post","type-post","status-publish","format-standard","hentry","category-ios-development","category-swiftui","tag-ios","tag-swift","tag-swiftui"],"_links":{"self":[{"href":"https:\/\/mic.st\/blog\/wp-json\/wp\/v2\/posts\/938","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mic.st\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mic.st\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mic.st\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mic.st\/blog\/wp-json\/wp\/v2\/comments?post=938"}],"version-history":[{"count":5,"href":"https:\/\/mic.st\/blog\/wp-json\/wp\/v2\/posts\/938\/revisions"}],"predecessor-version":[{"id":1025,"href":"https:\/\/mic.st\/blog\/wp-json\/wp\/v2\/posts\/938\/revisions\/1025"}],"wp:attachment":[{"href":"https:\/\/mic.st\/blog\/wp-json\/wp\/v2\/media?parent=938"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mic.st\/blog\/wp-json\/wp\/v2\/categories?post=938"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mic.st\/blog\/wp-json\/wp\/v2\/tags?post=938"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}