Textarea - 1177

Exempel

Designspecifikation

Textareor följer samma visuella design som textfält, men har flexibel höjd, scroll vid långa texter och radbruten text.

Textareor har liksom textfält generellt blå ram och ljusblå fyllnad. Hörnradie 10 px.
När en textarea är i aktivt läge får den en innerskugga.

Om formulärfält behöver vara placerade på en färgad bakgrund (tex. ljusblå) har fälten vit fyllnad men i övrigt samma ram och skuggningar etc. som de vanliga formulärfälten.

Textareor som signalerar felmeddelande har röd streckad ram och ljusrosa fyllnad.

Disablade fält har grå ram, stone-clear, och vit fyllnad. Texten är kursiv och har färgen stone-base.

Do’s and Don’ts

-

Tillgänglighet

I formulär ska användaren ges ledtexter och instruktioner som tydligt anger vad som ska väljas eller matas in. Det kan exempelvis handla om vilket format användaren förväntas fylla i informationen i, det är då viktigt att alla användare kan uppfatta instruktionerna.

Det är i och med detta viktigt att dessa ledtexter och instruktioner i kod är knutna till de respektive fält de är menade för. Detta åstadkoms med elementet label. Label-elementen måste också kopplas korrekt till respektive formulärobjekt med attributet for som ska peka på formulärobjektets id.

När felmeddelanden läggs in i formuläret så måste det knytas till formulärsobjektet eller gruppen det är menat att tillhöra. Detta är för att det inte bara ska synas visuellt utan vara kopplat så att alla användare kan uppfatta det.

När inmatningsfällt används så ska även autocomplete tas i beaktning, mer om detta du läsa här:

Autocomplete i inmatningsfält

Viktigt att tänka på när det gäller obligatoriska fält kan du läsa om här: Obligatoriska fält

Research på komponenten

-

Relaterade resurser/komponenter

• Textfält - 1177

Status