Select

Select allows users to choose one or more values from a pre-defined list of options.

React

Is new design vision part implemented using new tokens?

Up to date

Resources

Example

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', primaryText: 'Fujiyama Hotel' },
                                                                { key: 'boomerang', value: 'boomerang', primaryText: 'Boomerang Hotel' },
                                                                { key: 'le-grand-hotel', value: 'le-grand-hotel', primaryText: 'Le Grand Hotel' },
                                                            ];
                                                        
                                                            return (
                                                                <Select
                                                                    selected={selectedValue}
                                                                    label="Choose your property"
                                                                >
                                                                    {selectOptions.map((item: { key: string; value: string; primaryText: string }) => (
                                                                    <ListItem key={item.key} value={item.value} primaryText={item.primaryText} />
                                                                )),}
                                                                </Select>
                                                            );
                                                        };
                                                        
                                                            

API

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

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

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