co-ref-field

Demo

Ver código

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

API

Props

Prop	Atributo	Tipo	Default	Descripción
avatarShape	avatar-shape	"circle" | "square"	'circle'	Shape of the leading avatar (selected value + option rows). Defaults to 'circle' (people refs); use 'square' for company/workspace refs — it renders a smooth squircle. The avatar border can be themed via --co-avatar-border-color.
clearable	clearable	boolean	true
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	—
labelIcon	label-icon	string | undefined	—	Phosphor icon name rendered before the label text.
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" | "lg" | "md" | "s" | "sm"	'md'	Size of the trigger (mirrors co-input): s 28 / sm 32 / md 40 / lg 48. `'default'` is a deprecated alias of `'md'`, kept for backwards compatibility with the old `'default' | 'sm'` scale — use `'md'` instead.
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	—	✓
coFooterPrimary	void	✓	✓
coFooterSecondary	void	✓	✓
coLoadMore	void	✓	✓
coOpen	void	—	✓
coRemove	string	✓	✓
coSearch	string	✓	✓

Slots

Este componente no expone slots.

CSS Parts

Part	Descripción
::part(trigger-chevron)
::part(trigger-clear)
::part(trigger-placeholder)
::part(trigger-text)

CSS Custom Properties

Este componente no expone CSS custom properties.