inputs/DSSelectField

DSSelectField

inputs
since 1.2.0

Dropdown menu that shows options and updates a binding with the selected value.

iOSmacOS

Purpose

Use for selecting a single option from a list. Displays selected value or placeholder, opens native menu on tap.

Interactive Reference

Live showroom

Need the full visual surface?

Screenshots do not scale well across every component, state, and variant. For the real interactive reference, import the package and launch DSShowcaseRoot().

Best for exploring:

variants, states, categories, and real app examples in one place.

States

empty

No selection, shows placeholder in muted color

selected

Shows selected option title

error

Red border with error message below

Props

PropTypeDefaultDescription
labelString?nilOptional label above field
optionsreq[(title: String, value: T)]—Array of title-value pairs
selectionreqBinding<T?>—Binding to selected value
placeholderString"Select..."Shown when no selection
errorString?nilError message
hintString?nilHelper text below field
accessibilityLabelString?nilOptional accessibility label

Examples

Basic select

Simple dropdown with string options.

swift
@State var selectedCountry: String?

DSSelectField(
    label: "Country",
    options: [
        (title: "United States", value: "US"),
        (title: "Canada", value: "CA"),
        (title: "United Kingdom", value: "UK"),
    ],
    selection: $selectedCountry,
    placeholder: "Select country",
    hint: "Choose your country of residence"
)

With error state

Select field with validation error.

swift
DSSelectField(
    label: "Plan",
    options: planOptions,
    selection: $selectedPlan,
    error: selectedPlan == nil ? "Please select a plan" : nil
)

Usage Guidelines

  • Use for 3-15 options; consider alternative UI for longer lists
  • Provide clear, concise option labels
  • Use hint text to clarify what the selection affects
  • Show error state with validation messages

Related Components

TextFieldRadioGroupSegmentedControl