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

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.
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.
• 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

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

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