co-combobox

This content is not available in your language yet.

Demo

Ver código

<co-combobox label="Ejemplo"></co-combobox>

API

Props

Prop	Atributo	Tipo	Default	Descripción
`clearable`	`clearable`	`boolean`	`true`	Show clear button when value is selected
`disabled`	`disabled`	`boolean`	`false`	Disabled state
`footerPrimaryLabel`	`footer-primary-label`	`string`	`'Ok'`	Label for the primary footer button
`footerSecondaryLabel`	`footer-secondary-label`	`string`	`'New Tags'`	Label for the secondary footer button
`helperText`	`helper-text`	`string \| undefined`	`—`	Helper text displayed below the combobox
`iconLeft`	`icon-left`	`string \| undefined`	`—`	Phosphor icon name for the left position
`label`	`label`	`string \| undefined`	`—`	Label text displayed above the combobox
`layout`	`layout`	`"horizontal" \| "vertical"`	`'vertical'`	Label layout: vertical (label above) or horizontal (label beside)
`multiple`	`multiple`	`boolean`	`true`	Whether multiple values can be selected
`options`	`options`	`ComboboxOption[] \| string \| string[]`	`'[]'`	Options to display in the dropdown (array of objects or strings)
`placeholder`	`placeholder`	`string`	`''`	Placeholder text. Empty by default — a literal "Placeholder" leaking into product UIs when the consumer forgets the prop is worse than no hint.
`required`	`required`	`boolean`	`false`	Whether the field is required (renders a required marker on the label).
`searchPlaceholder`	`search-placeholder`	`string`	`'Search'`	Search placeholder text
`searchable`	`searchable`	`boolean`	`false`	Enable search/filter in the dropdown
`secondaryLabel`	`secondary-label`	`string \| undefined`	`—`	Secondary label displayed on the right side
`showFooter`	`show-footer`	`boolean`	`false`	Show footer buttons (New Tags + Ok)
`size`	`size`	`"lg" \| "md" \| "s" \| "sm"`	`'md'`	Trigger size (mirrors co-input/co-select): s 28 / sm 32 / md 40 / lg 48
`status`	`status`	`"default" \| "error" \| "info" \| "success" \| "warning"`	`'default'`	Validation status
`value`	`value`	`string \| string[]`	`'[]'`	Currently selected values (multi-select)

Eventos

Evento	Detail	Bubbles	Cancelable	Descripción
`coChange`	`string[]`	✓	✓	Emitted when the selection changes
`coClear`	`void`	✓	✓	Emitted when the clear button is clicked
`coClose`	`void`	—	✓	Emitted when the dropdown closes
`coFooterPrimary`	`void`	✓	✓	Emitted when the primary footer button is clicked
`coFooterSecondary`	`void`	✓	✓	Emitted when the secondary footer button is clicked
`coOpen`	`void`	—	✓	Emitted when the dropdown opens

Slots

Este componente no expone slots.

CSS Parts

Part	Descripción
`::part(clear)`
`::part(dropdown)`
`::part(footer)`
`::part(helper)`
`::part(label)`
`::part(option)`
`::part(options)`
`::part(search)`
`::part(search-input)`
`::part(secondary-label)`
`::part(trigger)`
`::part(wrapper)`

CSS Custom Properties

Este componente no expone CSS custom properties.