Autocomplete

6.4.6

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.

Demo

Props

Se fullständing dokumentation(öppnas i ny flik)
NamnTypBeskrivning

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

booleanIf 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

stringThe label text.

lang *

"sv" | "en" | "no"

name

string

onArrowNavigation

(value: SelectedItemProps) => voidCallback fired when navigating results with arrow keys

onBlur

(event: FocusEvent) => voidCallback 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

booleanWhen 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

booleanWhen true the component intially consists of a textfieldbutton opening the autocomplete within a sheet

shouldKeepSearchQuery

booleanWhen 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

Installation

npm install @sj-ab/component-library.ui.autocomplete

Länkar

Best practices

Elevation

Resting header (default)

Resting header (default)

Elevated header (when content scrolls behind it)

Elevated header (when content scrolls behind it)

Adaptive design

Tangentbordsinteraktioner

  • Enter / Piltangenter
    Välj ett datum i kalender

Change log

Statistik

  • Importer av Autocomplete

    8
  • Repos med Autocomplete

    25%
  • Senaste installerade version av Autocomplete

    6.4.5
  • Äldsta installerade version av Autocomplete

    5.6.0