Skip to main content

PROYECTOVIVIANA

Select

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

Import

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

Props

Props for Select in @proyecto-viviana/ui
Prop	Type	Default	Description
`size`	'sm' \| 'md' \| 'lg'	—	The size of the select.
`class`	string	—	Additional CSS class name.
`label`	string	—	Label for the select.
`description`	string	—	Description for the select.
`errorMessage`	string	—	Error message when invalid.
`isInvalid`	false \| true	—	Whether the select is invalid.
`children`*	RenderChildren<SelectRenderProps>	—	The children of the component (compound components: SelectTrigger, SelectListBox). 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 outer select element. solidaria-components
`id`	string	—	An ID for the select. solidaria
`onBlur`	(e: FocusEvent) => void	—	Handler called when focus moves away from the select. solidaria
`onFocus`	(e: FocusEvent) => void	—	Handler called when focus moves to the select. solidaria
`onSelectionChange`	(key: Key \| null) => void	—	Handler called when selection changes. solidaria-components
`aria-describedby`	string	—	The ID of an element that describes the select. solidaria
`aria-label`	string	—	An accessible label for the select when no visible label is provided. solidaria
`aria-labelledby`	string	—	The ID of an element that labels the select. solidaria
`isDisabled`	false \| true	—	Whether the select is disabled. solidaria
`render`	(props: JSX.HTMLAttributes<HTMLDivElement>, renderProps: SelectRenderProps) => JSX.Element	—	Custom renderer for the outer select element. solidaria-components
`autoFocus`	false \| true	—	Whether the select should be auto-focused. solidaria
`form`	string	—	Associates the hidden native select with a form element by id. solidaria
`name`	string	—	The name of the select, used when submitting an HTML form. solidaria-components
`onFocusChange`	(isFocused: boolean) => void	—	Handler called when the focus state changes. solidaria
`selectionMode`	'single' \| 'multiple'	—	Selection mode. solidaria-components
`selectedKeys`	"all" \| Iterable<Key>	—	Currently selected keys (controlled, for multiple selection). solidaria-components
`defaultSelectedKeys`	"all" \| Iterable<Key>	—	Default selected keys (uncontrolled, for multiple selection). solidaria-components
`items`	T[]	—	The items to render in the select. solidaria-components
`disallowTypeAhead`	false \| true	`false`	Whether type-to-select is disabled. 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 select is open by default (uncontrolled). solidaria-components
`isOpen`	false \| true	—	Whether the select is open (controlled). solidaria-components
`onOpenChange`	(isOpen: boolean) => void	—	Handler called when the open state changes. solidaria-components
`validationState`	'valid' \| 'invalid'	—	Not yet documented solidaria
`isRequired`	false \| true	—	Whether the select is required. solidaria
`validationBehavior`	'aria' \| 'native'	—	Whether validation should use ARIA attributes or native browser validation. solidaria
`validate`	(value: unknown) => boolean \| string \| string[] \| null \| undefined	—	Custom validation function. solidaria
`placeholder`	string	—	Placeholder text when no option is selected. solidaria-components
`selectedKey`	Key	—	The currently selected key (controlled). solidaria-components
`defaultSelectedKey`	Key	—	The default selected key (uncontrolled). solidaria-components
`allowsEmptyCollection`	false \| true	`false`	Whether the select can open when its collection is empty. solidaria
`onSelectionChangeKeys`	(keys: "all" \| Set<Key>) => void	—	Handler called when selected keys change. solidaria-components

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

SelectListBox props

Props for SelectListBox in @proyecto-viviana/ui
Prop	Type	Default	Description
`class`	string	—	Additional CSS class name.
`children`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement \| ((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	—	Content to display when the listbox has no items. 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
`isInPopover`	false \| true	—	Whether the listbox is rendered inside an overlay popover. solidaria-components

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

SelectOption props

Props for SelectOption in @proyecto-viviana/ui
Prop	Type	Default	Description
`class`	string	—	Additional CSS class name.
`children`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement \| ((renderProps: SelectOptionRenderProps) => 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: HTMLDivElement) => void) \| { current?: HTMLDivElement \| null \| undefined; }	—	A ref callback/object for 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
`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/select/index.tsx.

SelectTrigger props

Props for SelectTrigger in @proyecto-viviana/ui
Prop	Type	Default	Description
`class`	string	—	Additional CSS class name.
`children`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement \| ((renderProps: SelectTriggerRenderProps) => JSX.Element)	—	The children of the trigger. 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: HTMLButtonElement) => void) \| { current?: HTMLButtonElement \| null \| undefined; }	—	A ref callback/object for the underlying trigger button element. solidaria-components

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

SelectValue props

Props for SelectValue in @proyecto-viviana/ui
Prop	Type	Default	Description
`class`	string	—	Additional CSS class name.
`children`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement \| ((renderProps: SelectValueRenderProps<T>) => JSX.Element)	—	The children of the value. 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
`placeholder`	string	—	Placeholder text when no option is selected. Overrides the placeholder from Select. solidaria-components

Declared in packages/viviana-ui/src/select/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.