How to Use Picker View Instead of a Dropdown List in iOS (Swift)

UIKit does not provide a built-in control for dropdown lists.

If you want users to select an option from a list (like a dropdown), you can use a Picker View instead, as shown below.

In this tutorial, we will explain how to use a Picker View as a replacement for a dropdown list in Xcode.

Preparing an iOS App with a Picker View

First, let's create a simple iOS app that uses a Picker View.

In Xcode, create a new project under [iOS] → [App].

On the Main storyboard, add a label “Country:” and a Text Field to the View Controller. The design and placement don't need to be exact.

Create an outlet from the UITextField named countryTextField.

import UIKit

class ViewController: UIViewController {
    
    @IBOutlet weak var countryTextField: UITextField!
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
}

How to Use Picker View in Swift

Now, let's write the code to allow selection using a Picker View.

To receive events from the Picker View and set values to the Text Field, the ViewController needs to conform to UIPickerViewDataSource, UIPickerViewDelegate, and UITextFieldDelegate.

import UIKit

class ViewController: UIViewController, UIPickerViewDataSource, UIPickerViewDelegate, UITextFieldDelegate {
    
    @IBOutlet weak var countryTextField: UITextField!
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
}

Then, add the following code to ViewController.swift:

import UIKit

class ViewController: UIViewController, UIPickerViewDataSource, UIPickerViewDelegate, UITextFieldDelegate {
    
    @IBOutlet weak var countryTextField: UITextField!
    
    var countries: [String] = []
    weak var pickerView: UIPickerView?

    override func viewDidLoad() {
        super.viewDidLoad()

        countries.append("")
        countries.append("Australia")
        countries.append("Canada")
        countries.append("Japan")
        countries.append("United States")

        let pv = UIPickerView()
        pv.delegate = self
        pv.dataSource = self

        countryTextField.delegate = self
        countryTextField.inputAssistantItem.leadingBarButtonGroups = []
        countryTextField.inputView = pv
        self.pickerView = pv

        let tap: UITapGestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(self.dismissKeyboard))
        tap.cancelsTouchesInView = false
        self.view.addGestureRecognizer(tap)
    }

    @objc func dismissKeyboard() {
        self.view.endEditing(true)
    }

    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return 1
    }

    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        return countries.count
    }

    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        return countries[row]
    }

    func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
        countryTextField.text = countries[row]
    }
}

Step-by-step explanation:

Line 7 defines a string array countries that stores the options displayed in the Picker View.

Line 8 defines a UIPickerView named pickerView used in this screen.

Lines 13–17 add the selectable country values to the countries array.

Lines 19–21 create a UIPickerView and set this class as its delegate and dataSource.

Lines 23–26 configure the countryTextField to use the Picker View as its inputView, disable input suggestions, and store the UIPickerView in self.pickerView.

Lines 28–35 add a UITapGestureRecognizer so that tapping outside will dismiss the Picker View.

Line 37–39: numberOfComponents(in:) is a required method of UIPickerViewDataSource that returns the number of components (columns). Here, it returns 1.

Line 41–43: pickerView(_:numberOfRowsInComponent:) returns the number of rows, which is countries.count.

Line 45–47: pickerView(_:titleForRow:forComponent:) returns the string to display for each row using countries[row].

Line 49–51: pickerView(_:didSelectRow:inComponent:) sets the selected value into countryTextField.text.

That's all the code required to implement a Picker View for selecting values.

Testing the iOS App in the Simulator

Now let's build and run the iOS app.

Click the button in the toolbar, and the selected simulator will launch, install the app, and run it.

When you tap the Text Field, the Picker View will appear below.

When you select a value in the Picker View, that value is set into the Text Field.

If you tap anywhere else, the Picker View will close.

That's how you can use a Picker View instead of a dropdown list in Xcode.