co-option-list

This content is not available in your language yet.

Núcleo de lista de opciones y única fuente del look & behavior de los dropdowns Cobalt (co-ref-field, co-combobox, co-autocomplete, co-command-search) y de los pickers de celda de suite-v2. No renderiza trigger ni chrome de panel: eso lo aporta el host. Es 100% controlada — no muta value, emite eventos y el host decide. Recibe las opciones por la propiedad items (array de OptionListItem o su equivalente en JSON string).

Demo

Ver código

<co-option-list searchable items='[{"_id":"1","label":"Opción uno"},{"_id":"2","label":"Opción dos"},{"_id":"3","label":"Opción tres"}]'></co-option-list>

API

Props

Prop	Atributo	Tipo	Default	Descripción
`autoHighlight`	`auto-highlight`	`boolean`	`false`	Auto-resalta la primera fila navegable al montar y en cada cambio de items (paridad command-palette: tipear + Enter = primer resultado). Salta filas disabled vía nextActiveIndex.
`avatarShape`	`avatar-shape`	`"circle" \| "square"`	`'circle'`
`clearOptionLabel`	`clear-option-label`	`string`	`''`	Si se setea y hay selección, fila "quitar selección" al tope.
`emptyMessage`	`empty-message`	`string`	`'No results found'`
`hasMore`	`has-more`	`boolean`	`false`	Fallback cuando el host no conoce totales (⌘K). total>0 manda.
`highlightMatches`	`highlight-matches`	`boolean`	`false`	Resalta el match del término en los labels.
`highlightTerm`	`highlight-term`	`string`	`''`	Término externo para highlight (input en el host, p.ej. ⌘K).
`initialTerm`	`initial-term`	`string`	`''`	Pre-seed del término (modo convert de las celdas).
`items`	`items`	`OptionListItem[] \| string`	`'[]'`	JSON string o array de OptionListItem.
`loading`	`loading`	`boolean`	`false`
`multiple`	`multiple`	`boolean`	`false`
`removableItems`	`removable-items`	`boolean`	`false`	Botón remove por fila seleccionada en multiple (tags de combobox).
`searchDebounce`	`search-debounce`	`number`	`350`
`searchPlaceholder`	`search-placeholder`	`string`	`'Search…'`
`searchable`	`searchable`	`boolean`	`false`
`selectedAffordance`	`selected-affordance`	`"check" \| "deselect"`	`'check'`	Afford. del seleccionado: check (combobox/autocomplete) o X deselect (ref-field).
`selectedFirst`	`selected-first`	`boolean`	`false`	Partición selected-first (snapshot al llamar snapshotOrder()).
`selectedItems`	`selected-items`	`OptionListItem[] \| string`	`'[]'`	Display-items de la selección (para selected-first con ids fuera de página).
`total`	`total`	`number`	`0`	Total del server: deriva hasMore + hint "N more results".
`value`	`value`	`string`	`''`	Selección actual: id single o JSON array de ids.
`virtual`	`virtual`	`boolean`	`false`	Lista virtualizada (autocomplete/combobox). Ignora `group`.

Eventos

Evento	Detail	Bubbles	Cancelable
`coChange`	`{ value: string \| string[]; item: OptionListItem; }`	—	✓
`coClearSelection`	`void`	—	✓
`coLoadMore`	`void`	—	✓
`coRemoveItem`	`string`	—	✓
`coSearch`	`string`	—	✓

Slots

Slot	Descripción
`footer`	Footer del panel (normalmente <co-list-footer>).

CSS Parts

Part	Descripción
`::part(options)`
`::part(search)`

CSS Custom Properties

Este componente no expone CSS custom properties.