Custom Drop Down Text Field in SWIFTUI

Hi, Guys! In this blog, I will teach you how you can create a custom drop-down text field in SwiftUI.

Step-1

Create an XCode project using the SwiftUI.

Step-2

Go to the ContentView file and create three variables

value will be the @State var. placeholder will be the String which will be used as a placeholder of the custom text field and dropDownList will be the list of String which will be used as a list of drop down.

SAMSUNG Galaxy S21 Ultra 5G Factory Unlocked Android Cell Phone 128GB US Version Smartphone…

Step-2

Now create the Menu in the ContentView body.

Step-3 — Design

Now create the design of the CustomTextField.

Use the VStack with spacing 5. Into the VStack, First I am using the HStack with the Text, Spacer & Image. Text is using to show the placeholder & Spacer is using for the spacing between the Text & Image & Image is using for the image icon. Second I am using the Rectangle View for printing the line under the HStack.

When the value is empty then the placeholder text will show into the Text & the Color will be gray & when the user selects any dropDown item then the value will print into the Text & the color will be black.

Remember

VStack: Vertical Stack of Views

HStack: Horizontal Stack of Views

Put this View into the label section of the Menu.

Step-4

Now use the ForEach and iterate the dropDownList & print the button on every dropDownList Item.

Now when we press the CustomTextField design then these buttons will show on to the screen.

On every button selection, the item value will be equal to the @State var value and then that value will print in the place of placeholder.

Complete Code

Hope you all understand if not then tell me 👌👌 👌 👌👌 👌👌👌 👌👌👌 👌

Patreon

M.Abbas is creating IOS Developer | Patreon