Version: v9.1.0

ontario-search-result-item

Use ontario-search-result-item to render a semantic option row for search suggestions.

Example

<ontario-search-result-item label="Toronto" description="City in Ontario" value="Toronto"></ontario-search-result-item>

<OntarioSearchResultItem label="Toronto" description="City in Ontario" value="Toronto"></OntarioSearchResultItem>

<ontario-search-result-item
	[label]="'Toronto'"
	[description]="'City in Ontario'"
	[value]="'Toronto'"
></ontario-search-result-item>

<ontario-search-result-item value="Toronto">
	<div>
		<strong>Toronto</strong>
		<p>Population: 2.9M</p>
	</div>
</ontario-search-result-item>

Ontario Search Result Item renders a semantic option row for search suggestions.

For component guidance, see:

Property	Attribute	Description	Type	Default
`active`	`active`	Marks the option as active during keyboard navigation (parent-managed).	`boolean \| undefined`	`false`
`description`	`description`	Optional secondary text shown below the label.	`string \| undefined`	`undefined`
`disabled`	`disabled`	Marks the option as disabled and non-interactive.	`boolean \| undefined`	`false`
`href`	`href`	Optional URL to represent a navigable search result.	`string \| undefined`	`undefined`
`label`	`label`	Primary text for the suggestion row.	`string \| undefined`	`undefined`
`language`	`language`	Optional language prop to align with component API conventions.	`"en" \| "fr" \| undefined`	`'en'`
`segments`	`segments`	Ordered label segments used to render matched input text and completion text.	`Segment[] \| undefined`	`undefined`
`selected`	`selected`	Marks the option as selected (parent-managed).	`boolean \| undefined`	`false`
`value`	`value`	Optional value used by parent components during selection. Falls back to `label` when not set.	`string \| undefined`	`undefined`

Event	Description	Type
`itemSelected`	Emitted when a non-disabled option is selected via click.	`CustomEvent<{ label?: string \| undefined; value?: string \| undefined; href?: string \| undefined; }>`