Textarea (Tekstialue)
Tekstialue on komponentti, johon käyttäjä voi syöttää otsakkeessa pyydetyn tiedon tai kirjoittaa omin sanoin vastauksensa otsakkeessa annettuun kysymykseen. Tekstialuetta käytetään tilanteissa, joissa käyttäjälle halutaan antaa mahdollisuus pidemmän vastauksen antamiseen. Lyhyitä tekstimuotoisia vastauksia varten käytetään tekstikenttää.
Saavutettavuus ja käytettävyys
- Tekstialueen kanssa tulee aina käyttää otsaketta (label). Suomi.fi Design Systemin komponenttiin otsake kuuluu pakollisena osana.
- Tekstialueen ohjeteksti on valinnainen tieto ja sen voi jättää lisäämättä komponenttiin, jos kenttään täytettävä asia on hyvin yksinkertainen.
- Tekstialueen ohjeistava kenttäteksti (visualPlaceholder) auttaa hahmottamaan syötteen paikan. Sen ei tule sisältää käyttötilanteen kannalta olennaista tietoa. Ohjeistamiseen tulee käyttää ensisijaisesti ohjetekstiä (hintText).
- Komponentille voidaan asettaa virhetila, jolla voidaan indikoida esimerkiksi virheellistä tai puuttuvaa syötettä. Virhetilassa komponentin reunukset sekä komponentin alla näytettävä tilateksti muuttuvat punaiseksi.
Mistä komponentti koostuu
Tekstialue koostuu otsakkeesta ja syötekentästä. Suomi.fi -palvelussa käytetään yleensä puhuttelumuodossa olevaa ohjeistavaa kenttätekstiä. Lisäksi komponentti voi sisältää ohjetekstin, joka sijoittuu otsakkeen ja syötekentän väliin. Komponenttiin on liitettävissä notifikaatiotieto mahdollisesta virheestä. Notifikaatiotieto näytetään syötekentän alapuolella. Tekstimuotoisen notifikaation lisäksi kentän reunus on notifikaation aikana värikoodattu virheen merkiksi.
Koko ja käyttö
Tekstialueen oletuskoko asetetaan toivotun sisällön mukaan, mutta ei kuitenkaan liioitellun suureksi. Jos käyttäjä täyttää tekstialue-komponenttiin enemmän tekstiä kuin siihen mahtuu, on alue vieritettävissä (scrolling) tai venytettävissä sisällön mukaiseksi komponentin oikeasta alakulmasta.
Ohje- ja notifikaatiotekstit
Komponentille voidaan antaa ohje- ja notifikaatiotekstit. Ohjeteksti näytetään otsikon ja syötekentän välissä, ja notifikaatioteksti syötekentän alapuolella.
Estetty Tekstialue (Disabled Textarea)
Estetty tekstialue ei ole muokattavissa. Estetty -tila voidaan poistaa esimerkiksi, kun käyttäjä suorittaa toisen vaadittavan toimenpiteen.