Skip to main content

PROYECTOVIVIANA

ComboBox

The props declared for ComboBox, generated from the types @proyecto-viviana/ui ships.

Import

import { ComboBox } from "@proyecto-viviana/ui";

Props

Props for ComboBox in @proyecto-viviana/ui
Prop	Type	Default	Description
`size`	'S' \| 'M' \| 'L' \| 'XL' \| 'sm' \| 'md' \| 'lg'	—	Not yet documented
`styles`	StyleString	—	Not yet documented
`UNSAFE_className`	string	—	Not yet documented
`UNSAFE_style`	JSX.CSSProperties	—	Not yet documented
`class`	string	—	Not yet documented
`label`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	The label for the combobox.
`description`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	Description text for assistive technology and form help.
`errorMessage`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	Error message text for assistive technology and validation feedback.
`isInvalid`	false \| true	—	Whether the current value is invalid.
`labelPosition`	'top' \| 'side'	—	Not yet documented
`labelAlign`	'start' \| 'end'	—	Not yet documented
`necessityIndicator`	'label' \| 'icon'	—	Not yet documented
`contextualHelp`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	Not yet documented
`prefix`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	An icon or text rendered before the input.
`direction`	'top' \| 'bottom'	—	Not yet documented
`align`	'start' \| 'end'	—	Not yet documented
`menuWidth`	number	—	Not yet documented
`shouldFlip`	false \| true	—	Not yet documented
`loadingState`	'idle' \| 'loading' \| 'loadingMore' \| 'sorting' \| 'filtering' \| 'error'	—	The current loading state of the ComboBox. Determines whether or not the progress circle should be shown.
`onLoadMore`	() => void \| Promise<void>	—	Handler that is called when more items should be loaded.
`children`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement \| ((item: T) => JSX.Element)	—	Not yet documented
`slot`	string	—	Not yet documented
`ref`	HTMLDivElement \| ((el: HTMLDivElement) => void) \| { current?: HTMLDivElement \| null \| undefined; }	—	Not yet documented
`id`	string	—	An ID for the combobox. solidaria
`onBlur`	(e: FocusEvent) => void	—	Handler called when focus moves away from the combobox input. solidaria
`onFocus`	(e: FocusEvent) => void	—	Handler called when focus moves to the combobox input. solidaria
`onSelectionChange`	(key: Key \| null) => void	—	Handler called when selection changes (single mode). solidaria-components
`aria-describedby`	string	—	The ID of an element that describes the combobox. solidaria
`aria-label`	string	—	An accessible label for the combobox when no visible label is provided. solidaria
`aria-labelledby`	string	—	The ID of an element that labels the combobox. solidaria
`isDisabled`	false \| true	—	Whether the combobox is disabled. solidaria
`autoFocus`	false \| true	—	Whether the combobox should be auto-focused. solidaria
`form`	string	—	The form owner for the combobox input. solidaria
`name`	string	—	The name of the combobox, used when submitting an HTML form. solidaria-components
`onFocusChange`	(isFocused: boolean) => void	—	Handler called when the focus state changes. solidaria
`selectionMode`	'single' \| 'multiple'	—	The selection mode for the combobox. solidaria-components
`selectedKeys`	Iterable<Key>	—	The currently selected keys (controlled, multiple mode). solidaria-components
`defaultSelectedKeys`	Iterable<Key>	—	The default selected keys (uncontrolled, multiple mode). solidaria-components
`items`	T[]	—	The items to render in the combobox. solidaria-components
`shouldFocusWrap`	false \| true	—	Whether focus should wrap from the last item to the first. solidaria
`getKey`	(item: T) => Key	—	Function to get the key from an item. solidaria-components
`getTextValue`	(item: T) => string	—	Function to get the text value from an item. solidaria-components
`getDisabled`	(item: T) => boolean	—	Function to check if an item is disabled. solidaria-components
`disabledKeys`	Iterable<Key>	—	Keys of disabled items. solidaria-components
`defaultOpen`	false \| true	—	Whether the combobox is open by default (uncontrolled). solidaria-components
`isOpen`	false \| true	—	Whether the combobox is open (controlled). solidaria-components
`onOpenChange`	(isOpen: boolean, trigger?: MenuTriggerAction) => void	—	Handler called when the open state changes. solidaria-components
`isReadOnly`	false \| true	—	Whether the combobox is read-only. solidaria
`isRequired`	false \| true	—	Whether the combobox is required. solidaria
`validationBehavior`	'aria' \| 'native'	`'native'`	Whether to use native HTML constraint validation or ARIA. solidaria
`placeholder`	string	—	Placeholder text for the input when no value is entered. solidaria
`autoComplete`	'none' \| 'list' \| 'inline' \| 'both'	`'list'`	Describes the type of autocomplete functionality the input should provide. solidaria
`allowsCustomValue`	false \| true	—	Whether to allow custom values that don't match any item. solidaria-components
`defaultItems`	T[]	—	The default items to render in the combobox when uncontrolled. solidaria-components
`selectedKey`	Key	—	The currently selected key (controlled, single mode). solidaria-components
`defaultSelectedKey`	Key	—	The default selected key (uncontrolled, single mode). solidaria-components
`onSelectionChangeMultiple`	(keys: Set<Key>) => void	—	Handler called when selection changes (multiple mode). solidaria-components
`inputValue`	string	—	The current input value (controlled). solidaria-components
`defaultInputValue`	string	—	The default input value (uncontrolled). solidaria-components
`onInputChange`	(value: string) => void	—	Handler called when input value changes. solidaria-components
`defaultFilter`	FilterFn	—	The filter function to use for filtering items. solidaria-components
`allowsEmptyCollection`	false \| true	—	Whether to allow an empty collection (show listbox even with no matches). solidaria-components
`menuTrigger`	'input' \| 'focus' \| 'manual'	—	The trigger mechanism for the combobox menu. solidaria-components
`formValue`	'key' \| 'text'	—	Controls what value is submitted in forms. - 'key': submit the selected key via hidden input (default) - 'text': submit the text input value When allowsCustomValue is true, formValue is forced to 'text'. solidaria-components
`slots`	Record<string, Partial<ComboBoxProps<T>>>	—	Slot definitions provided through ComboBoxContext. solidaria-components

Declared in packages/viviana-ui/src/combobox/index.tsx.

ComboBoxButton props

Props for ComboBoxButton in @proyecto-viviana/ui
Prop	Type	Default	Description
`class`	string	—	Not yet documented
`children`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement \| ((renderProps: ComboBoxButtonRenderProps) => JSX.Element)	—	The children of the button. solidaria-components
`slot`	string \| false	—	A slot name for the component. HTML `slot` may be `false` to omit. solidaria-components
`ref`	((el: HTMLButtonElement) => void) \| { current?: HTMLButtonElement \| null \| undefined; }	—	A ref to the underlying button element. solidaria-components

Declared in packages/viviana-ui/src/combobox/index.tsx.

ComboBoxInput props

Props for ComboBoxInput in @proyecto-viviana/ui
Prop	Type	Default	Description
`class`	string	—	Not yet documented
`children`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement \| ((renderProps: ComboBoxInputRenderProps) => JSX.Element)	—	The children of the input. solidaria-components
`slot`	string \| false	—	A slot name for the component. HTML `slot` may be `false` to omit. solidaria-components

Declared in packages/viviana-ui/src/combobox/index.tsx.

ComboBoxItem props

Props for ComboBoxItem in @proyecto-viviana/ui
Prop	Type	Default	Description
`class`	string	—	Not yet documented
`children`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement \| ((renderProps: ComboBoxOptionRenderProps) => JSX.Element)	—	The children of the option. A function may be provided to receive render props. solidaria-components
`slot`	string \| false	—	A slot name for the component. HTML `slot` may be `false` to omit. solidaria-components
`ref`	((el: HTMLElement) => void) \| { current?: HTMLElement \| null \| undefined; }	—	A ref to the underlying option element. solidaria-components
`id`*	Key	—	The unique key for the option. solidaria-components
`aria-label`	string	—	An accessible label for the option. solidaria
`isDisabled`	false \| true	—	Whether the option is disabled. solidaria
`onHoverStart`	(e: HoverEvent) => void	—	Handler called when hover starts. solidaria
`onHoverEnd`	(e: HoverEvent) => void	—	Handler called when hover ends. solidaria
`onHoverChange`	(isHovering: boolean) => void	—	Handler called when hover state changes. solidaria
`onAction`	() => void	—	Handler called when the option is activated. solidaria-components
`isVirtualized`	false \| true	—	Whether the option is contained in a virtual scrolling listbox. solidaria
`item`	NonNullable<T>	—	The item value. solidaria-components
`textValue`	string	—	The text value of the option (for typeahead). solidaria-components
`shouldSelectOnPressUp`	false \| true	—	Whether selection should occur on press up. solidaria
`optionId`	string	—	Optional DOM id for the option element. Defaults to the key. solidaria
`shouldFocusOnHover`	false \| true	—	Whether to focus the option on hover. solidaria
`shouldUseVirtualFocus`	false \| true	—	Whether the option should use virtual focus instead of receiving DOM focus. solidaria
`focus`	() => void	—	Function to focus the option, overriding the default DOM focus. Forwarded into `createSelectableItem` (`useSelectableItem` `focus`). solidaria
`allowsDifferentPressOrigin`	false \| true	—	Whether press-up may occur without the press starting on this option. solidaria

Declared in packages/viviana-ui/src/combobox/index.tsx.

ComboBoxListBox props

Props for ComboBoxListBox in @proyecto-viviana/ui
Prop	Type	Default	Description
`class`	string	—	Not yet documented
`children`	(item: T) => JSX.Element	—	The children of the listbox. A function may be provided to render each item. solidaria-components
`slot`	string \| false	—	A slot name for the component. HTML `slot` may be `false` to omit. solidaria-components
`renderEmptyState`	() => JSX.Element	—	A function to render when the listbox is empty. RAC ListBox `renderEmptyState`. solidaria-components
`isLoading`	false \| true	—	Whether additional items are currently loading. solidaria-components
`onLoadMore`	() => void \| Promise<void>	—	Called when the load more sentinel becomes visible. solidaria-components
`renderLoadMore`	() => JSX.Element \| undefined	—	Content to display in the load more sentinel row. solidaria-components
`loadMoreClass`	ClassNameOrFunction<{ isLoading: boolean; }>	—	CSS class for the load more sentinel row. solidaria-components

Declared in packages/viviana-ui/src/combobox/index.tsx.

ComboBoxOption props

Props for ComboBoxOption in @proyecto-viviana/ui
Prop	Type	Default	Description
`class`	string	—	Not yet documented
`children`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement \| ((renderProps: ComboBoxOptionRenderProps) => JSX.Element)	—	The children of the option. A function may be provided to receive render props. solidaria-components
`slot`	string \| false	—	A slot name for the component. HTML `slot` may be `false` to omit. solidaria-components
`ref`	((el: HTMLElement) => void) \| { current?: HTMLElement \| null \| undefined; }	—	A ref to the underlying option element. solidaria-components
`id`*	Key	—	The unique key for the option. solidaria-components
`aria-label`	string	—	An accessible label for the option. solidaria
`isDisabled`	false \| true	—	Whether the option is disabled. solidaria
`onHoverStart`	(e: HoverEvent) => void	—	Handler called when hover starts. solidaria
`onHoverEnd`	(e: HoverEvent) => void	—	Handler called when hover ends. solidaria
`onHoverChange`	(isHovering: boolean) => void	—	Handler called when hover state changes. solidaria
`onAction`	() => void	—	Handler called when the option is activated. solidaria-components
`isVirtualized`	false \| true	—	Whether the option is contained in a virtual scrolling listbox. solidaria
`item`	NonNullable<T>	—	The item value. solidaria-components
`textValue`	string	—	The text value of the option (for typeahead). solidaria-components
`shouldSelectOnPressUp`	false \| true	—	Whether selection should occur on press up. solidaria
`optionId`	string	—	Optional DOM id for the option element. Defaults to the key. solidaria
`shouldFocusOnHover`	false \| true	—	Whether to focus the option on hover. solidaria
`shouldUseVirtualFocus`	false \| true	—	Whether the option should use virtual focus instead of receiving DOM focus. solidaria
`focus`	() => void	—	Function to focus the option, overriding the default DOM focus. Forwarded into `createSelectableItem` (`useSelectableItem` `focus`). solidaria
`allowsDifferentPressOrigin`	false \| true	—	Whether press-up may occur without the press starting on this option. solidaria

Declared in packages/viviana-ui/src/combobox/index.tsx.

ComboBoxSection props

Props for ComboBoxSection in @proyecto-viviana/ui
Prop	Type	Default	Description
`children`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	Section contents, usually Header + Group/items. solidaria-components
`slot`	string \| false	—	A slot name for the component. HTML `slot` may be `false` to omit. solidaria-components
`ref`	((el: HTMLDivElement) => void) \| { current?: HTMLDivElement \| null \| undefined; }	—	Ref for the section element. solidaria-components
`id`	string	—	DOM id forwarded to the section element. solidaria-components
`aria-label`	string	—	Accessible name when the section has no naming header. solidaria-components
`aria-labelledby`	string	—	Id of the element that names the section. solidaria-components
`role`	false \| 'group' \| 'region' \| 'none' \| 'form' \| 'menu' \| 'listbox' \| 'tree' \| 'grid' \| 'dialog' \| 'button' \| 'alert' \| 'alertdialog' \| 'application' \| 'article' \| 'banner' \| 'cell' \| 'checkbox' \| 'columnheader' \| 'combobox' \| 'complementary' \| 'contentinfo' \| 'definition' \| 'directory' \| 'document' \| 'feed' \| 'figure' \| 'gridcell' \| 'heading' \| 'img' \| 'link' \| 'list' \| 'listitem' \| 'log' \| 'main' \| 'marquee' \| 'math' \| 'menubar' \| 'menuitem' \| 'menuitemcheckbox' \| 'menuitemradio' \| 'meter' \| 'navigation' \| 'note' \| 'option' \| 'presentation' \| 'progressbar' \| 'radio' \| 'radiogroup' \| 'row' \| 'rowgroup' \| 'rowheader' \| 'scrollbar' \| 'search' \| 'searchbox' \| 'separator' \| 'slider' \| 'spinbutton' \| 'status' \| 'switch' \| 'tab' \| 'table' \| 'tablist' \| 'tabpanel' \| 'term' \| 'textbox' \| 'timer' \| 'toolbar' \| 'tooltip' \| 'treegrid' \| 'treeitem'	—	ARIA role forwarded to the section element. solidaria-components

Declared in packages/viviana-ui/src/combobox/index.tsx.

Props marked solidaria or solidaria-components come from the headless layer underneath and behave the same in both registers. Components that wrap a DOM element also accept that element's standard attributes, which are left out here on purpose — listing them would bury the props that are actually ours.