# `PhoenixKitWeb.Live.Components.SearchableSelect`
[🔗](https://github.com/BeamLabEU/phoenix_kit/blob/v1.7.165/lib/phoenix_kit_web/live/components/searchable_select.ex#L1)

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)

---

*Consult [api-reference.md](api-reference.md) for complete listing*