DropdownTextField & MultiSelectionMenu – SwiftUI Components

Overview

A lightweight and reusable set of SwiftUI components for building custom dropdown menus and multi-select menus with smooth UI, dynamic filtering, and tag-like selections. These components are designed for iOS 17+ and can be easily integrated into SwiftUI projects.

The library is designed to be:

Simple to integrate
Easy to customize (colors, fonts, sizes, etc.)
Flexible enough to fit any SwiftUI project

📌 Features

✅ DropdownTextField – Single selection dropdown with search and optional “Add New” entry. ✅ MultiSelectionMenu – Multi-select dropdown with tag-style chips and search support. ✅ Customizable colors, fonts, and corner radii. ✅ Keyboard-aware dropdown list. ✅ “No match” and “Add new” behaviors built-in. ✅ Written purely in SwiftUI.

🚀 Installation

Swift Package Manager

In Xcode, open your project.
Go to File → Add Packages...
Enter the repository URL:

https://github.com/usamajavedswl/DropdownTextField.git

Choose the latest version and add it to your target. Then simply import it:

import DropdownTextField

🧩 Usage

Example – DropdownTextField

struct ExampleDropdown: View {
    @State private var searchText: String = ""
    @State private var isDropdownVisible: Bool = false
    
    let options = ["Apple", "Banana", "Orange", "Mango"]
    
    var body: some View {
        DropdownTextField(
            searchText: $searchText,
            isDropdownVisible: $isDropdownVisible,
            options: options,
            placeholder: "Select a fruit",
            addNew: true
        ){
            print("Dropdown tapped")
        }
        .padding()
    }
}

Example – MultiSelectionMenu

struct ExampleMultiSelect: View {
    @State private var isDropdownVisible: Bool = false
    @State private var selectedValues: [String] = []
    
    let options = ["Swift", "Kotlin", "Java", "Python", "JavaScript"]
    
    var body: some View {
        MultiSelectionMenu(
            isDropdownVisible: $isDropdownVisible,
            selectedValues: $selectedValues,
            options: options,
            placeholder: "Select languages",
            maxOptionsCount: 5,
            addNew: true
        ){
            print("Multi-selection tapped")
        }
        .padding()
    }
}

⚙️ Parameters