calcite_combobox: Create a Combobox component

In calcite: Bindings to the Calcite Design System 'JavaScript' Component Library

Create a Combobox component

Description

Create a Combobox component

Usage

calcite_combobox(...)

Arguments

...	named attributes passed to htmltools::tag()

Details

Properties

The following properties are provided by this component:

Name	Attribute	Description	Values	Reflects to Attribute
allowCustomValues	allow-custom-values	When true, allows entry of custom values, which are not in the original set of items.	boolean	TRUE
clearDisabled	clear-disabled	When true, the value-clearing will be disabled.	boolean	TRUE
disabled	disabled	When true, interaction is prevented and the component is displayed with lower opacity.	boolean	TRUE
filteredItems	NA	Specifies the component's filtered items.	Check API reference	FALSE
filterProps	NA	Specifies the properties to match against when filtering. If not set, all properties will be matched (label, description, metadata, value).	Check API reference	FALSE
filterText	filter-text	Text for the component's filter input field.	string	TRUE
flipPlacements	NA	Specifies the component's fallback slotted content placement when it's initial placement has insufficient space available.	Check API reference	FALSE
form	form	The id of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any.	string	TRUE
label	label	Accessible name for the component.	string	FALSE
maxItems	max-items	Specifies the maximum number of calcite-combobox-items (including nested children) to display before displaying a scrollbar.	number	TRUE
messageOverrides	NA	Use this property to override individual strings used by the component.	Check API reference	FALSE
name	name	Specifies the name of the component. Required to pass the component's value on form submission.	string	TRUE
open	open	When true, displays and positions the component.	boolean	TRUE
overlayPositioning	overlay-positioning	Determines the type of positioning to use for the overlaid content. Using "absolute" will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. "fixed" should be used to escape an overflowing parent container, or when the reference element's position CSS property is "fixed".	"absolute" | "fixed"	TRUE
placeholder	placeholder	Specifies the placeholder text for the input.	string	FALSE
placeholderIcon	placeholder-icon	Specifies the placeholder icon for the input.	string	TRUE
placeholderIconFlipRtl	placeholder-icon-flip-rtl	When true, the icon will be flipped when the element direction is right-to-left ("rtl").	boolean	TRUE
readOnly	read-only	When true, the component's value can be read, but controls are not accessible and the value cannot be modified.	boolean	TRUE
required	required	When true and the component resides in a form, the component must have a value in order for the form to submit.	boolean	TRUE
scale	scale	Specifies the size of the component.	"l" | "m" | "s"	TRUE
selectedItems	NA	Specifies the component's selected items.	Check API reference	FALSE
selectionDisplay	selection-display	When selectionMode is "ancestors" or "multiple", specifies the display of multiple calcite-combobox-item selections, where: "all" displays all selections with individual calcite-chips, "fit" displays individual calcite-chips that scale to the component's size, including a non-closable calcite-chip, which provides the number of additional calcite-combobox-item selections not visually displayed, and "single" displays one calcite-chip with the total number of selections.	"all" | "fit" | "single"	TRUE
selectionMode	selection-mode	Specifies the selection mode of the component, where: "multiple" allows any number of selections, "single" allows only one selection, "single-persist" allows one selection and prevents de-selection, and "ancestors" allows multiple selections, but shows ancestors of selected items as selected, with only deepest children shown in chips.	"ancestors" | "multiple" | "single" | "single-persist"	TRUE
status	status	Specifies the status of the input field, which determines message and icons.	"idle" | "invalid" | "valid"	TRUE
validationIcon	validation-icon	Specifies the validation icon to display under the component.	boolean | string	TRUE
validationMessage	validation-message	Specifies the validation message to display under the component.	string	FALSE
validity	NA	The current validation state of the component.	Check API reference	FALSE
value	value	The component's value(s) from the selected calcite-combobox-item(s).	Check API reference	FALSE

Events

The following events are observed by shiny:

Event	Description
calciteComboboxBeforeClose	Fires when the component is requested to be closed, and before the closing transition begins.
calciteComboboxBeforeOpen	Fires when the component is added to the DOM but not rendered, and before the opening transition begins.
calciteComboboxChange	Fires when the selected item(s) changes.
calciteComboboxChipClose	Fires when a selected item in the component is closed via its calcite-chip.
calciteComboboxClose	Fires when the component is closed and animation is complete.
calciteComboboxFilterChange	Fires when text is added to filter the options list.
calciteComboboxOpen	Fires when the component is open and animation is complete.

Slots

The following slots are provided by this component:

Slot	Description
Default (unnamed)	A slot for adding calcite-combobox-items.

Value

an object of class calcite_component which is a subclass of shiny.tag

References

Official Documentation

Examples

calcite_combobox()

calcite documentation built on April 3, 2025, 7:11 p.m.