# SearchSelect Facet

> Searchable dropdown facet for single, multiple, and mapped bundle option filtering.

<!-- Sources: src/Components/Facets/SearchSelectFacet/SearchSelectFacet.php; src/Components/Facets/SearchSelectFacetOption/SearchSelectFacetOption.php; src/Components/Facets/Shared/FacetQueryProperties.php; client/src/components/search-select-facet/index.ts; client/src/domains/facets/adapters/search-select-facet-adapter.ts; tests/e2e/components/facets/search-select-facet.spec.ts; tests/e2e/components/facets/availability.spec.ts -->

# SearchSelect Facet

`SearchSelect Facet` is a searchable option selector. It is useful when the authored option set is large enough to need filtering inside the dropdown.

## Authoring Structure

```text
SearchSelect Facet
└── SearchSelect Facet Option
```

## Parent Props

| Group       | Prop                                                                                                          | Default            | Meaning                                                                                    |
| ----------- | ------------------------------------------------------------------------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------ |
| Settings    | `target`                                                                                                      | empty              | Shared target ID.                                                                          |
| Settings    | `argument_mode`                                                                                               | `default`          | Single argument mode.                                                                      |
| Settings    | `target_multiple_query_arguments`                                                                             | `false`            | Enables mapped bundle mode.                                                                |
| Settings    | `options_behavior`                                                                                            | `all`              | Availability behavior.                                                                     |
| Settings    | `show_counts`                                                                                                 | `false`            | Enables dynamic counts.                                                                    |
| Settings    | `selection_mode`                                                                                              | `single`           | `single` or `multiple`.                                                                    |
| Settings    | `placeholder`                                                                                                 | `Search...`        | Search input placeholder.                                                                  |
| Settings    | `default_label`                                                                                               | `Select option...` | Text shown when nothing is selected.                                                       |
| Mode groups | mode-specific props                                                                                           | varies             | See [Argument Modes](/facets/argument-modes).                                              |
| Styling     | `class`, `control_class`, `trigger_class`, `input_class`, `content_class`, `listbox_class`, `selection_class` | component defaults | Classes for the searchable select shell, popup, internal listbox, and selected-value text. |

## Option Props

| Group                | Prop                           | Default            | Meaning                                                |
| -------------------- | ------------------------------ | ------------------ | ------------------------------------------------------ |
| Content              | `value`                        | empty              | Sent value in single-argument mode.                    |
| Content              | `label`                        | `Option Label`     | Visible label, search text, and pill label.            |
| Metadata             | `key`, `value`                 | empty              | Optional rows for custom JavaScript integrations.      |
| Query Value Mappings | `mapping_key`, `value`         | empty              | Values used when parent mapped bundle mode is enabled. |
| Settings             | `disabled`                     | `false`            | Prevents selection.                                    |
| Settings             | `used_with_multiple_arguments` | `false`            | Switches option authoring to query value mappings.     |
| Settings             | `count_display`                | `inline`           | Inline count text or separate count span.              |
| Styling              | `class`, span count classes    | component defaults | Option and count classes.                              |

## Runtime Notes

- Public `ome:search-select:open`, `ome:search-select:close`, `ome:search-select:input`, and `ome:search-select:change` payloads and examples are documented in the [Facet Events API](/facets/custom-events).
- The root stores selected state with `data-ome-selected-value` and `data-ome-selected-values`.
- `selection_mode = multiple` renders multiple selected values as removable selections.
- SearchSelect uses the shared search-select runtime plus facet-specific query binding.
- The popup contains a search input and an internal `listbox`. Older custom markup that places options directly in the popup is migrated into that listbox at runtime for compatibility.
- SearchSelect options do not expose an authored `is_default` prop in the current PHP component.

## CSS Custom Properties

| Property                                | Default   | Meaning                                                |
| --------------------------------------- | --------- | ------------------------------------------------------ |
| `--ome-search-select-placeholder-color` | `#64748b` | Placeholder text color for the search input.           |
| `--ome-search-select-empty-color`       | `#475569` | Empty-selection text color when no option is selected. |

## Example

```text
SearchSelect Facet:
- target = posts
- argument_mode = default
- facet_key = name
- placeholder = Search by slug

Option:
- value = beta-bar
- label = Beta Bar Post
```