Autocomplete

6.8.7

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 *

"h1" | "h2" | "h3" | "h4" | "h5" | "h6"

translations *

AutocompleteTranslation

useInlineSwapIcon

boolean

value *

string

Installation

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

Länkar

Best practices

Elevation

Autocomplete resting header (default)

Resting header (default)

Elevated header (when content scrolls behind it)

Elevated header (when content scrolls behind it)

Adaptive design

Full-Screen (Mobile), Popper (Tablet & Desktop) and Sheet (all breakpoints).

Full-Screen (Mobile), Popper (Tablet & Desktop) and Sheet (all breakpoints).

Tillgänglighet

Tillgänglighetsproblem med MaterialUI Autocomplete

Vi har byggt Autocomplete-komponenten från grunden istället för att använda MaterialUI:s Autocomplete. Anledningen är att MUI-komponenten inte fungerar korrekt med skärmläsaren VoiceOver på iOS och riskerar att helt stänga ute gravt synskadade användare med iPhone.

WAI-ARIA

Autocomplete strävar efter att följa designmönstren

  1. Editable Combobox With List Autocomplete
  2. Listbox Example with Grouped Options

från WAI-ARIA Authoring Practices Guide.

Station Picker använder bland annat:

  • role="combobox" för att indikera att textfältet har valbara förslag
  • role="listbox" för panelen med förslag
  • role="option" för varje sökförslag
  • role="group" för att gruppera relaterade förslag
  • aria-describedby för att ge ytterligare instruktioner till skärmläsare
  • aria-autocomplete="list" för att indikera vilken typ av förslag som erbjuds
  • aria-expanded för att indikera om förslagen är synliga eller inte
  • aria-activedescendant för att hålla koll på vilket förslag som har skärmläsarfokus.

Change log

Statistik

  • Importer av Autocomplete

    8

  • Repos med Autocomplete

    25%

  • Senaste installerade version av Autocomplete

    6.8.5

  • Äldsta installerade version av Autocomplete

    6.7.12