-
Notifications
You must be signed in to change notification settings - Fork 7
Search results
Search results är en lista som kan användas tillsammans med en Input eller Filter textbox och visas för att synliggöra valbara alternativ. Den är en bra hjälp för användaren för få återkoppling vid val ur ett stort antal alternativ.
Det finns möjlighet att lägga till en stödjande text överst i listan, för att förtydliga att alla träffar inte listats och att användaren behöver specificera sin sökning ytterligare.
Kallas ibland Auto complete i andra designsystem. Tillsammans med textfält kallas den Combobox.
- Alternativ visas som enkla rader eller med en stödjande extrarad. En lång alternativtext visas på flera rader.
- Markering visas som en rektangel i vänsterkant på hela resultatträffen, oavsett antal rader.
- Search result är 330 px bred i stora och lilla storleken.
- Sökresultatet visas under sökfältet/input.
- Scroll visas då listan överstiger x träffar både i lilla och stora storleken.
- Om sökningen ger för många (fler än xx) träffar, så visas endast de 25 första.
- Det är upp till implementatören att utforma den övre stödtexten.
- Det är upp till implementatören vad som händer då inga träffar finns, detta beror på system och situation
- Space och Enter väljer fokuserat val.
- Piltangenter navigerar i listan.
- Piltangenter loopar runt då listans slut nås. Detta är inkonsekvent mot hur Dropdown select har implementerat en Listbox
- Enter, mellanslag eller klick på ett alternativ i listan väljer och stänger Search results.
- Tab stänger Search results utan att göra ett val och fokus flyttar till nästa sak i tab-ordningen.
- Escape stänger Search results utan att göra ett val, fokus förblir på textrutan.
Start
Arbetsprocess
Taggar och flöde på github
Releaser
Inspiration om designsystem
DoD
Arbetsprocess - Branchstrategi
Testguide
Färger
Typografi
Ikoner
Layout
Marginaler och brytgräns
Knappar
Button
Back-to-top
Formulär
Checkbox
Combobox
Datepicker
Dropdown Select
Filter tag
Input
Radio group
Search results
Validering
Layout
Header & header menu
Meny (pågående)
Modal dialog
Grid
Startsida
Portal
Sökning
Listor
Formulär
Laddning