React | Autocomplete | Made with Supernova

React

Is new design vision part implemented using new tokens?

Up to date

Storybook

React guidance

Source

GitHub code

Storybook failed to load. Please connect to the VPN to access.


                                                        
                                                        
                                                            import { useState } from 'react';
                                                        import { Select } from '@optimus-web/core';
                                                        
                                                        const MySelectComponent = () => {
                                                            const [selectedValue, setSelectedValue] = useState<InputValue>('');
                                                        
                                                            const selectOptions = [
                                                                { key: 'fujiyama', value: 'fujiyama', label: 'Fujiyama Hotel' },
                                                                { key: 'boomerang', value: 'boomerang', label: 'Boomerang Hotel' },
                                                                { key: 'le-grand-hotel', value: 'le-grand-hotel', label: 'Le Grand Hotel' },
                                                            ];
                                                        
                                                            return (
                                                                <Autocomplete
                                                                    value={selectedValue}
                                                                    label="Choose your property"
                                                                >
                                                                    {selectOptions.map((item: { key: string; value: string; label: string }) => (
                                                                    <DropdownItem key={item.key} value={item.value} label={item.label} />
                                                                )),}
                                                                </Autocomplete>
                                                            );
                                                        };

Name	Type	Default	Description
captionIconWithTooltip?	ReactNode		This optional property represents a caption icon with a tooltip. It can be any valid React node
children	ReactNode		A required node that represents the child elements of the select component
disabled?	boolean		An optional boolean that, if true, disables the select component
value?	InputValue		Sets the value for the input
error?	ReactNode		This optional property represents an error message for the field. It can be any valid React node
inline?	boolean		An optional boolean that, if true, makes the select component inline
insideCompoundField?	boolean		This optional boolean property indicates whether the field is inside a compound field or not
label?	ReactNode		This optional property represents the label of the field. It can be any valid React node
overlayMaxHeigh?	number	500	An optional number that specifies the maximum height of the dropdown list overlay
placeholder?	ReactNode		An optional node that displays a placeholder when the select component is empty
readOnly?	boolean		This optional boolean property indicates whether the field is read-only or not
required?	boolean		This optional boolean property indicates whether the field is required or not
size?	SizeType		An optional SizeType (not defined in the provided code) that could be used to control the size of the select component
sizeToAnchor?	boolean	true	An optional boolean that, if true, sizes the dropdown list to the width of the select component
suffix?	ReactNode		An optional node that displays a suffix
virtualized?	boolean		An optional boolean that, if true, indicates that the options are virtualized for performance
name?	string		An optional string that could be used as the name of the select component
defaultItemHeight?	number		An optional number that specifies the default height of each item in the dropdown list
valueMapper?	(c: ReactElement) => InputValue		An optional function that maps each child element to a value
searchValueMapper?	<T extends Labeled>(c: ReactElement<T>) => string		An optional function that maps each child element to a search value
customSearch?	<T extends Labeled>(c: ReactElement<T>, searchValue: string) => boolean		An optional function that customizes the search functionality
displayMapper?	<T extends Labeled>(c: ReactElement<T>) => ReactNode		An optional function that maps each child element to a display node
emptyMessage?	ReactNode		An optional node that displays a message when the select component is empty
onFocus?	() => void		An optional function that handles the focus event
onBlur?	() => void		An optional function that handles the blur event
onChange?	(e: ChangeEvent, s: Selected) => void		An optional function that handles the change event
onClear?	() => void		An optional function that handles the clear event
onSearchChange?	(searchValue: string) => void		An optional function that handles the search change event
portalContainerId?	string		An optional string that specifies the ID of the portal container
inputType?	HTMLInputTypeAttribute		An optional HTML input type
inputValuePattern?	RegExp		An optional regular expression that validates the input value
forText?	string		This optional property is a string that can be used for additional text related to the field
helper?	ReactNode		This optional property represents a helper element for the field. It can be any valid React node
forwardedRef?	Ref<HTMLElement>		This optional property is a ref that can be forwarded to the field. It is a Ref for an HTMLElement
htmlFor?	string		This optional property is a string that specifies which form element a label is bound to
className?	string		This optional property is a string that specifies the class name
shadowField?	boolean		An optional boolean that, if true, applies a shadow style to the select component
captionIconHandler?	MouseEventHandler<HTMLButtonElement>		This optional property is a function that handles mouse events on a caption icon in the field. It receives a MouseEventHandler for an HTMLButtonElement

Autocomplete

Resources

Example

API