PhoenixKitWeb.Live.Components.SearchableSelect (phoenix_kit v1.7.102)

Copy Markdown View Source

Searchable select dropdown LiveComponent.

A reusable dropdown with a search input that filters options in real-time. Supports flat options and grouped options (like <optgroup>).

Usage — Flat options

<.live_component
  module={PhoenixKitWeb.Live.Components.SearchableSelect}
  id="country-select"
  name="user[country]"
  value={@selected_country}
  placeholder="Search countries..."
  options={[{"United States", "us"}, {"United Kingdom", "uk"}, {"Germany", "de"}]}
/>

Usage — Grouped options

<.live_component
  module={PhoenixKitWeb.Live.Components.SearchableSelect}
  id="region-select"
  name="bucket[region]"
  value={@selected_region}
  placeholder="Search regions..."
  grouped_options={[
    {"North America", [{"US East (N. Virginia) — us-east-1", "us-east-1"}, ...]},
    {"Europe", [{"Europe (Frankfurt) — eu-central-1", "eu-central-1"}, ...]}
  ]}
/>

Assigns

  • id (required) — unique component ID
  • name (required) — form field name for the hidden input
  • value (string) — currently selected value
  • options — flat list of {label, value} tuples
  • grouped_options — list of {group_label, [{label, value}]} tuples
  • placeholder — search input placeholder (default: "Search...")
  • label — optional label text above the input
  • required — whether the field is required (default: false)