Autocomplete
The Autocomplete is a text field enhanced by a panel of suggested options. The value must be chosen from a predefined set of allowed values.
Namn | Typ | Beskrivning |
---|---|---|
ariaLabel | string | |
autoSelectionValue | string | |
customAttribute | { attribute: string; value: string |
number } | Used for tests. Clickable and requested subcomponents will be suffixed with "-[ComponentName]". |
description | string | |
disabled | boolean | If true, the component is disabled. |
drawerIsOpen | boolean | |
endIcon | Element | |
freeSolo | boolean | |
hasError | boolean | |
helperText | string | |
hideClearButton | boolean | |
highlightMatch | boolean | |
id * | string | |
inputRef | RefObject | |
isExpanded | boolean | |
label | string | The label text. |
lang * | "sv" |
"en" |
"no" | |
name | string | |
onArrowNavigation | (value: SelectedItemProps) => void | Callback fired when navigating results with arrow keys |
onBlur | (event: FocusEvent) => void | Callback fired when focus leaves the input field |
onCancelClickHandler | () => void | |
onChange * | (item: SelectedItemProps) => void | |
onClick | () => void | |
onClose | (item: SelectedItemProps) => void | |
onCloseDrawer | () => void | |
onFocus | () => void | |
onSelect | (item: SelectedItemProps) => void | |
options * | SelectedItemProps[] | |
overrideDefaultOnSelectBehavior | boolean | When true the components internal onSelect is overridden which otherwise runs alongside the passed in function |
placeholder * | string | |
popularValues | string[] | |
prepopulationLists | PrepopulationList[] | |
resultHeight | number | |
scrollOffset | number | |
shouldAlwaysUseSheet | boolean | When true the component intially consists of a textfieldbutton opening the autocomplete within a sheet |
shouldKeepSearchQuery | boolean | When true the input field will keep the user defined value and not display the currently selected option |
startIcon | Element | |
titleComponent * | "h2" |
"h3" |
"h4" |
"h1" |
"h5" |
"h6" | |
translations * | AutocompleteTranslation | |
useInlineSwapIcon | boolean | |
value * | string |
npm install @sj-ab/component-library.ui.autocomplete
Elevation
Adaptive design
- Enter / PiltangenterVälj ett datum i kalender
Fix for DateCalendar when used in narrow areas.
fix placement for autocomplete popper
Autocomplete: wrap options in popper
Autocomplete updates: Internal filtering, PrepopulationSection updates, AutocompleteSkeleton improvements, and sx prop support
Option to always use autocomplete with drawer behavior
Importer av Autocomplete
8Repos med Autocomplete
25%Senaste installerade version av Autocomplete
6.4.5Äldsta installerade version av Autocomplete
5.6.0