# Select Facet

> Dropdown facet for single-select, multi-select, and mapped bundle option filtering.

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

# Select Facet

`Select Facet` renders a custom listbox-style dropdown. It can select one value or multiple values, and it can either send one query clause or expand an option into a mapped bundle.

## Authoring Structure

```text
Select Facet
└── Select 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 | `tag` | `div` | Root wrapper tag. |
| Settings | `default_label` | `Select option...` | Trigger label and built-in clear option label. |
| Mode groups | mode-specific props | varies | See [Argument Modes](../argument-modes). |
| Styling | `class`, `trigger_class`, `trigger_label_class`, `content_class`, `item_class` | component defaults | Classes for the dropdown shell and items. |

## Option Props

| Group | Prop | Default | Meaning |
| --- | --- | --- | --- |
| Content | `value` | empty | Sent value in single-argument mode. |
| Content | `label` | `Option Label` | Visible option 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 | `is_default` | `false` | Initial selected option when no restored value exists. |
| 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

- The root stores selected state in `data-ome-selected-value` and `data-ome-selected-values`.
- Single selection uses one value. Multiple selection serializes multiple values for the same facet key.
- A built-in empty option uses `__ome-empty__` internally and clears the selection.
- In mapped bundle mode, option `query_value_mappings` must match parent `query_argument_mappings` by `mapping_key`.

## Example

```text
Select Facet:
- target = products
- argument_mode = default
- facet_key = category_name
- selection_mode = single

Option:
- value = shoes
- label = Shoes
```