Prototyp - Komponent för formulär

[JohannaOlin]

Beskrivning

Komponenten ska användas för att visa hur formulär ser ut och fungerar

Acceptanskriterier

• [ ] Komponenten ska fungera på desktop, tablet och mobil
• [ ] Komponenten ska visa textfält, textruta, radiobutton, dropdown, checkbox, fältnamn och ledtexter

[viktor-sarge]

Frida - när det gäller formulär så är jag gärna och petar något lite mer än i andra saker. Tex som med sökrutan: att ledtexter inte ligger i själva input-fältet där den försvinner när man skriver utan i anslutning till fältet. Vi behöver också se över implementationen sedan med aria-labels och states om det är formulär i flera steg t.ex.

Även fältvalidering är värt att ta ett ordentligt grepp om!

Vi kan väl synka lite när du har börjat på den här?

[fridabergentoft]

@regionhallandviktor Komponent för detta finns i komponentbiblioteket under Forms. Komponenten idag är i form av ett exempel av hur det skulle kunna se ut när allt är i sin helhet. Jag misstänker att jag kommer behöva bryta loss alla delar för att göra separata komponenter. Innan jag gör det tänkte jag att det kan vara bra om du kollar på det så allt ser okej ut.

[viktor-sarge]

Toppen. Jag har tagit en kik. Ser några saker:

• Ej konsekvent med utseendet på hörnen. Jag föreslår att vi använder rundat överallt (dvs även på det stora formuläret)
• Validering kan inte använda endast färg som signal för ok/felaktig. Jag föreslår en valideringstext direkt till höger om fältet. Alternativt under om det inte får plats till höger. Gärna även någon ytterligare visuell symbol som ett utropstecken eller kryss antingen direkt till höger om rutan eller inuti rutan.
• Kan vara bra att tänka igenom när validering skall ske. Jag ser ganska ofta valideringar som körs direkt när man skriver i rutan vilket gör att man omedelbart möts av "FEL!" när man börjar skriva in t.ex. personnummer. Kan vara bra att skriva in hur den skall bete sig. T.ex. att validera när rutan inte har fokus längre, eller efter ett visst antal sekunders inaktivitet. (Samt naturligtvis: innan fomruläret skickas)
• Radio-knapparna och checkboxarna har en lite knepig uppställning med först en bullet, sedan själva rutan/radioknappen och sedan en ny rad och så kommer label efteråt på den nya raden. Jag föreslår bara "ruta/radioknapp mellanslag label".
• Har upprepade grupper av radioknappar alltid en ny rubrik för att separera dem? Utmärkt i så fall.
• Drop down-menyn kan gärna ha en ledtext, "default" eller något annat ("------------" i värsta fall) som tydligare separerar utseendet från sökrutor.
• Lade märke till knappen på drop down-menyn. Fick först associationen "vänstermeny" så det är bra att vi separerat dem lite.
• Vad är tanken med pilen som alternerar nedåt/uppåt på "input + icon"?