Build Dynamic Dropdowns with Swift Select Tag Generator
Creating dynamic, searchable, and taggable dropdowns can significantly improve form UX in both web and iOS apps. The Swift Select Tag Generator is a lightweight helper that produces customizable select dropdowns with tagging, multi-select, and async-data features. This guide shows how to use it, configure core features, and integrate it into a project with examples.
Key features
- Single & multi-select support
- Tagging (create new options from user input)
- Async data loading (remote suggestions)
- Keyboard navigation and accessibility basics
- Custom rendering for option items and tags
Installation
Assume the generator is available as a Swift package or JS module depending on target. For a Swift Package Manager (iOS/macOS) add the package URL to your project. For web projects, install via npm:
npm install swift-select-tag-generator
Or include the compiled script and stylesheet in your HTML.
Basic usage (web)
Include the script/CSS and initialize on an input element:
<input id=“tags” />
<script>
const generator = new SwiftSelectTagGenerator({
element: ’#tags’,
maxTags: 5,
placeholder: ‘Add tags…’,
allowCustom: true
});
generator.setOptions([
{ value: ‘swift’, label: ‘Swift’ },
{ value: ‘ios’, label: ‘iOS’ },
{ value: ‘web’, label: ‘Web’ }
]);
</script>
Basic usage (Swift/iOS)
For SwiftUI or UIKit, the generator exposes a view/controller wrapper:
let select = SwiftSelectTagGeneratorView(
placeholder: “Add tags…”,
maxTags: 5,
allowCustom: true
)
select.setOptions([
SelectOption(value: “swift”, label: “Swift”),
SelectOption(value: “ios”, label: “iOS”),
SelectOption(value: “web”, label: “Web”)
])
// present or embed select in your view hierarchy
Async suggestions
Load suggestions from an API as the user types:
generator.onInput(async (query) => {
const res = await fetch(</span><span class="token template-string" style="color: rgb(163, 21, 21);">/api/suggest?q=</span><span class="token template-string interpolation interpolation-punctuation" style="color: rgb(57, 58, 52);">${</span><span class="token template-string interpolation" style="color: rgb(57, 58, 52);">encodeURIComponent</span><span class="token template-string interpolation" style="color: rgb(57, 58, 52);">(</span><span class="token template-string interpolation">query</span><span class="token template-string interpolation" style="color: rgb(57, 58, 52);">)</span><span class="token template-string interpolation interpolation-punctuation" style="color: rgb(57, 58, 52);">}</span><span class="token template-string template-punctuation" style="color: rgb(163, 21, 21);">);
const items = await res.json();
generator.setOptions(items);
});
In Swift, use Combine or async/await to fetch and update options.
Custom rendering
Provide a renderer to control option appearance:
generator.renderOption = (option) => {
return </span><span class="token template-string" style="color: rgb(163, 21, 21);"><div class="option"> </span><span class="token template-string" style="color: rgb(163, 21, 21);"> <img src="</span><span class="token template-string interpolation interpolation-punctuation" style="color: rgb(57, 58, 52);">${</span><span class="token template-string interpolation">option</span><span class="token template-string interpolation" style="color: rgb(57, 58, 52);">.</span><span class="token template-string interpolation">icon</span><span class="token template-string interpolation interpolation-punctuation" style="color: rgb(57, 58, 52);">}</span><span class="token template-string" style="color: rgb(163, 21, 21);">" alt="" /> </span><span class="token template-string" style="color: rgb(163, 21, 21);"> <span></span><span class="token template-string interpolation interpolation-punctuation" style="color: rgb(57, 58, 52);">${</span><span class="token template-string interpolation">option</span><span class="token template-string interpolation" style="color: rgb(57, 58, 52);">.</span><span class="token template-string interpolation">label</span><span class="token template-string interpolation interpolation-punctuation" style="color: rgb(57, 58, 52);">}</span><span class="token template-string" style="color: rgb(163, 21, 21);"></span> </span><span class="token template-string" style="color: rgb(163, 21, 21);"> </div></span><span class="token template-string template-punctuation" style="color: rgb(163, 21, 21);">;
};
Accessibility
- Ensure input has ARIA attributes (role=“combobox”, aria-expanded).
- Announce option counts and selection changes to screen readers.
- Support arrow keys, Enter, and Escape for navigation.
Handling tags & values
- Retrieve selected values with generator.getValues() (array of values).
- Preload existing tags via setValues([…]).
- Validate tags before adding (dedupe, format).
Styling
Override CSS variables or classes to match your design system. Example variables: –tag-bg, –tag-color, –option-highlight.
Performance tips
- Debounce input for async calls (300ms).
- Virtualize long option lists.
- Limit DOM updates by diffing option arrays.
Example: form integration
Collect tags on submit:
form.addEventListener(‘submit’, (e) => {
e.preventDefault();
const tags = generator.getValues();
fetch(’/submit’, { method: ‘POST’, body: JSON.stringify({ tags }) });
});
Troubleshooting
- No suggestions: confirm option format {value,label}.
- Duplicate tags: enable dedupe or normalize input.
- Mobile keyboard overlapping dropdown: position dropdown with viewport-aware logic.
Conclusion
Swift Select Tag Generator simplifies building dynamic, accessible dropdowns with tagging and async data. Use customizable renderers, debounce network calls, and follow accessibility best practices to deliver a polished UX.