SelectBoxGroup

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

Import

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

Props

Props for SelectBoxGroup in @proyecto-viviana/ui
Prop	Type	Default	Description
`children`*	JSX.Element \| ((item: T) => JSX.Element)	—	The SelectBox elements contained within the SelectBoxGroup.
`orientation`	'horizontal' \| 'vertical'	`'vertical'`	The layout direction of the content in each SelectBox.
`isDisabled`	false \| true	—	Whether the SelectBoxGroup is disabled.
`styles`	StyleString	—	Spectrum-defined generated classes.
`UNSAFE_className`	string	—	Additional CSS class name. Use only as a last resort.
`UNSAFE_style`	JSX.CSSProperties	—	Additional inline styles. Use only as a last resort.
`class`	string	—	Backward-compatible class alias. Prefer UNSAFE_className for S2 parity.
`slot`	string	—	Slot name when used in a Spectrum context.
`ref`	HTMLDivElement \| ((el: HTMLDivElement) => void) \| { current?: HTMLDivElement \| null \| undefined; }	—	Ref for the underlying listbox element.
`id`	string	—	An ID for the listbox. solidaria
`onBlur`	(e: FocusEvent) => void	—	Handler called when focus moves out of the listbox. solidaria
`onFocus`	(e: FocusEvent) => void	—	Handler called when focus moves into the listbox. solidaria
`onSelectionChange`	(keys: "all" \| Set<Key>) => void	—	Handler called when selection changes. solidaria-components
`aria-describedby`	string	—	The ID of an element that describes the listbox. solidaria
`aria-label`	string	—	An accessible label for the listbox when no visible label is provided. solidaria
`aria-labelledby`	string	—	The ID of an element that labels the listbox. solidaria
`onFocusChange`	(isFocused: boolean) => void	—	Handler called when the focus state changes. solidaria
`selectionMode`	'none' \| 'single' \| 'multiple'	—	The selection mode. solidaria-components
`disallowEmptySelection`	false \| true	—	Whether Escape and other collection-level interactions may clear the selection. This is an ARIA behavior override and does not change whether an option press may toggle the final selected item. solidaria
`selectedKeys`	"all" \| Iterable<Key>	—	Currently selected keys (controlled). solidaria-components
`defaultSelectedKeys`	"all" \| Iterable<Key>	—	Default selected keys (uncontrolled). solidaria-components
`items`*	CollectionEntry<T>[]	—	The items to render in the listbox. solidaria-components
`label`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	The label for the listbox. solidaria
`onAction`	(key: Key) => void	—	Handler called when an item is activated (pressed). solidaria
`shouldFocusWrap`	false \| true	—	Whether focus should automatically wrap around. solidaria
`disallowTypeAhead`	false \| true	`false`	Whether type-to-select is disabled. solidaria
`selectionBehavior`	'toggle' \| 'replace'	—	The selection behavior (toggle vs replace). solidaria-components
`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
`disabledBehavior`	'all' \| 'selection'	—	Whether disabled items can still receive focus. solidaria-components
`renderEmptyState`	() => JSX.Element	—	A function to render when the listbox is empty. solidaria-components
`dragAndDropHooks`	DragAndDropHooks<T>	—	Drag and drop hooks from `useDragAndDrop`. solidaria-components
`isVirtualized`	false \| true	—	Whether the listbox uses virtual scrolling. solidaria
`isLoading`	false \| true	—	Whether additional items are currently loading. solidaria-components
`keyboardDelegate`	KeyboardDelegate	—	An optional keyboard delegate implementation for type to select, to override the default. solidaria
`layoutDelegate`	LayoutDelegate	—	A delegate object that provides layout information for items in the collection. By default this uses the DOM, but this can be overridden to implement things like virtualized scrolling. solidaria
`shouldSelectOnPressUp`	false \| true	—	Whether selection should occur on press up. solidaria
`direction`	'ltr' \| 'rtl'	`"ltr"`	The text direction, used to resolve the horizontal navigation axis. In a horizontal listbox, RTL flips Left/Right (Right=previous, Left=next). solidaria
`hasMore`	false \| true	—	Whether there are more items to load. solidaria-components
`onLoadMore`	() => void \| Promise<void>	—	Called when the load more sentinel becomes visible. solidaria-components
`shouldFocusOnHover`	false \| true	—	Whether to focus items on hover. solidaria
`shouldUseVirtualFocus`	false \| true	—	Whether options should use virtual focus instead of receiving DOM focus. solidaria
`slots`	Record<string, Partial<ListBoxProps<T>>>	—	Slot definitions provided through ListBoxContext. solidaria-components
`linkBehavior`	'none' \| 'selection' \| 'action' \| 'override'	—	The behavior of links in the collection. solidaria
`UNSTABLE_itemBehavior`	'selection' \| 'action'	—	Unstable upstream override that forces items with actions to prefer selection or action behavior. solidaria
`shouldSelectOnFocus`	false \| true	`true`	Whether keyboard focus movement should also update selection in single selection mode. solidaria
`escapeKeyBehavior`	'none' \| 'clearSelection'	`"clearSelection"`	Whether pressing the Escape key should clear selection in the listbox or not. Most experiences should not modify this option as it eliminates a keyboard user's ability to easily clear selection. Only use if the escape key is being handled externally or should not trigger selection clearing contextually. solidaria

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

SelectBox props

Props for SelectBox in @proyecto-viviana/ui
Prop	Type	Default	Description
`id`*	Key	—	The unique id of the SelectBox.
`children`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	The contents of the SelectBox.
`styles`	StyleString	—	Spectrum-defined generated classes.
`UNSAFE_className`	string	—	Additional CSS class name. Use only as a last resort.
`UNSAFE_style`	JSX.CSSProperties	—	Additional inline styles. Use only as a last resort.
`class`	string	—	Backward-compatible class alias. Prefer UNSAFE_className for S2 parity.
`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 option element. 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
`isVirtualized`	false \| true	—	Whether the option is contained in a virtual scrolling listbox. solidaria
`item`	unknown	—	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/selectboxgroup/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.