React
Is new design vision part implemented using new tokens?
React
Is new design vision part implemented using new tokens?
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>
);
};
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 |