Search Picker

import {
  SearchPicker,
  type SearchPickerItem,
} from "@/components/patterns/search-picker"

const frameworks: SearchPickerItem[] = [
  { value: "next", label: "Next.js" },
  { value: "remix", label: "Remix" },
  { value: "astro", label: "Astro" },
  { value: "sveltekit", label: "SvelteKit" },
  { value: "nuxt", label: "Nuxt" },
  { value: "gatsby", label: "Gatsby", disabled: true },
]

export default function SearchPickerDemo() {
  return (
    <SearchPicker
      items={frameworks}
      placeholder="Select a framework"
      searchPlaceholder="Search frameworks..."
      emptyText="No framework found."
      aria-label="Framework"
      className="w-56"
    />
  )
}

SearchPicker lets the user find and choose one item from a long list. On desktop it renders a suiss/ui Combobox: the field itself is the search input, and the list filters as the user types. On mobile (below 48rem, via useIsMobile) it renders a field-style button that shows the selected label. Tapping it opens a Drawer with a swipe handle and a Command menu whose search input receives focus. Choosing an item closes the drawer.

Items are passed as data. When any item has a group, items are listed under group headings in both presentations. Use it for countries, cities, users and other lists too long to scan; for short lists, use Picker.

Installation

CLI

$ pnpm dlx shadcn@latest add @esuiss/search-picker

Works in any project with a components.json. See Installation for the one-line registry setup. Or use the suiss/ui CLI:

$ pnpm dlx @esuiss/ui@latest add patterns search-picker

Manual

Install the dependencies and add the cn helper:

$ pnpm add @phosphor-icons/react

Add the pieces it builds on: Combobox, Command, Drawer, use-mobile.
Copy the source into components/patterns/search-picker.tsx:

components/patterns/search-picker.tsx

"use client"

import { CaretUpDownIcon } from "@phosphor-icons/react"
import * as React from "react"
import {
  Combobox,
  ComboboxCollection,
  ComboboxContent,
  ComboboxEmpty,
  ComboboxGroup,
  ComboboxInput,
  ComboboxItem,
  ComboboxLabel,
  ComboboxList,
  ComboboxSeparator,
} from "@/components/ui/combobox"

Update the import paths to match your project.

Usage

import { SearchPicker } from "@/components/patterns/search-picker"

<SearchPicker items={frameworks} placeholder="Select a framework" searchPlaceholder="Search frameworks..." emptyText="No framework found." aria-label="Framework" className="w-56" />

Each item in items has a value, a label, and an optional group and disabled flag. The SearchPickerItem type is exported.
The value is uncontrolled by default; use defaultValue, or value with onValueChange to control it. The value is null when nothing is selected.
searchPlaceholder, title, floating, showCloseButton and closeLabel affect only the mobile drawer. On desktop the field shows placeholder.
Mobile search matches against each item's label.

Examples

With value

Starts with a selected item through defaultValue.

import {
  SearchPicker,
  type SearchPickerItem,
} from "@/components/patterns/search-picker"

const frameworks: SearchPickerItem[] = [
  { value: "next", label: "Next.js" },
  { value: "remix", label: "Remix" },
  { value: "astro", label: "Astro" },
  { value: "sveltekit", label: "SvelteKit" },
  { value: "nuxt", label: "Nuxt" },
  { value: "gatsby", label: "Gatsby", disabled: true },
]

export default function SearchPickerWithValue() {
  return (
    <SearchPicker
      items={frameworks}
      placeholder="Select a framework"
      searchPlaceholder="Search frameworks..."
      emptyText="No framework found."
      aria-label="Framework"
      className="w-56"
      defaultValue="astro"
    />
  )
}

Grouped

Lists cities under group headings and filters across groups.

import {
  SearchPicker,
  type SearchPickerItem,
} from "@/components/patterns/search-picker"

const cities: SearchPickerItem[] = [
  { value: "nyc", label: "New York", group: "Americas" },
  { value: "chi", label: "Chicago", group: "Americas" },
  { value: "sao", label: "São Paulo", group: "Americas" },
  { value: "lon", label: "London", group: "Europe" },
  { value: "ber", label: "Berlin", group: "Europe" },
  { value: "ist", label: "Istanbul", group: "Europe" },
  { value: "tyo", label: "Tokyo", group: "Asia" },
  { value: "sin", label: "Singapore", group: "Asia" },
]

export default function SearchPickerGrouped() {
  return (
    <SearchPicker
      items={cities}
      placeholder="Select a city"
      searchPlaceholder="Search cities..."
      emptyText="No city found."
      aria-label="City"
      className="w-56"
    />
  )
}

With title

Shows a visible title at the top of the mobile drawer.

import {
  SearchPicker,
  type SearchPickerItem,
} from "@/components/patterns/search-picker"

const frameworks: SearchPickerItem[] = [
  { value: "next", label: "Next.js" },
  { value: "remix", label: "Remix" },
  { value: "astro", label: "Astro" },
  { value: "sveltekit", label: "SvelteKit" },
  { value: "nuxt", label: "Nuxt" },
  { value: "gatsby", label: "Gatsby", disabled: true },
]

export default function SearchPickerWithTitle() {
  return (
    <SearchPicker
      items={frameworks}
      placeholder="Select a framework"
      searchPlaceholder="Search frameworks..."
      emptyText="No framework found."
      aria-label="Framework"
      className="w-56"
      title="Framework"
    />
  )
}

With close button

Adds a close button to the mobile drawer.

import {
  SearchPicker,
  type SearchPickerItem,
} from "@/components/patterns/search-picker"

const frameworks: SearchPickerItem[] = [
  { value: "next", label: "Next.js" },
  { value: "remix", label: "Remix" },
  { value: "astro", label: "Astro" },
  { value: "sveltekit", label: "SvelteKit" },
  { value: "nuxt", label: "Nuxt" },
  { value: "gatsby", label: "Gatsby", disabled: true },
]

export default function SearchPickerWithCloseButton() {
  return (
    <SearchPicker
      items={frameworks}
      placeholder="Select a framework"
      searchPlaceholder="Search frameworks..."
      emptyText="No framework found."
      aria-label="Framework"
      className="w-56"
      showCloseButton
    />
  )
}

With close label

Uses a Cancel text button for the mobile close button.

import {
  SearchPicker,
  type SearchPickerItem,
} from "@/components/patterns/search-picker"

const frameworks: SearchPickerItem[] = [
  { value: "next", label: "Next.js" },
  { value: "remix", label: "Remix" },
  { value: "astro", label: "Astro" },
  { value: "sveltekit", label: "SvelteKit" },
  { value: "nuxt", label: "Nuxt" },
  { value: "gatsby", label: "Gatsby", disabled: true },
]

export default function SearchPickerWithCloseLabel() {
  return (
    <SearchPicker
      items={frameworks}
      placeholder="Select a framework"
      searchPlaceholder="Search frameworks..."
      emptyText="No framework found."
      aria-label="Framework"
      className="w-56"
      showCloseButton
      closeLabel="Cancel"
    />
  )
}

Disabled

Disables the field.

import {
  SearchPicker,
  type SearchPickerItem,
} from "@/components/patterns/search-picker"

const frameworks: SearchPickerItem[] = [
  { value: "next", label: "Next.js" },
  { value: "remix", label: "Remix" },
  { value: "astro", label: "Astro" },
  { value: "sveltekit", label: "SvelteKit" },
  { value: "nuxt", label: "Nuxt" },
  { value: "gatsby", label: "Gatsby", disabled: true },
]

export default function SearchPickerDisabled() {
  return (
    <SearchPicker
      items={frameworks}
      placeholder="Select a framework"
      searchPlaceholder="Search frameworks..."
      emptyText="No framework found."
      aria-label="Framework"
      className="w-56"
      disabled
    />
  )
}

Invalid

Shows the invalid style through aria-invalid.

import {
  SearchPicker,
  type SearchPickerItem,
} from "@/components/patterns/search-picker"

const frameworks: SearchPickerItem[] = [
  { value: "next", label: "Next.js" },
  { value: "remix", label: "Remix" },
  { value: "astro", label: "Astro" },
  { value: "sveltekit", label: "SvelteKit" },
  { value: "nuxt", label: "Nuxt" },
  { value: "gatsby", label: "Gatsby", disabled: true },
]

export default function SearchPickerInvalid() {
  return (
    <SearchPicker
      items={frameworks}
      placeholder="Select a framework"
      searchPlaceholder="Search frameworks..."
      emptyText="No framework found."
      aria-label="Framework"
      className="w-56"
      aria-invalid
    />
  )
}

Controlled

Owns the value in state with value and onValueChange.

import * as React from "react"
import {
  SearchPicker,
  type SearchPickerItem,
} from "@/components/patterns/search-picker"

const frameworks: SearchPickerItem[] = [
  { value: "next", label: "Next.js" },
  { value: "remix", label: "Remix" },
  { value: "astro", label: "Astro" },
  { value: "sveltekit", label: "SvelteKit" },
  { value: "nuxt", label: "Nuxt" },
  { value: "gatsby", label: "Gatsby", disabled: true },
]

function ControlledExample(props: React.ComponentProps<typeof SearchPicker>) {
  const [value, setValue] = React.useState<string | null>("next")

  return (
    <div className="flex flex-col items-start gap-2">
      <SearchPicker {...props} value={value} onValueChange={setValue} />
      <p className="text-sm text-muted-foreground">
        Selected: {value ?? "none"}
      </p>
    </div>
  )
}

export default function SearchPickerControlled() {
  return (
    <ControlledExample
      items={frameworks}
      placeholder="Select a framework"
      searchPlaceholder="Search frameworks..."
      emptyText="No framework found."
      aria-label="Framework"
      className="w-56"
    />
  )
}

Floating

Insets the mobile drawer from the screen edges.

import {
  SearchPicker,
  type SearchPickerItem,
} from "@/components/patterns/search-picker"

const frameworks: SearchPickerItem[] = [
  { value: "next", label: "Next.js" },
  { value: "remix", label: "Remix" },
  { value: "astro", label: "Astro" },
  { value: "sveltekit", label: "SvelteKit" },
  { value: "nuxt", label: "Nuxt" },
  { value: "gatsby", label: "Gatsby", disabled: true },
]

export default function SearchPickerFloating() {
  return (
    <SearchPicker
      items={frameworks}
      placeholder="Select a framework"
      searchPlaceholder="Search frameworks..."
      emptyText="No framework found."
      aria-label="Framework"
      className="w-56"
      floating
    />
  )
}

API Reference

SearchPicker

The complete searchable picker, rendered from the items array.

Prop	Type	Default	Description
`items`	`SearchPickerItem[]`	Required	The items to choose from, each with a `value`, `label`, and optional `group` and `disabled`.
`value`	`string \| null`	-	The selected value when controlled, or `null` for no selection.
`defaultValue`	`string \| null`	-	The initially selected value when uncontrolled.
`onValueChange`	`(value: string \| null) => void`	-	Called with the new value, or `null`, when the selection changes.
`placeholder`	`string`	-	Text shown when nothing is selected.
`searchPlaceholder`	`string`	`"Search..."`	Placeholder of the search input in the mobile drawer.
`emptyText`	`string`	`"No results found."`	Text shown when no item matches the search.
`title`	`string`	-	A visible heading for the mobile drawer. When omitted, the drawer title is visually hidden and falls back to `placeholder` or `aria-label`.
`disabled`	`boolean`	-	Disables the field.
`floating`	`boolean`	-	Insets the mobile drawer from the screen edges.
`showCloseButton`	`boolean`	`false`	Shows a close button in the mobile drawer.
`closeLabel`	`string`	-	Text for the mobile close button in place of the icon.
`id`	`string`	-	The ID of the input on desktop or the trigger button on mobile.
`className`	`string`	-	Classes applied to the input on desktop or the trigger button on mobile.
`aria-invalid`	`boolean`	-	Marks the field as invalid and applies the error style.
`aria-label`	`string`	-	The accessible name of the field.
`aria-describedby`	`string`	-	The ID of an element that describes the field.

Accessibility

On desktop the field has the combobox role and controls a listbox. The selected option has aria-selected, disabled options have aria-disabled, and groups are exposed as group elements named by their heading.
Escape closes the desktop list.
On mobile, the drawer is titled by title, placeholder or aria-label, and focus moves to the search input when it opens.

Notes

Styling hooks: data-slot="search-picker", search-picker-trigger (mobile) and search-picker-content. The mobile trigger has data-placeholder while nothing is selected, and the selected command item has data-checked.

iOS

import { SearchPicker, type SearchPickerItem } from "@/components/patterns/search-picker"

const frameworks: SearchPickerItem[] = [
  { value: "next", label: "Next.js" },
  { value: "remix", label: "Remix" },
  { value: "astro", label: "Astro" },
  { value: "sveltekit", label: "SvelteKit" },
  { value: "nuxt", label: "Nuxt" },
  { value: "gatsby", label: "Gatsby", disabled: true },
]

export function SearchPickerExample() {
  return (
    <SearchPicker items={frameworks} placeholder="Select a framework" searchPlaceholder="Search frameworks..." emptyText="No framework found." accessibilityLabel="Framework" className="w-56" />
  )
}

import EsuissUI
import SwiftUI

let searchPickerFrameworks = [
  SearchPickerItem(value: "next", label: "Next.js"),
  SearchPickerItem(value: "remix", label: "Remix"),
  SearchPickerItem(value: "astro", label: "Astro"),
  SearchPickerItem(value: "sveltekit", label: "SvelteKit"),
  SearchPickerItem(value: "nuxt", label: "Nuxt"),
  SearchPickerItem(value: "gatsby", label: "Gatsby", disabled: true),
]

struct SearchPickerDemo: View {
  var items = searchPickerFrameworks
  var placeholder: LocalizedStringKey = "Select a framework"
  var searchPlaceholder: LocalizedStringKey = "Search frameworks..."
  var emptyText: LocalizedStringKey = "No framework found."
  var label: LocalizedStringKey = "Framework"
  var title: LocalizedStringKey?
  var showCloseButton = false
  var closeLabel: LocalizedStringKey?

  @State private var value: String?

  init(
    value: String? = nil,
    items: [SearchPickerItem] = searchPickerFrameworks,
    placeholder: LocalizedStringKey = "Select a framework",
    searchPlaceholder: LocalizedStringKey = "Search frameworks...",
    emptyText: LocalizedStringKey = "No framework found.",
    label: LocalizedStringKey = "Framework",
    title: LocalizedStringKey? = nil,
    showCloseButton: Bool = false,
    closeLabel: LocalizedStringKey? = nil
  ) {
    _value = State(initialValue: value)
    self.items = items
    self.placeholder = placeholder
    self.searchPlaceholder = searchPlaceholder
    self.emptyText = emptyText
    self.label = label
    self.title = title
    self.showCloseButton = showCloseButton
    self.closeLabel = closeLabel
  }

  var body: some View {
    SearchPicker(
      items: items,
      selection: $value,
      placeholder: placeholder,
      searchPlaceholder: searchPlaceholder,
      emptyText: emptyText,
      title: title,
      showCloseButton: showCloseButton,
      closeLabel: closeLabel
    )
    .frame(width: 224)
    .accessibilityLabel(Text(label))
  }
}

import androidx.compose.foundation.layout.width
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.unit.dp
import com.esuiss.ui.patterns.SearchPicker
import com.esuiss.ui.patterns.SearchPickerItem

val searchPickerFrameworks = listOf(
    SearchPickerItem("next", "Next.js"),
    SearchPickerItem("remix", "Remix"),
    SearchPickerItem("astro", "Astro"),
    SearchPickerItem("sveltekit", "SvelteKit"),
    SearchPickerItem("nuxt", "Nuxt"),
    SearchPickerItem("gatsby", "Gatsby", enabled = false),
)

@Composable
fun SearchPickerDemo(
    initial: String? = null,
    items: List<SearchPickerItem> = searchPickerFrameworks,
    placeholder: String = "Select a framework",
    searchPlaceholder: String = "Search frameworks...",
    emptyText: String = "No framework found.",
    label: String = "Framework",
    title: String? = null,
    enabled: Boolean = true,
    invalid: Boolean? = null,
    floating: Boolean = false,
    showCloseButton: Boolean = false,
    closeLabel: String? = null,
) {
    var value by rememberSaveable { mutableStateOf(initial) }
    SearchPicker(
        items = items,
        value = value,
        onValueChange = { value = it },
        modifier = Modifier.width(224.dp).semantics { contentDescription = label },
        placeholder = placeholder,
        searchPlaceholder = searchPlaceholder,
        emptyText = emptyText,
        title = title,
        enabled = enabled,
        invalid = invalid,
        floating = floating,
        showCloseButton = showCloseButton,
        closeLabel = closeLabel,
    )
}

SearchPicker renders a field-style DrawerTrigger with the selected label and an up-down caret. Pressing it opens a Drawer with a search input and a scrollable list of options.

Typing filters options by label, case-insensitively. Options with a group are shown under a group heading. Choosing an option selects it, closes the drawer and clears the search. Use it when the list is too long to scan, such as countries, cities or frameworks.

Installation

$ pnpm dlx shadcn@latest add @esuiss-rn/search-picker

See Installation for the components.json setup. Or use the suiss/ui CLI:

$ pnpm dlx @esuiss/ui@latest add search-picker

$ pnpm dlx @esuiss/ui@latest add search-picker --platform swift

$ pnpm dlx @esuiss/ui@latest add search-picker --platform kotlin

The CLI also adds what it builds on: Drawer, Icon, Text.

Manual

Install the dependencies:

npx expo install cn phosphor-react-native react-native-svg

Add the pieces it builds on: Drawer, Icon, Text.
Copy the source into components/patterns/search-picker.tsx:

uniwind/components/patterns/search-picker.tsx

import { cn } from "cn"
import {
  CaretUpDownIcon,
  CheckIcon,
  MagnifyingGlassIcon,
} from "phosphor-react-native"
import * as React from "react"
import {
  Pressable,
  ScrollView,
  TextInput,
  useWindowDimensions,
  View,
} from "react-native"
import {
  Drawer,

Update the import paths to match your project.

Install the dependencies:

npx expo install cn nativewind phosphor-react-native react-native-svg

Add the pieces it builds on: Drawer, Icon, Text.
Copy the source into components/patterns/search-picker.tsx:

nativewind/components/patterns/search-picker.tsx

import { cn } from "cn"
import { cssInterop } from "nativewind"
import {
  CaretUpDownIcon,
  CheckIcon,
  MagnifyingGlassIcon,
} from "phosphor-react-native"
import * as React from "react"
import {
  Pressable,
  ScrollView,
  TextInput,
  useWindowDimensions,
  View,
} from "react-native"
import {

Update the import paths to match your project.

Install the dependencies:

npx expo install phosphor-react-native react-native-svg

Add the pieces it builds on: Drawer, Icon, Text.
Copy the source into components/patterns/search-picker.tsx:

stylesheet/components/patterns/search-picker.tsx

import {
  CaretUpDownIcon,
  CheckIcon,
  MagnifyingGlassIcon,
} from "phosphor-react-native"
import * as React from "react"
import {
  Pressable,
  ScrollView,
  type StyleProp,
  StyleSheet,
  TextInput,
  useWindowDimensions,
  View,
  type ViewStyle,
} from "react-native"

Update the import paths to match your project.

Target iOS 17 or later.
Add the Swift package to your app:

Package.swift

.package(url: "https://github.com/phosphor-icons/swift", from: "2.1.0")

Copy the theme files every view uses:

swift/Theme/Theme.swift

import SwiftUI
import UIKit

struct RGBA: Sendable {
  let red: CGFloat
  let green: CGFloat
  let blue: CGFloat
  let alpha: CGFloat

  init(_ hex: UInt32, _ alpha: CGFloat = 1) {
    red = CGFloat((hex >> 16) & 0xFF) / 255
    green = CGFloat((hex >> 8) & 0xFF) / 255
    blue = CGFloat(hex & 0xFF) / 255
    self.alpha = alpha
  }

swift/Theme/Tokens.swift

import SwiftUI

public enum EsuissColor {
  public static let background = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0x000000))
  public static let foreground = Color.adaptive(light: .init(0x1D1D1F), dark: .init(0xF5F5F7))
  public static let card = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0x1D1D1F))
  public static let cardForeground = Color.adaptive(light: .init(0x1D1D1F), dark: .init(0xF5F5F7))
  public static let popover = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0x1D1D1F))
  public static let popoverForeground = Color.adaptive(light: .init(0x1D1D1F), dark: .init(0xF5F5F7))
  public static let primary = Color.adaptive(light: .init(0x0071E3), dark: .init(0x2997FF))
  public static let primaryForeground = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0xFFFFFF))
  public static let secondary = Color.adaptive(light: .init(0x000000, 0.04), dark: .init(0xFFFFFF, 0.1))
  public static let secondaryForeground = Color.adaptive(light: .init(0x1D1D1F), dark: .init(0xF5F5F7))
  public static let muted = Color.adaptive(light: .init(0xF5F5F7), dark: .init(0x161617))
  public static let mutedForeground = Color.adaptive(light: .init(0x6E6E73), dark: .init(0xA1A1A6))
  public static let accent = Color.adaptive(light: .init(0x000000, 0.06), dark: .init(0xFFFFFF, 0.1))

Copy the source and every file it uses:

swift/Patterns/SearchPicker.swift

import PhosphorSwift
import SwiftUI

public struct SearchPickerItem: Hashable, Sendable, Identifiable {
  public var value: String
  public var label: String
  public var group: String?
  public var disabled: Bool

  public var id: String { value }

  public init(value: String, label: String, group: String? = nil, disabled: Bool = false) {
    self.value = value
    self.label = label
    self.group = group
    self.disabled = disabled

swift/Components/Button.swift

import SwiftUI

public struct VariantButtonStyle: ButtonStyle {
  public enum Variant: CaseIterable, Sendable {
    case `default`, outline, secondary, tinted, ghost, plain, destructive, link
  }

  public enum Size: CaseIterable, Sendable {
    case `default`, xs, sm, lg, xl, icon, iconXs, iconSm, iconLg, iconXl

    var height: CGFloat {
      switch self {
      case .xs, .iconXs: 24
      case .sm, .iconSm: 32
      case .default, .icon: 36
      case .lg, .iconLg: 44

swift/Components/ButtonGroup.swift

import SwiftUI

extension EnvironmentValues {
  @Entry var buttonGroup: Axis? = nil
  @Entry var buttonGroupSize: CGSize = .zero
}

enum ButtonGroupSpace: Hashable {
  case group
}

struct ButtonGroupFrame {
  let bounds: Anchor<CGRect>
  let outlined: Bool
}

swift/Components/Dialog.swift

import SwiftUI

extension View {
  public func dialog<Content: View>(
    isPresented: Binding<Bool>,
    @ViewBuilder content: @escaping () -> Content
  ) -> some View {
    modifier(
      CoverPresenter(isPresented: isPresented) { visible in
        CenteredStage(visible: visible, dismissible: true, content: content)
      }
    )
  }
}

struct CenteredStage<Content: View>: View {

swift/Components/Drawer.swift

import SwiftUI

extension View {
  public func drawer<Content: View>(
    isPresented: Binding<Bool>,
    detents: Set<PresentationDetent>? = nil,
    selection: Binding<PresentationDetent>? = nil,
    onDismiss: (() -> Void)? = nil,
    @ViewBuilder content: @escaping () -> Content
  ) -> some View {
    let binding = isPresented
    return sheet(isPresented: isPresented, onDismiss: onDismiss) {
      DrawerHost(detents: detents, selection: selection, content: content)
        .environment(\.overlayDismiss, OverlayDismiss { binding.wrappedValue = false })
    }
  }

swift/Components/Field.swift

import SwiftUI

extension EnvironmentValues {
  @Entry public var isInvalid = false
  @Entry var fieldInset = false
  @Entry var fieldGroupInset = false
  @Entry var fieldSetInset = false
}

extension View {
  public func invalid(_ isInvalid: Bool = true) -> some View {
    environment(\.isInvalid, isInvalid)
  }
}

public enum FieldOrientation: CaseIterable, Sendable {

swift/Components/Overlay.swift

import PhosphorSwift
import Observation
import SwiftUI

public enum PopupAlignment: Sendable, CaseIterable {
  case start, center, end
}

struct OverlayDismiss: Sendable {
  let action: @MainActor @Sendable () -> Void

  @MainActor func callAsFunction() {
    action()
  }
}

swift/Components/Separator.swift

import SwiftUI

public struct Separator: View {
  let orientation: Axis

  public init(_ orientation: Axis = .horizontal) {
    self.orientation = orientation
  }

  public var body: some View {
    Rectangle()
      .fill(EsuissColor.border)
      .frame(width: orientation == .vertical ? 1 : nil, height: orientation == .horizontal ? 1 : nil)
      .frame(maxWidth: orientation == .horizontal ? .infinity : nil, maxHeight: orientation == .vertical ? .infinity : nil)
      .accessibilityHidden(true)
  }

swift/Components/TextVariant.swift

import SwiftUI

public enum TextVariant: CaseIterable, Sendable {
  case `default`, h1, h2, h3, h4, p, blockquote, code, lead, large, small, muted

  var style: TextStyle {
    switch self {
    case .h1: .xl3
    case .h2: .xl2
    case .h3: .xl
    case .h4, .lead, .large: .lg
    case .code, .small, .muted: .sm
    default: .base
    }
  }

swift/Patterns/Adaptive.swift

import SwiftUI

extension EnvironmentValues {
  @Entry var patternCompact: Bool? = nil
}

@propertyWrapper
struct CompactLayout: DynamicProperty {
  @Environment(\.patternCompact) private var forced
  @Environment(\.horizontalSizeClass) private var sizeClass

  init() {}

  var wrappedValue: Bool {
    forced ?? (sizeClass != .regular)
  }

Add the files to your app target.

Set minSdk to 24 or higher and add the dependencies:

build.gradle.kts

implementation(platform("androidx.compose:compose-bom:2026.09.00"))
implementation("androidx.compose.foundation:foundation")
implementation("androidx.compose.ui:ui")
implementation("com.adamglin:phosphor-icon-android:1.0.0")

Copy the theme files every view uses:

kotlin/theme/Theme.kt

package com.esuiss.ui.theme

import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.Immutable
import androidx.compose.runtime.staticCompositionLocalOf
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.dropShadow
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.graphics.shadow.Shadow as DropShadow
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.style.LineHeightStyle
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.DpOffset

kotlin/theme/Tokens.kt

package com.esuiss.ui.theme

import androidx.compose.runtime.Immutable
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

@Immutable
data class Colors(
    val background: Color,
    val foreground: Color,
    val card: Color,
    val cardForeground: Color,
    val popover: Color,
    val popoverForeground: Color,
    val primary: Color,
    val primaryForeground: Color,

Copy the source and every file it uses:

kotlin/patterns/SearchPicker.kt

package com.esuiss.ui.patterns

import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.interaction.collectIsPressedAsState
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn

kotlin/components/Button.kt

package com.esuiss.ui.components

import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.interaction.collectIsPressedAsState
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.RowScope
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape

kotlin/components/ButtonGroup.kt

package com.esuiss.ui.components

import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.RowScope
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.CornerSize
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.DisposableEffect
import androidx.compose.runtime.Immutable

kotlin/components/Content.kt

package com.esuiss.ui.components

import androidx.compose.runtime.compositionLocalOf
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp

val LocalContentStyle = compositionLocalOf { TextStyle.Default }

val LocalContentColor = compositionLocalOf { Color.Unspecified }

val LocalIconSize = compositionLocalOf { 20.dp }

kotlin/components/Drawer.kt

package com.esuiss.ui.components

import androidx.compose.animation.core.CubicBezierEasing
import androidx.compose.animation.core.tween
import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.AnchoredDraggableDefaults
import androidx.compose.foundation.gestures.AnchoredDraggableState
import androidx.compose.foundation.gestures.DraggableAnchors
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.gestures.anchoredDraggable
import androidx.compose.foundation.gestures.animateTo
import androidx.compose.foundation.gestures.detectTapGestures
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.BoxWithConstraints
import androidx.compose.foundation.layout.Column

kotlin/components/Field.kt

package com.esuiss.ui.components

import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ColumnScope
import androidx.compose.foundation.layout.LayoutScopeMarker
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.RowScope
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.BasicText

kotlin/components/FormSupport.kt

package com.esuiss.ui.components

import android.provider.Settings
import androidx.compose.animation.core.CubicBezierEasing
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.text.selection.TextSelectionColors
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.drawWithContent
import androidx.compose.ui.geometry.Offset

kotlin/components/Haptics.kt

package com.esuiss.ui.components

import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.remember
import androidx.compose.runtime.staticCompositionLocalOf
import androidx.compose.ui.hapticfeedback.HapticFeedback
import androidx.compose.ui.hapticfeedback.HapticFeedbackType
import androidx.compose.ui.platform.LocalHapticFeedback

val LocalHapticsEnabled = staticCompositionLocalOf { true }

@Composable
fun ProvideHaptics(enabled: Boolean, content: @Composable () -> Unit) {
    CompositionLocalProvider(LocalHapticsEnabled provides enabled, content = content)
}

kotlin/components/Icon.kt

package com.esuiss.ui.components

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.graphics.takeOrElse
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.unit.Dp
import com.esuiss.ui.theme.EsuissTheme

@Composable
fun Icon(
    imageVector: ImageVector,

kotlin/components/Label.kt

package com.esuiss.ui.components

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.RowScope
import androidx.compose.foundation.text.BasicText
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import com.esuiss.ui.theme.EsuissTheme
import com.esuiss.ui.theme.Typography

kotlin/components/Overlay.kt

package com.esuiss.ui.components

import android.os.Build
import android.view.Window
import android.view.WindowManager
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.AnimatedVisibilityScope
import androidx.compose.animation.EnterExitState
import androidx.compose.animation.core.MutableTransitionState
import androidx.compose.animation.core.animateFloat
import androidx.compose.animation.core.tween
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.scaleIn
import androidx.compose.animation.scaleOut
import androidx.compose.animation.slideIn

kotlin/components/Select.kt

package com.esuiss.ui.components

import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.interaction.collectIsPressedAsState
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ColumnScope
import androidx.compose.foundation.layout.IntrinsicSize
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.heightIn

kotlin/components/Separator.kt

package com.esuiss.ui.components

import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.width
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.esuiss.ui.theme.EsuissTheme

@Composable
fun Separator(

kotlin/components/WheelPicker.kt

package com.esuiss.ui.components

import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.gestures.snapping.SnapPosition
import androidx.compose.foundation.gestures.snapping.rememberSnapFlingBehavior
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.RowScope
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.wrapContentWidth
import androidx.compose.foundation.lazy.LazyColumn

kotlin/patterns/DatePicker.kt

package com.esuiss.ui.patterns

import androidx.compose.foundation.border
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.widthIn
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.BasicText

Update the com.esuiss.ui package names to match your project.

Usage

import { SearchPicker } from "@/components/patterns/search-picker"

<SearchPicker items={frameworks} placeholder="Select a framework" searchPlaceholder="Search frameworks..." emptyText="No framework found." accessibilityLabel="Framework" className="w-56" />

Pass items as an array of { value, label, group?, disabled? }. The SearchPickerItem type is exported.

Use it uncontrolled with defaultValue, or controlled with value and onValueChange; the value is a string or null. emptyText shows when nothing matches.

Examples

With value

Starts with a preset selection via defaultValue.

iOS

Search Picker (with value) on iOS in light mode

import { SearchPicker, type SearchPickerItem } from "@/components/patterns/search-picker"

const frameworks: SearchPickerItem[] = [
  { value: "next", label: "Next.js" },
  { value: "remix", label: "Remix" },
  { value: "astro", label: "Astro" },
  { value: "sveltekit", label: "SvelteKit" },
  { value: "nuxt", label: "Nuxt" },
  { value: "gatsby", label: "Gatsby", disabled: true },
]

export function SearchPickerWithValueExample() {
  return (
    <SearchPicker items={frameworks} placeholder="Select a framework" searchPlaceholder="Search frameworks..." emptyText="No framework found." accessibilityLabel="Framework" className="w-56" defaultValue="astro" />
  )
}

import EsuissUI
import SwiftUI

struct SearchPickerWithValueExample: View {
  var body: some View {
    SearchPickerDemo(value: "astro")
  }
}

let searchPickerFrameworks = [
  SearchPickerItem(value: "next", label: "Next.js"),
  SearchPickerItem(value: "remix", label: "Remix"),
  SearchPickerItem(value: "astro", label: "Astro"),
  SearchPickerItem(value: "sveltekit", label: "SvelteKit"),
  SearchPickerItem(value: "nuxt", label: "Nuxt"),
  SearchPickerItem(value: "gatsby", label: "Gatsby", disabled: true),
]

struct SearchPickerDemo: View {
  var items = searchPickerFrameworks
  var placeholder: LocalizedStringKey = "Select a framework"
  var searchPlaceholder: LocalizedStringKey = "Search frameworks..."
  var emptyText: LocalizedStringKey = "No framework found."
  var label: LocalizedStringKey = "Framework"
  var title: LocalizedStringKey?
  var showCloseButton = false
  var closeLabel: LocalizedStringKey?

  @State private var value: String?

  init(
    value: String? = nil,
    items: [SearchPickerItem] = searchPickerFrameworks,
    placeholder: LocalizedStringKey = "Select a framework",
    searchPlaceholder: LocalizedStringKey = "Search frameworks...",
    emptyText: LocalizedStringKey = "No framework found.",
    label: LocalizedStringKey = "Framework",
    title: LocalizedStringKey? = nil,
    showCloseButton: Bool = false,
    closeLabel: LocalizedStringKey? = nil
  ) {
    _value = State(initialValue: value)
    self.items = items
    self.placeholder = placeholder
    self.searchPlaceholder = searchPlaceholder
    self.emptyText = emptyText
    self.label = label
    self.title = title
    self.showCloseButton = showCloseButton
    self.closeLabel = closeLabel
  }

  var body: some View {
    SearchPicker(
      items: items,
      selection: $value,
      placeholder: placeholder,
      searchPlaceholder: searchPlaceholder,
      emptyText: emptyText,
      title: title,
      showCloseButton: showCloseButton,
      closeLabel: closeLabel
    )
    .frame(width: 224)
    .accessibilityLabel(Text(label))
  }
}

import androidx.compose.foundation.layout.width
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.unit.dp
import com.esuiss.ui.patterns.SearchPicker
import com.esuiss.ui.patterns.SearchPickerItem

@Composable
fun SearchPickerWithValueExample() {
    SearchPickerDemo(initial = "astro")
}

val searchPickerFrameworks = listOf(
    SearchPickerItem("next", "Next.js"),
    SearchPickerItem("remix", "Remix"),
    SearchPickerItem("astro", "Astro"),
    SearchPickerItem("sveltekit", "SvelteKit"),
    SearchPickerItem("nuxt", "Nuxt"),
    SearchPickerItem("gatsby", "Gatsby", enabled = false),
)

@Composable
fun SearchPickerDemo(
    initial: String? = null,
    items: List<SearchPickerItem> = searchPickerFrameworks,
    placeholder: String = "Select a framework",
    searchPlaceholder: String = "Search frameworks...",
    emptyText: String = "No framework found.",
    label: String = "Framework",
    title: String? = null,
    enabled: Boolean = true,
    invalid: Boolean? = null,
    floating: Boolean = false,
    showCloseButton: Boolean = false,
    closeLabel: String? = null,
) {
    var value by rememberSaveable { mutableStateOf(initial) }
    SearchPicker(
        items = items,
        value = value,
        onValueChange = { value = it },
        modifier = Modifier.width(224.dp).semantics { contentDescription = label },
        placeholder = placeholder,
        searchPlaceholder = searchPlaceholder,
        emptyText = emptyText,
        title = title,
        enabled = enabled,
        invalid = invalid,
        floating = floating,
        showCloseButton = showCloseButton,
        closeLabel = closeLabel,
    )
}

Grouped

Cities grouped by country, with custom placeholders.

iOS

Search Picker (grouped) on iOS in light mode

import { SearchPicker, type SearchPickerItem } from "@/components/patterns/search-picker"

const cities: SearchPickerItem[] = [
  { value: "nyc", label: "New York", group: "Americas" },
  { value: "chi", label: "Chicago", group: "Americas" },
  { value: "sao", label: "São Paulo", group: "Americas" },
  { value: "lon", label: "London", group: "Europe" },
  { value: "ber", label: "Berlin", group: "Europe" },
  { value: "ist", label: "Istanbul", group: "Europe" },
  { value: "tyo", label: "Tokyo", group: "Asia" },
  { value: "sin", label: "Singapore", group: "Asia" },
]

export function SearchPickerGroupedExample() {
  return (
    <SearchPicker items={cities} placeholder="Select a city" searchPlaceholder="Search cities..." emptyText="No city found." accessibilityLabel="City" className="w-56" />
  )
}

import EsuissUI
import SwiftUI

struct SearchPickerGroupedExample: View {
  var body: some View {
    SearchPickerDemo(
      items: searchPickerCities,
      placeholder: "Select a city",
      searchPlaceholder: "Search cities...",
      emptyText: "No city found.",
      label: "City"
    )
  }
}

let searchPickerFrameworks = [
  SearchPickerItem(value: "next", label: "Next.js"),
  SearchPickerItem(value: "remix", label: "Remix"),
  SearchPickerItem(value: "astro", label: "Astro"),
  SearchPickerItem(value: "sveltekit", label: "SvelteKit"),
  SearchPickerItem(value: "nuxt", label: "Nuxt"),
  SearchPickerItem(value: "gatsby", label: "Gatsby", disabled: true),
]

let searchPickerCities = [
  SearchPickerItem(value: "nyc", label: "New York", group: "Americas"),
  SearchPickerItem(value: "chi", label: "Chicago", group: "Americas"),
  SearchPickerItem(value: "sao", label: "São Paulo", group: "Americas"),
  SearchPickerItem(value: "lon", label: "London", group: "Europe"),
  SearchPickerItem(value: "ber", label: "Berlin", group: "Europe"),
  SearchPickerItem(value: "ist", label: "Istanbul", group: "Europe"),
  SearchPickerItem(value: "tyo", label: "Tokyo", group: "Asia"),
  SearchPickerItem(value: "sin", label: "Singapore", group: "Asia"),
]

struct SearchPickerDemo: View {
  var items = searchPickerFrameworks
  var placeholder: LocalizedStringKey = "Select a framework"
  var searchPlaceholder: LocalizedStringKey = "Search frameworks..."
  var emptyText: LocalizedStringKey = "No framework found."
  var label: LocalizedStringKey = "Framework"
  var title: LocalizedStringKey?
  var showCloseButton = false
  var closeLabel: LocalizedStringKey?

  @State private var value: String?

  init(
    value: String? = nil,
    items: [SearchPickerItem] = searchPickerFrameworks,
    placeholder: LocalizedStringKey = "Select a framework",
    searchPlaceholder: LocalizedStringKey = "Search frameworks...",
    emptyText: LocalizedStringKey = "No framework found.",
    label: LocalizedStringKey = "Framework",
    title: LocalizedStringKey? = nil,
    showCloseButton: Bool = false,
    closeLabel: LocalizedStringKey? = nil
  ) {
    _value = State(initialValue: value)
    self.items = items
    self.placeholder = placeholder
    self.searchPlaceholder = searchPlaceholder
    self.emptyText = emptyText
    self.label = label
    self.title = title
    self.showCloseButton = showCloseButton
    self.closeLabel = closeLabel
  }

  var body: some View {
    SearchPicker(
      items: items,
      selection: $value,
      placeholder: placeholder,
      searchPlaceholder: searchPlaceholder,
      emptyText: emptyText,
      title: title,
      showCloseButton: showCloseButton,
      closeLabel: closeLabel
    )
    .frame(width: 224)
    .accessibilityLabel(Text(label))
  }
}

struct SearchPickerControlled: View {
  @State private var value: String? = "next"

  var body: some View {
    VStack(alignment: .leading, spacing: 8) {
      SearchPicker(
        items: searchPickerFrameworks,
        selection: $value,
        placeholder: "Select a framework",
        searchPlaceholder: "Search frameworks...",
        emptyText: "No framework found."
      )
      .frame(width: 224)
      .accessibilityLabel(Text("Framework"))
      Text(verbatim: "Selected: \(value ?? "none")")
        .textStyle(.sm)
        .foregroundStyle(EsuissColor.mutedForeground)
    }
  }
}

let group = StoryGroup(.patterns, "Search Picker", stories: [
  Story("Default") {
    SearchPickerDemo()
  },
  Story("WithValue") {
    SearchPickerDemo(value: "astro")
  },
  Story("Grouped") {
    SearchPickerDemo(
      items: searchPickerCities,
      placeholder: "Select a city",
      searchPlaceholder: "Search cities...",
      emptyText: "No city found.",
      label: "City"
    )
  },
  Story("WithTitle") {
    SearchPickerDemo(title: "Framework")
  },
  Story("WithCloseButton") {
    SearchPickerDemo(showCloseButton: true)
  },
  Story("WithCloseLabel") {
    SearchPickerDemo(showCloseButton: true, closeLabel: "Cancel")
  },
  Story("Disabled") {
    SearchPickerDemo()
      .disabled(true)
  },
  Story("Invalid") {
    SearchPickerDemo()
      .invalid()
  },
  Story("Controlled") {
    SearchPickerControlled()
  },
]

import androidx.compose.foundation.layout.width
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.unit.dp
import com.esuiss.ui.patterns.SearchPicker
import com.esuiss.ui.patterns.SearchPickerItem

@Composable
fun SearchPickerGroupedExample() {
    SearchPickerDemo(
        items = searchPickerCities,
        placeholder = "Select a city",
        searchPlaceholder = "Search cities...",
        emptyText = "No city found.",
        label = "City",
    )
}

val searchPickerFrameworks = listOf(
    SearchPickerItem("next", "Next.js"),
    SearchPickerItem("remix", "Remix"),
    SearchPickerItem("astro", "Astro"),
    SearchPickerItem("sveltekit", "SvelteKit"),
    SearchPickerItem("nuxt", "Nuxt"),
    SearchPickerItem("gatsby", "Gatsby", enabled = false),
)

val searchPickerCities = listOf(
    SearchPickerItem("nyc", "New York", group = "Americas"),
    SearchPickerItem("chi", "Chicago", group = "Americas"),
    SearchPickerItem("sao", "São Paulo", group = "Americas"),
    SearchPickerItem("lon", "London", group = "Europe"),
    SearchPickerItem("ber", "Berlin", group = "Europe"),
    SearchPickerItem("ist", "Istanbul", group = "Europe"),
    SearchPickerItem("tyo", "Tokyo", group = "Asia"),
    SearchPickerItem("sin", "Singapore", group = "Asia"),
)

@Composable
fun SearchPickerDemo(
    initial: String? = null,
    items: List<SearchPickerItem> = searchPickerFrameworks,
    placeholder: String = "Select a framework",
    searchPlaceholder: String = "Search frameworks...",
    emptyText: String = "No framework found.",
    label: String = "Framework",
    title: String? = null,
    enabled: Boolean = true,
    invalid: Boolean? = null,
    floating: Boolean = false,
    showCloseButton: Boolean = false,
    closeLabel: String? = null,
) {
    var value by rememberSaveable { mutableStateOf(initial) }
    SearchPicker(
        items = items,
        value = value,
        onValueChange = { value = it },
        modifier = Modifier.width(224.dp).semantics { contentDescription = label },
        placeholder = placeholder,
        searchPlaceholder = searchPlaceholder,
        emptyText = emptyText,
        title = title,
        enabled = enabled,
        invalid = invalid,
        floating = floating,
        showCloseButton = showCloseButton,
        closeLabel = closeLabel,
    )
}

With title

Adds a heading to the drawer with title.

iOS

Search Picker (with title) on iOS in light mode

import { SearchPicker, type SearchPickerItem } from "@/components/patterns/search-picker"

const frameworks: SearchPickerItem[] = [
  { value: "next", label: "Next.js" },
  { value: "remix", label: "Remix" },
  { value: "astro", label: "Astro" },
  { value: "sveltekit", label: "SvelteKit" },
  { value: "nuxt", label: "Nuxt" },
  { value: "gatsby", label: "Gatsby", disabled: true },
]

export function SearchPickerWithTitleExample() {
  return (
    <SearchPicker items={frameworks} placeholder="Select a framework" searchPlaceholder="Search frameworks..." emptyText="No framework found." accessibilityLabel="Framework" className="w-56" title="Framework" />
  )
}

import EsuissUI
import SwiftUI

struct SearchPickerWithTitleExample: View {
  var body: some View {
    SearchPickerDemo(title: "Framework")
  }
}

let searchPickerFrameworks = [
  SearchPickerItem(value: "next", label: "Next.js"),
  SearchPickerItem(value: "remix", label: "Remix"),
  SearchPickerItem(value: "astro", label: "Astro"),
  SearchPickerItem(value: "sveltekit", label: "SvelteKit"),
  SearchPickerItem(value: "nuxt", label: "Nuxt"),
  SearchPickerItem(value: "gatsby", label: "Gatsby", disabled: true),
]

struct SearchPickerDemo: View {
  var items = searchPickerFrameworks
  var placeholder: LocalizedStringKey = "Select a framework"
  var searchPlaceholder: LocalizedStringKey = "Search frameworks..."
  var emptyText: LocalizedStringKey = "No framework found."
  var label: LocalizedStringKey = "Framework"
  var title: LocalizedStringKey?
  var showCloseButton = false
  var closeLabel: LocalizedStringKey?

  @State private var value: String?

  init(
    value: String? = nil,
    items: [SearchPickerItem] = searchPickerFrameworks,
    placeholder: LocalizedStringKey = "Select a framework",
    searchPlaceholder: LocalizedStringKey = "Search frameworks...",
    emptyText: LocalizedStringKey = "No framework found.",
    label: LocalizedStringKey = "Framework",
    title: LocalizedStringKey? = nil,
    showCloseButton: Bool = false,
    closeLabel: LocalizedStringKey? = nil
  ) {
    _value = State(initialValue: value)
    self.items = items
    self.placeholder = placeholder
    self.searchPlaceholder = searchPlaceholder
    self.emptyText = emptyText
    self.label = label
    self.title = title
    self.showCloseButton = showCloseButton
    self.closeLabel = closeLabel
  }

  var body: some View {
    SearchPicker(
      items: items,
      selection: $value,
      placeholder: placeholder,
      searchPlaceholder: searchPlaceholder,
      emptyText: emptyText,
      title: title,
      showCloseButton: showCloseButton,
      closeLabel: closeLabel
    )
    .frame(width: 224)
    .accessibilityLabel(Text(label))
  }
}

import androidx.compose.foundation.layout.width
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.unit.dp
import com.esuiss.ui.patterns.SearchPicker
import com.esuiss.ui.patterns.SearchPickerItem

@Composable
fun SearchPickerWithTitleExample() {
    SearchPickerDemo(title = "Framework")
}

val searchPickerFrameworks = listOf(
    SearchPickerItem("next", "Next.js"),
    SearchPickerItem("remix", "Remix"),
    SearchPickerItem("astro", "Astro"),
    SearchPickerItem("sveltekit", "SvelteKit"),
    SearchPickerItem("nuxt", "Nuxt"),
    SearchPickerItem("gatsby", "Gatsby", enabled = false),
)

@Composable
fun SearchPickerDemo(
    initial: String? = null,
    items: List<SearchPickerItem> = searchPickerFrameworks,
    placeholder: String = "Select a framework",
    searchPlaceholder: String = "Search frameworks...",
    emptyText: String = "No framework found.",
    label: String = "Framework",
    title: String? = null,
    enabled: Boolean = true,
    invalid: Boolean? = null,
    floating: Boolean = false,
    showCloseButton: Boolean = false,
    closeLabel: String? = null,
) {
    var value by rememberSaveable { mutableStateOf(initial) }
    SearchPicker(
        items = items,
        value = value,
        onValueChange = { value = it },
        modifier = Modifier.width(224.dp).semantics { contentDescription = label },
        placeholder = placeholder,
        searchPlaceholder = searchPlaceholder,
        emptyText = emptyText,
        title = title,
        enabled = enabled,
        invalid = invalid,
        floating = floating,
        showCloseButton = showCloseButton,
        closeLabel = closeLabel,
    )
}

With close button

Shows a close button in the drawer.

iOS

Search Picker (with close button) on iOS in light mode

import { SearchPicker, type SearchPickerItem } from "@/components/patterns/search-picker"

const frameworks: SearchPickerItem[] = [
  { value: "next", label: "Next.js" },
  { value: "remix", label: "Remix" },
  { value: "astro", label: "Astro" },
  { value: "sveltekit", label: "SvelteKit" },
  { value: "nuxt", label: "Nuxt" },
  { value: "gatsby", label: "Gatsby", disabled: true },
]

export function SearchPickerWithCloseButtonExample() {
  return (
    <SearchPicker items={frameworks} placeholder="Select a framework" searchPlaceholder="Search frameworks..." emptyText="No framework found." accessibilityLabel="Framework" className="w-56" showCloseButton />
  )
}

import EsuissUI
import SwiftUI

struct SearchPickerWithCloseButtonExample: View {
  var body: some View {
    SearchPickerDemo(showCloseButton: true)
  }
}

let searchPickerFrameworks = [
  SearchPickerItem(value: "next", label: "Next.js"),
  SearchPickerItem(value: "remix", label: "Remix"),
  SearchPickerItem(value: "astro", label: "Astro"),
  SearchPickerItem(value: "sveltekit", label: "SvelteKit"),
  SearchPickerItem(value: "nuxt", label: "Nuxt"),
  SearchPickerItem(value: "gatsby", label: "Gatsby", disabled: true),
]

struct SearchPickerDemo: View {
  var items = searchPickerFrameworks
  var placeholder: LocalizedStringKey = "Select a framework"
  var searchPlaceholder: LocalizedStringKey = "Search frameworks..."
  var emptyText: LocalizedStringKey = "No framework found."
  var label: LocalizedStringKey = "Framework"
  var title: LocalizedStringKey?
  var showCloseButton = false
  var closeLabel: LocalizedStringKey?

  @State private var value: String?

  init(
    value: String? = nil,
    items: [SearchPickerItem] = searchPickerFrameworks,
    placeholder: LocalizedStringKey = "Select a framework",
    searchPlaceholder: LocalizedStringKey = "Search frameworks...",
    emptyText: LocalizedStringKey = "No framework found.",
    label: LocalizedStringKey = "Framework",
    title: LocalizedStringKey? = nil,
    showCloseButton: Bool = false,
    closeLabel: LocalizedStringKey? = nil
  ) {
    _value = State(initialValue: value)
    self.items = items
    self.placeholder = placeholder
    self.searchPlaceholder = searchPlaceholder
    self.emptyText = emptyText
    self.label = label
    self.title = title
    self.showCloseButton = showCloseButton
    self.closeLabel = closeLabel
  }

  var body: some View {
    SearchPicker(
      items: items,
      selection: $value,
      placeholder: placeholder,
      searchPlaceholder: searchPlaceholder,
      emptyText: emptyText,
      title: title,
      showCloseButton: showCloseButton,
      closeLabel: closeLabel
    )
    .frame(width: 224)
    .accessibilityLabel(Text(label))
  }
}

import androidx.compose.foundation.layout.width
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.unit.dp
import com.esuiss.ui.patterns.SearchPicker
import com.esuiss.ui.patterns.SearchPickerItem

@Composable
fun SearchPickerWithCloseButtonExample() {
    SearchPickerDemo(showCloseButton = true)
}

val searchPickerFrameworks = listOf(
    SearchPickerItem("next", "Next.js"),
    SearchPickerItem("remix", "Remix"),
    SearchPickerItem("astro", "Astro"),
    SearchPickerItem("sveltekit", "SvelteKit"),
    SearchPickerItem("nuxt", "Nuxt"),
    SearchPickerItem("gatsby", "Gatsby", enabled = false),
)

@Composable
fun SearchPickerDemo(
    initial: String? = null,
    items: List<SearchPickerItem> = searchPickerFrameworks,
    placeholder: String = "Select a framework",
    searchPlaceholder: String = "Search frameworks...",
    emptyText: String = "No framework found.",
    label: String = "Framework",
    title: String? = null,
    enabled: Boolean = true,
    invalid: Boolean? = null,
    floating: Boolean = false,
    showCloseButton: Boolean = false,
    closeLabel: String? = null,
) {
    var value by rememberSaveable { mutableStateOf(initial) }
    SearchPicker(
        items = items,
        value = value,
        onValueChange = { value = it },
        modifier = Modifier.width(224.dp).semantics { contentDescription = label },
        placeholder = placeholder,
        searchPlaceholder = searchPlaceholder,
        emptyText = emptyText,
        title = title,
        enabled = enabled,
        invalid = invalid,
        floating = floating,
        showCloseButton = showCloseButton,
        closeLabel = closeLabel,
    )
}

With close label

Labels the close button Cancel with closeLabel.

iOS

Search Picker (with close label) on iOS in light mode

import { SearchPicker, type SearchPickerItem } from "@/components/patterns/search-picker"

const frameworks: SearchPickerItem[] = [
  { value: "next", label: "Next.js" },
  { value: "remix", label: "Remix" },
  { value: "astro", label: "Astro" },
  { value: "sveltekit", label: "SvelteKit" },
  { value: "nuxt", label: "Nuxt" },
  { value: "gatsby", label: "Gatsby", disabled: true },
]

export function SearchPickerWithCloseLabelExample() {
  return (
    <SearchPicker items={frameworks} placeholder="Select a framework" searchPlaceholder="Search frameworks..." emptyText="No framework found." accessibilityLabel="Framework" className="w-56" showCloseButton closeLabel="Cancel" />
  )
}

import EsuissUI
import SwiftUI

struct SearchPickerWithCloseLabelExample: View {
  var body: some View {
    SearchPickerDemo(showCloseButton: true, closeLabel: "Cancel")
  }
}

let searchPickerFrameworks = [
  SearchPickerItem(value: "next", label: "Next.js"),
  SearchPickerItem(value: "remix", label: "Remix"),
  SearchPickerItem(value: "astro", label: "Astro"),
  SearchPickerItem(value: "sveltekit", label: "SvelteKit"),
  SearchPickerItem(value: "nuxt", label: "Nuxt"),
  SearchPickerItem(value: "gatsby", label: "Gatsby", disabled: true),
]

struct SearchPickerDemo: View {
  var items = searchPickerFrameworks
  var placeholder: LocalizedStringKey = "Select a framework"
  var searchPlaceholder: LocalizedStringKey = "Search frameworks..."
  var emptyText: LocalizedStringKey = "No framework found."
  var label: LocalizedStringKey = "Framework"
  var title: LocalizedStringKey?
  var showCloseButton = false
  var closeLabel: LocalizedStringKey?

  @State private var value: String?

  init(
    value: String? = nil,
    items: [SearchPickerItem] = searchPickerFrameworks,
    placeholder: LocalizedStringKey = "Select a framework",
    searchPlaceholder: LocalizedStringKey = "Search frameworks...",
    emptyText: LocalizedStringKey = "No framework found.",
    label: LocalizedStringKey = "Framework",
    title: LocalizedStringKey? = nil,
    showCloseButton: Bool = false,
    closeLabel: LocalizedStringKey? = nil
  ) {
    _value = State(initialValue: value)
    self.items = items
    self.placeholder = placeholder
    self.searchPlaceholder = searchPlaceholder
    self.emptyText = emptyText
    self.label = label
    self.title = title
    self.showCloseButton = showCloseButton
    self.closeLabel = closeLabel
  }

  var body: some View {
    SearchPicker(
      items: items,
      selection: $value,
      placeholder: placeholder,
      searchPlaceholder: searchPlaceholder,
      emptyText: emptyText,
      title: title,
      showCloseButton: showCloseButton,
      closeLabel: closeLabel
    )
    .frame(width: 224)
    .accessibilityLabel(Text(label))
  }
}

import androidx.compose.foundation.layout.width
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.unit.dp
import com.esuiss.ui.patterns.SearchPicker
import com.esuiss.ui.patterns.SearchPickerItem

@Composable
fun SearchPickerWithCloseLabelExample() {
    SearchPickerDemo(showCloseButton = true, closeLabel = "Cancel")
}

val searchPickerFrameworks = listOf(
    SearchPickerItem("next", "Next.js"),
    SearchPickerItem("remix", "Remix"),
    SearchPickerItem("astro", "Astro"),
    SearchPickerItem("sveltekit", "SvelteKit"),
    SearchPickerItem("nuxt", "Nuxt"),
    SearchPickerItem("gatsby", "Gatsby", enabled = false),
)

@Composable
fun SearchPickerDemo(
    initial: String? = null,
    items: List<SearchPickerItem> = searchPickerFrameworks,
    placeholder: String = "Select a framework",
    searchPlaceholder: String = "Search frameworks...",
    emptyText: String = "No framework found.",
    label: String = "Framework",
    title: String? = null,
    enabled: Boolean = true,
    invalid: Boolean? = null,
    floating: Boolean = false,
    showCloseButton: Boolean = false,
    closeLabel: String? = null,
) {
    var value by rememberSaveable { mutableStateOf(initial) }
    SearchPicker(
        items = items,
        value = value,
        onValueChange = { value = it },
        modifier = Modifier.width(224.dp).semantics { contentDescription = label },
        placeholder = placeholder,
        searchPlaceholder = searchPlaceholder,
        emptyText = emptyText,
        title = title,
        enabled = enabled,
        invalid = invalid,
        floating = floating,
        showCloseButton = showCloseButton,
        closeLabel = closeLabel,
    )
}

Disabled

A disabled field that cannot open the drawer.

iOS

Search Picker (disabled) on iOS in light mode

import { SearchPicker, type SearchPickerItem } from "@/components/patterns/search-picker"

const frameworks: SearchPickerItem[] = [
  { value: "next", label: "Next.js" },
  { value: "remix", label: "Remix" },
  { value: "astro", label: "Astro" },
  { value: "sveltekit", label: "SvelteKit" },
  { value: "nuxt", label: "Nuxt" },
  { value: "gatsby", label: "Gatsby", disabled: true },
]

export function SearchPickerDisabledExample() {
  return (
    <SearchPicker items={frameworks} placeholder="Select a framework" searchPlaceholder="Search frameworks..." emptyText="No framework found." accessibilityLabel="Framework" className="w-56" disabled />
  )
}

import EsuissUI
import SwiftUI

struct SearchPickerDisabledExample: View {
  var body: some View {
    SearchPickerDemo()
      .disabled(true)
  }
}

let searchPickerFrameworks = [
  SearchPickerItem(value: "next", label: "Next.js"),
  SearchPickerItem(value: "remix", label: "Remix"),
  SearchPickerItem(value: "astro", label: "Astro"),
  SearchPickerItem(value: "sveltekit", label: "SvelteKit"),
  SearchPickerItem(value: "nuxt", label: "Nuxt"),
  SearchPickerItem(value: "gatsby", label: "Gatsby", disabled: true),
]

struct SearchPickerDemo: View {
  var items = searchPickerFrameworks
  var placeholder: LocalizedStringKey = "Select a framework"
  var searchPlaceholder: LocalizedStringKey = "Search frameworks..."
  var emptyText: LocalizedStringKey = "No framework found."
  var label: LocalizedStringKey = "Framework"
  var title: LocalizedStringKey?
  var showCloseButton = false
  var closeLabel: LocalizedStringKey?

  @State private var value: String?

  init(
    value: String? = nil,
    items: [SearchPickerItem] = searchPickerFrameworks,
    placeholder: LocalizedStringKey = "Select a framework",
    searchPlaceholder: LocalizedStringKey = "Search frameworks...",
    emptyText: LocalizedStringKey = "No framework found.",
    label: LocalizedStringKey = "Framework",
    title: LocalizedStringKey? = nil,
    showCloseButton: Bool = false,
    closeLabel: LocalizedStringKey? = nil
  ) {
    _value = State(initialValue: value)
    self.items = items
    self.placeholder = placeholder
    self.searchPlaceholder = searchPlaceholder
    self.emptyText = emptyText
    self.label = label
    self.title = title
    self.showCloseButton = showCloseButton
    self.closeLabel = closeLabel
  }

  var body: some View {
    SearchPicker(
      items: items,
      selection: $value,
      placeholder: placeholder,
      searchPlaceholder: searchPlaceholder,
      emptyText: emptyText,
      title: title,
      showCloseButton: showCloseButton,
      closeLabel: closeLabel
    )
    .frame(width: 224)
    .accessibilityLabel(Text(label))
  }
}

import androidx.compose.foundation.layout.width
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.unit.dp
import com.esuiss.ui.patterns.SearchPicker
import com.esuiss.ui.patterns.SearchPickerItem

@Composable
fun SearchPickerDisabledExample() {
    SearchPickerDemo(enabled = false)
}

val searchPickerFrameworks = listOf(
    SearchPickerItem("next", "Next.js"),
    SearchPickerItem("remix", "Remix"),
    SearchPickerItem("astro", "Astro"),
    SearchPickerItem("sveltekit", "SvelteKit"),
    SearchPickerItem("nuxt", "Nuxt"),
    SearchPickerItem("gatsby", "Gatsby", enabled = false),
)

@Composable
fun SearchPickerDemo(
    initial: String? = null,
    items: List<SearchPickerItem> = searchPickerFrameworks,
    placeholder: String = "Select a framework",
    searchPlaceholder: String = "Search frameworks...",
    emptyText: String = "No framework found.",
    label: String = "Framework",
    title: String? = null,
    enabled: Boolean = true,
    invalid: Boolean? = null,
    floating: Boolean = false,
    showCloseButton: Boolean = false,
    closeLabel: String? = null,
) {
    var value by rememberSaveable { mutableStateOf(initial) }
    SearchPicker(
        items = items,
        value = value,
        onValueChange = { value = it },
        modifier = Modifier.width(224.dp).semantics { contentDescription = label },
        placeholder = placeholder,
        searchPlaceholder = searchPlaceholder,
        emptyText = emptyText,
        title = title,
        enabled = enabled,
        invalid = invalid,
        floating = floating,
        showCloseButton = showCloseButton,
        closeLabel = closeLabel,
    )
}