Station Picker

4.2.15

The Station Picker is a text field enhanced by a panel of suggested stations. The value must be chosen from a predefined set of allowed stations.

Demo

Props

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

ariaLabel

stringAria label attribute for enhanced accessibility.

autoSelectionValue

stringPreselects a station in the autocomplete if it matches this value.

children

React.ReactNodeThe children of the station picker.

customAttribute

{ attribute: string; value: string | number }Used for tests. Clickable and requested subcomponents will be suffixed with "-[ComponentName]".

customTranslations

DeepPartialCustom translations for the station picker.

debugRenderNumStations

numberNumber of stations to render in the autocomplete drawer for debugging purposes.

disabled

booleanIf true, the component is disabled.

errorMessage *

stringThe error message to display.

id *

stringThe id of the station picker.

inputRef *

React.RefObjectReference to the input (text field) element

isLoading

booleanIf true, a loading skeleton will be rendered instead of the component.

label

stringThe label text.

lang

"en" | "sv"Language used for internal translations.

onBlur

(event: React.FocusEvent) => voidFunction called when the input field loses focus.

onChange *

(item: SelectedItemProps) => voidFunction called on text field input change.

onSelect

(item: SelectedItemProps) => voidFunction called when a station option is selected.

onStationsSwapped

() => voidFunction called when the station swap button is clicked.

placeholder *

stringPlaceholder text for the input field.

showStationNumber

booleanWhether to show station numbers alongside station names.

showStationsNearMe

booleanWhether to show nearby stations based on user's location.

stations

StationProps[]Sorted stations list to select between. Fetch this stations prio index list in your app to sort with: Existing: https://www.sj.se/content/dam/design-material/kb/stations-prio-index-existing.json Fagus: https://www.sj.se/content/dam/design-material/kb/stations-prio-index-fagus.json

swapIcon

React.FCThe icon to show if onStationsSwapped is true

titleComponent

"h1" | "h2" | "h3" | "h4" | "h5" | "h6"Semantic heading level for sections like 'popular stations' or 'stations near me'.

transitionType

"slide" | "fade"Type of animation for opening and closing the mobile drawer.

useInlineSwapIcon

booleanDisplays the swap icon inline when set to true.

value *

stringCurrent value of the search input.

Installation

npm install @sj-ab/component-library.ui.station-picker

Länkar

Best practices

Responsivitet

Station Picker har olika beteende på stora respektive små skärmar:

Små skärmar

På små skärmar är "Från" respektive "Till" knappar som öppnar stationsväljaren i en helskärmsmodal.

Användaren trycker på knappen, söker efter sin station i textfältet inne i modalen, och flyttas sedan tillbaka till knappen när valet är gjort. Detta skapar ett tydligare flöde där användaren kan fokusera på en uppgift i taget.

Station Picker består av två knappar Från och till

Station Picker består av två knappar...

Station picker öppnar förslag i en helskärmsmodal.

...som öppnar väljaren i en helskärmsmodal

Stora skärmar

På stora skärmar är "Från" och "Till" två textfält med automatiska sökförslag. När användaren börjar skriva ett stationsnamn visas förslag i en popup nedanför fältet. Användaren kan klicka på ett förslag med musen eller aktivera det med tangentbordet.

Station picker på stora skärmar visar en popup med förslag.

Station picker på stora skärmar.

Elevation

Resting header (default)

Resting header (default)

Elevated header (when content scrolls behind it)

Elevated header (when content scrolls behind it)

Adaptive design

Tillgänglighet

WAI-ARIA

Station Picker 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.

Stavningsförslag

Station Picker har inbyggda stavningsförslag för att hjälpa användare med skrivsvårigheter. Om användaren skriver in ett stationsnamn som inte finns ges istället förslag på liknande stationer.

Stavningsförslagen är implementerade med en algoritm baserad på Levenshteinavstånd, som jämför användarens sökning med kända stationsnamn.

Stationsförslag för Jokkmokk när användaren stavat fel.

Förslag på stationer som användaren kanske menade.

Tangentbordsinteraktioner

  • Pil ned
    Gå till nästa sökförslag
  • Pil upp
    Gå till föregående sökförslag
  • Retur
    Välj markerat sökförslag
  • Escape
    Stäng panelen med förslag

Change log

Statistik

  • Importer av Station Picker

    20
  • Repos med Station Picker

    45%
  • Senaste installerade version av Station Picker

    4.2.12
  • Äldsta installerade version av Station Picker

    4.2.0