Selectable Tags in SwiftUI

Learn how to build custom selectable tags view in SwiftUI

ML Musings
3 min readFeb 1


I created this with Figma

SwiftUI is a framework for building user interfaces on Apple platforms. With its easy-to-use syntax, developers can create powerful and interactive user interfaces with less code. In this article, we will learn how to use the Layout Protocol to implement the selectable tags view in SwiftUI.

You traditionally arrange views in your app’s user interface using built-in layout containers like HStack and Grid. If you need more complex layout behavior, you can define a custom layout container by creating a type that conforms to the Layout protocol and implementing its required methods:

sizeThatFits calculate and return the size of the layout container, and placeSubviews tell each subview where to appear.

Let's look at how we can use this to create a selectable tag view in SwiftUI

Tag Struct

We will start by creating a Tag struct, this will give us access to properties such as name to display it in our view, and the isSelected Boolean to select/unselect a tag

struct Tag: Identifiable {
var id = UUID().uuidString
var name: String
var isSelected: Bool = false

Create Tags

While in a full-fledged app, you will be calling an API to fetch these tags, for the sake of this tutorial, we will generate some dummy data

var interestTags: [String] = ["Memes", "News", "Music", "Crypto", 
"Comedy", "Technology", "Animals", "DIY", "Life Hacks",
"Automobiles", "Fashion", "Food", "Outdoors", "Gaming",
"Travel", "Parenting", "Gardening", "Skateboarding",
"Witchcraft", "Love", "Relationships", "Vintage",
"Office", "Emotional Support", "Synth", "Humor",
"Fandom", "Events", "Work", "Halloween", "Crafts",
"School", "College", "Dating", "Random"]

Layout Protocol

struct CustomTagView: Layout {
var alignment: Alignment = .leading
var spacing: CGFloat = 10…



ML Musings

✨ I enjoy pushing the boundaries of JS, Python, SwiftUI and AI. You can support my work through coffee -

Recommended from Medium


See more recommendations