Siirry pääsisältöönSiirry sivunavigaatioon

Text Input (Tekstikenttä)

Tekstikenttä on komponentti, johon käyttäjä täyttää komponentin otsikossa pyydetyn tiedon tai kirjoittaa omin sanoin vastauksensa otsikossa annettuun kysymykseen. Käyttäjälle voidaan antaa tarpeen mukaan ohjeistusta, mutta yksinkertaisissa käyttötapauksissa ohjeistusta ei tarvita. Tekstikenttää käytetään, kun kenttään täytettävä tieto on lyhyt. Jos täytettävä tieto on pitkä ja vaatii monta riviä, käytetään tekstialue-komponenttia.

Saavutettavuus ja käytettävyys

  • Tekstikentän kanssa tulee aina käyttää otsaketta (label). Suomifi UI kirjaston komponenttiin otsake kuuluu pakollisena osana.
  • Success- ja error-kenttiin on varattu tekstialue kentän alle viestiä varten. Teksti kertoo käyttäjälle mikä on kenttään täytetyn sisällön tila. Tekstimuotoisen viestin lisäksi tila sisältää värikoodin ja tekstikentän leveämmän reunuksen, joka korostuu normaalisti näkeville henkilöille.
  • Tekstikentän leveys toimii visuaalisena rajoitteena käyttäjälle ja antaa vihjeen siihen syötettävästä informaation määrästä.
  • Tekstikenttä komponenttia käytetään silloin kuin käyttäjän tulee täyttää vain yhden rivin informaatiota, kuten esimerkiksi nimensä. Monta riviä (multiline) vaativille vastauksille käytä Tekstialue (Textarea) komponenttia.

Mistä komponentti koostuu

Tekstikenttä koostuu otsakkeesta ja kentästä, jossa on käyttäjää ohjeistava kenttäteksti. Suomi.fi -palvelussa käytetään yleensä puhuttelumuodossa olevaa ohjeistavaa kenttätekstiä. Lisäksi kenttä voi sisältää ohjetekstin, joka sijoittuu otsakkeen ja kentän väliin, mutta on teknisesti osa otsikkoa. Näin ruudunlukija lukee ohjetekstin otsakkeen jälkeen. Kenttään on liitettävissä notifikaatiotieto mahdollisesta virheestä tai onnistumisesta. Notifikaatiotieto näytetään kentän alapuolella. Tekstimuotoisen notifikaation lisäksi kentän reunus on notifikaation aikana värikoodattu virheen tai onnistumisen merkiksi. Kentälle voidaan asettaa myös ikoni, joka esitetään kentän oikeassa laidassa. Ikonia voidaan hyödyntää kentän käyttötarkoituksen viestimiseen.

Lähtökohtaisesti kaikki lomakekentät ovat pakollisia, ja valinnaiset kentät merkitään valinnaisuustekstillä (optionalText). Valinnaisuusteksti näytetään suluissa otsakkeen lopussa.

Koko ja käyttö

Tekstikentän leveys on riippuu käyttötilanteesta. Täytettävän asian pitää mahtua tekstikenttään, mutta liian pitkä tekstikenttä antaa väärän viestin käyttäjälle. Tutkimusten mukaan tyypillisesti kentän pituus on 18-33 merkkiä (englannin kieli). 33 merkkiä on leveydeltään noin 300 px jolloin marginaaleineen 33 merkin tekstikentän sopiva leveys on 320 px. Tekstikenttäkomponentin oletusleveys on 290px. Komponentin koko voi rajoittaa vastauksen laajuutta, mutta se voi myös ohjata käyttäjää vastaamaan riittävän tiiviisti.

Tekstikenttä ohjetekstillä

Kirjoita kenttään hakemasi sukunimi. Sukunimi voi olla yksi- tai kaksiosainen.

Tekstikenttä ikonilla

Valinnainen tekstikenttä ikonilla (Optional Text Input)

Tekstikenttä hyväksytty (Success Text Input)

Tekstikenttä virheellinen (Error Text Input)

Virhe: kenttä ei voi olla tyhjä

Tekstikenttä estetty (Disabled Text Input)

Disabloitu tekstikenttä estää kentän täyttämisen, kunnes käyttäjä suorittaa toisen vaadittavan toimenpiteen.