co-ref-field

Demo

Ver código

<co-ref-field label="Ejemplo"></co-ref-field>

API

Props

Prop	Atributo	Tipo	Default	Descripción
clearable	clearable	boolean	true
createLabel	create-label	string | undefined	—	If set, shows a "Create" button in the panel footer.
disabled	disabled	boolean	false
emptyMessage	empty-message	string	'No results found'
footerPrimaryLabel	footer-primary-label	string	'Ok'	Label for the primary footer button.
footerSecondaryLabel	footer-secondary-label	string	'New'	Label for the secondary footer button.
helperText	helper-text	string | undefined	—
iconLeft	icon-left	string | undefined	—
label	label	string | undefined	—
layout	layout	"horizontal" | "vertical"	'vertical'	Label layout: vertical (label above) or horizontal (label beside)
loading	loading	boolean	false	Whether the host is fetching data.
maxChips	max-chips	number	0	Max chips visible in multiple mode before the "+N" badge. `0` (default) = responsive: the trigger stays single-line and shows as many chips as actually fit its current width (ResizeObserver-driven); the badge counts the rest. Set `> 0` to force a fixed cap instead.
multiple	multiple	boolean	false
options	options	string	'[]'	JSON array of options to display: RefFieldOption[]
panelTheme	panel-theme	"auto" | "dark" | "light"	'auto'	Panel color theme. 'auto' follows trigger, 'dark' forces dark panel, 'light' forces light.
placeholder	placeholder	string	'Select…'
required	required	boolean	false	Whether the field is required (renders a required marker on the label).
searchDebounce	search-debounce	number	350
searchPlaceholder	search-placeholder	string	'Search…'
searchable	searchable	boolean	true
secondaryLabel	secondary-label	string | undefined	—
selectedDisplay	selected-display	string	'[]'	JSON array of display items for selected values: RefFieldDisplayItem[]
showFooter	show-footer	boolean	false	Show footer buttons (same pattern as co-combobox).
size	size	"default" | "sm"	'default'	Size of the trigger. 'sm' reduces height to 32px.
status	status	"default" | "error" | "success" | "warning"	'default'
total	total	number	0	Total count of matching records from the API.
value	value	string	''	Selected value: single ID string or JSON array of IDs.

Eventos

Evento	Detail	Bubbles	Cancelable	Descripción
coChange	{ value: string | string[]; item: RefFieldOption; }	✓	✓
coClear	void	✓	✓
coClose	void	—	✓
coCreate	string	✓	✓
coFooterPrimary	void	✓	✓
coFooterSecondary	void	✓	✓
coLoadMore	void	✓	✓
coOpen	void	—	✓
coRemove	string	✓	✓
coSearch	string	✓	✓

Slots

Este componente no expone slots.

CSS Parts

Este componente no expone CSS parts.

CSS Custom Properties

Este componente no expone CSS custom properties.