MultiAutoCompleteOptionRow

The minimal default row presentation used by the multi-value suggestion picker.

MultiAutoCompleteOptionRow

View source ยท API reference

The default presentation

The parent supplies active and disabled styling around this label.

Accessibility
Performance 
<Panel bodyClass="p-3">
  <MultiAutoCompleteOptionRow
    :option="{label:'Accessibility',value:'a11y',keywords:[]}"
  />
  <MultiAutoCompleteOptionRow
    :option="{label:'Performance',value:'perf',keywords:[]}"
  />
</Panel>

Inside a token picker

Select more than one option to see the owning component manage state.

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

export interface MultiAutoCompleteOptionRowStates {}

const multiAutoCompleteOptionRowStatesTemplate = html`<MultiAutoCompleteInput
  id="multi-row-owner"
  label="Topics"
  rowComponent="MultiAutoCompleteOptionRow"
  :allowCustomValues="false"
  :options="[{label:'Accessibility',value:'a11y'},{label:'Performance',value:'perf'}]"
/>`

function createMultiAutoCompleteOptionRowStates(): MultiAutoCompleteOptionRowStates {
  return {}
}

const component = defineComponent<MultiAutoCompleteOptionRowStates>(
  multiAutoCompleteOptionRowStatesTemplate,
  {
    context: createMultiAutoCompleteOptionRowStates,
  },
)
const icons: Record<string, string> = {
  'lucide:x': lucide_x,
  'lucide:chevron-down': lucide_chevron_down,
}

createApp(
  {
    components: {
      MultiAutoCompleteOptionRowStates: component,

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

Behavior and accessibility

This component displays option.label. It does not own selection, filtering, focus or a click handler. Use rowComponent on MultiAutoCompleteInput to replace it with your own explicitly defined component.

API reference

MultiAutoCompleteOptionRow 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. Null displays no label.

active

RefOrValue<boolean>
Default
false

Accepted by the default row contract but not used in its template.

selected

string
Default
not set

Registered pass-through prop; the default row does not render a selected marker.

query

string
Default
not set

Registered pass-through prop; the default row does not highlight query text.

Composition

No slots. Registered by defineMultiAutoCompleteInputComponents. Its exported presentation interface is MultiAutoCompleteDefaultOptionRow; MultiAutoCompleteOptionRow is also the name of the internal resolved row-data type.