AutoCompleteOptionRow

The default presentation for one autocomplete suggestion, including an optional selected indicator.

AutoCompleteOptionRow

View source ยท API reference

Default row states

These previews isolate the row presentation. AutoCompleteInput supplies its option wrapper and keyboard interaction.

Europe Central
US East 
<Panel bodyClass="p-3">
  <AutoCompleteOptionRow
    :option="{label:'Europe Central',value:'eu-central',keywords:[]}"
    :selected="true"
  />
  <AutoCompleteOptionRow
    :option="{label:'US East',value:'us-east',keywords:[]}"
    :selected="false"
  />
</Panel>

Inside its owning control

The default row is already registered by the input family.

<RegorApp id="auto-complete-option-row-states-demo" src="./states.ts"/>
import {
  defineAutoCompleteInputComponents,
  defineFormInputField,
  defineIconComponents,
} from '@purestack/ts-components'
import { lucide_check, lucide_chevron_down } from '@purestack/ts-svg-icons'
import { createApp, defineComponent, html } from 'regor'

export interface AutoCompleteOptionRowStates {}

const autoCompleteOptionRowStatesTemplate = html`<AutoCompleteInput
  id="default-option-owner"
  label="Region"
  :options="[{label:'Europe Central',value:'eu'},{label:'US East',value:'us'}]"
  rowComponent="AutoCompleteOptionRow"
/>`

function createAutoCompleteOptionRowStates(): AutoCompleteOptionRowStates {
  return {}
}

const component = defineComponent<AutoCompleteOptionRowStates>(
  autoCompleteOptionRowStatesTemplate,
  {
    context: createAutoCompleteOptionRowStates,
  },
)
const icons: Record<string, string> = {
  'lucide:check': lucide_check,
  'lucide:chevron-down': lucide_chevron_down,
}

createApp(
  {
    components: {
      AutoCompleteOptionRowStates: component,

      ...defineAutoCompleteInputComponents(),
      ...defineFormInputField(),
      ...defineIconComponents((name) => icons[name] ?? ''),
    },
  },
  {
    selector: 'app#auto-complete-option-row-states-demo',
    template: html`<AutoCompleteOptionRowStates />`,
  },
)

Behavior and accessibility

The row is presentation only. It does not add role option, selection handlers or focus management; the owning input supplies those. selected shows a check icon. active and query are passed through for alternate renderers but are not used by this default template.

API reference

AutoCompleteOptionRow contract

Props below are the public template API. RefOrValue accepts a literal or a reactive ref; bind refs with a colon-prefixed attribute. Native attributes and events can be passed through the component root.

option

RefOrValue<ResolvedAutoCompleteOption | null>
Default
required

Resolved option object with label, value, keywords and optional disabled state. Null renders an empty label.

active

RefOrValue<boolean>
Default
false

Accepted row state; the default row does not use it.

selected

RefOrValue<boolean>
Default
false

Shows the selected check icon.

query

RefOrValue<string>
Default
not set

Accepted search query; the default row does not highlight or transform it.

Composition

No slots. Registered by defineAutoCompleteInputComponents. Include lucide:check in the icon resolver when rendering selected rows in a browser app.