Input-komponenttia käytetään tekstikenttien toteuttamiseen. Komponentti luo pelkän input-kentän. Kokonainen tekstikenttä nimilappuineen ja ohjeineen luodaan yhdistämällä InputGroup-, InputLabel-, InputText- ja Input-komponentit.
Input- vai TextInput-komponentti?
Ensisijaisesti kannattaa hyödyntää TextInput-komponenttia, jolla voi helposti tehdä saavutettavia kenttiä valmiilla ulkoasulla.
TextInput-komponentti lisää saavutettavuuden kannalta tarpeelliset attribuutit automaattisesti ja on yksinkertaisempi käyttää. Input-komponentti taas mahdollistaa helpommin erilaiset räätälöidyt lomakekentät, koska toimiva syöttökenttä kootaan useammasta komponentista.
Tee näin
Käytä Input-komponenttia InputGroup-komponentin sisällä yhdessä InputLabel- ja InputText-komponenttien kanssa.
Muista huomioida saavutettavuus, jos kenttään on tarpeen yhdistää lisätietoja, virheilmoituksia tai täyttöohjeita.
Harkitse TextInput-komponentin käyttöä Input-komponentin sijasta, kun toteutus ei vaadi räätälöintiä.
Älä tee näin
Älä käytä Input-komponenttia, kun tarvitset monirivistä tekstikenttää. Käytä sen sijaan Textarea-komponenttia.
Saavutettavuus
Älä luota siihen, että ruudunlukijan käyttäjät navigoivat sivulla nuolinäppäimillä ja selaavat tekstit järjestyksessä läpi.
Tabulaattorilla liikuttaessa on tärkeätä, että syöttökenttään liittyvät ohje- ja virhetekstit luetaan kohdistuksen ollessa kentässä.
Jos yhdistät kenttään lisätietoja, muista huomioida ruudunlukijan käyttäjät käyttämällä aria-label- tai aria-describedby-attribuuteja alla olevan esimerkin mukaisesti.
Tekstikentän osat
Toimiva kokonaisuus lomakkeen tekstikentälle toteutetaan Input-, InputLabel-, InputText- ja InputGroup-komponenttien avulla.
Tarvittaessa yksittäisiä komponentteja voi hyödyntää myös muiden lomake-elementtien toteuttamiseen.
InputLabel-komponenttia käytetään lomakkeen kentän tai kenttäryhmän nimilappuna. Komponentti tekee label-tagin. Nimilappu tulee liittää input-kenttään
aina htmlFor- ja id-yhdistelmällä. Näin kohdistus siirtyy kenttään nimilappua klikkaamalla ja nimilappu luetaan automaattisesti kohdistuksen ollessa kentässä.
<InputLabel>Kentän nimilappu</InputLabel>
Huomioi, että pakollisen kentän nimilapun tähti näkyy vain näkeville käyttäjille. Ruudunlukijoita varten on muistettava välittää ‘Pakollinen tieto’ -teksti
lokalisoituna käyttäen requiredLabel -propia sekä lisätä input-kenttään required -prop. Muista myös piilottaa ‘Pakolliset tiedot on merkitty *-merkillä.’
-teksti ruudunlukijoilta aria-hidden="true" atribuutilla.
<>
<InputLabel>Label</InputLabel>
<br />
<InputLabel as="legend">Label legend-tagilla</InputLabel>
<br />
<InputLabel aria-hidden="true">Pakolliset tiedot on merkitty *-merkillä.</InputLabel>
<br />
<InputLabel requiredLabel="Pakollinen tieto">Pakollisen kentän label</InputLabel>
</>
InputText
InputText-komponentti tekee input-kenttään liitettävät tekstit, joita ovat täyttöohje, virheilmoitukset ja aputeksti.
Tietyissä tilanteissa kenttään voi olla tarve yhdistää syötettävää tietoa koskevat yksikkötiedot tai lyhyt ohje, erityisesti jos samassa kenttäryhmässä on useita kenttiä.
Muista huomioida ruudunlukijan käyttäjät. Alla esimerkkejä input-kentistä, jotka on otsikoitu ruudunlukijoille aria-label- tai aria-describedby-attribuuteilla.