React | Select | 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<Selected>('');
                                                        
                                                            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 (
                                                                <Select
                                                                    name="select-field"
                                                                    selected={selectedValue}
                                                                    label="Choose your property"
                                                                    onChange={(_, value) => setSelectedValue(value)}
                                                                    footer={{
                                                                        primary: (
                                                                            <DropdownFooterButton variant="primary" onClick={action('Primary footer action')}>
                                                                                Apply
                                                                            </DropdownFooterButton>
                                                                        ),
                                                                        secondary: ({ close }: { close: () => void }) => (
                                                                            <DropdownFooterButton variant="tertiary" onClick={close}>
                                                                                Close
                                                                            </DropdownFooterButton>
                                                                        ),
                                                                    }}
                                                                >
                                                                    {selectOptions.map((item: { key: string; value: string; label: string }) => (
                                                                    <DropdownItem key={item.key} value={item.value} label={item.label} />
                                                                )),}
                                                                </Select>
                                                            );
                                                        };

Name	Type	Default	Description
autocomplete?	boolean		An optional boolean that, if true, enables autocomplete
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
clearable?	boolean	false	Enables a button in the Select input for clearing the current selection, single or multiple.
compact?	boolean		An optional boolean that, if true, applies a compact style to the select component.
disabled?	boolean		An optional boolean that, if true, disables the select component
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
loader?	boolean		An optional boolean that, if true, displays a loader
multiselect?	boolean		An optional boolean that, if true, allows multiple options to be selected
selectAllEnabled?	boolean	true	Renders a Select all item on top of the options list, allowing users to select/deselect all the options at once. True by default for multiselect.
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
preserveMultiSelectSearch?	boolean		An optional boolean that, if true, preserves the search value when multiple options are selected
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
renderDropdownIcon?	(o: RenderDropdownIconProps) => ReactNode		An optional function that renders the dropdown icon
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
shadowField?	boolean		An optional boolean that, if true, applies a shadow style to the select component
large?	boolean		An optional boolean that, if true, applies a large style to the select component
portalContainerId?	string		An optional string that specifies the ID of the portal container
iconName?	IconName		An optional IconName that specifies the name of the icon
leadingImage?	string		An optional string that specifies the URL of the leading image
trailingImage?	string		An optional string that specifies the URL of the trailing image
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
maxCharacterCount?	number		This optional property represents the maximum number of characters allowed in the field
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
selected	Selected \| undefined		A required property that represents the currently selected value or values
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
footer?	ReactNode \| ((props: DropdownFooterRenderProps) => ReactNode)	undefined	Configures a footer section that appears at the bottom of the Select dropdown menu. The footer can be used to add additional actions or information below the list of options. It provides two slots, primary and secondary. Each slot accepts a ReactNode or a function. In the function case, it will receive the dropdown close handler function as a parameter. A button component is provided: DropdownFooterButton a simple responsive button with the proper UI for each resolution.

Select

Resources

Example

API