Esikatselu
<TextInput helpText="Dolor sit amet." labelText="Lorem ipsum" />
Käyttötarkoitus
Komponentti mahdollistaa saavutettavien lomakekenttien toteutuksen valmiilla ulkoasulla. Kentät voi esittää allekkain tai rinnakkain.
Komponentilla voi toteuttaa input, textarea ja select tyyppisiä lomakekenttiä.
Komponentti hyödyntää seuraavia pienempiä komponentteja: InputGroup, Input, InputLabel, InputText, Textarea ja Select.
- Käytä TextInput-komponenttia, kun tavoitteena on luoda saavutettava kenttä valmiilla ulkoasulla.
- Älä käytä TextInput-komponenttia, kun tavoitteena on tehdä monimutkaisempia kenttäyhdistelmiä tai muita perusmallista poikkeavia kenttiä. Käytä näissä tapauksissa InputGroup-komponentin sisällä Input, InputLabel, InputText, Textarea tai Select-komponentteja ja varmista, että ne ovat saavutettavia ja verkkoilmeen mukaisia.
Saavutettavuus
TextInput-komponentti tuottaa saavutettavan käyttöliittymäelementin huolehtien ohjetekstien liittämisestä kenttään automaattisesti.
Näin ruudunlukijan käyttäjä saa tiedon kentän pakollisuudesta, sekä mahdollisista lisätiedoista.
Saavutettavan merkkimäärälaskurin esimerkin löydät Textarea-komponentin esimerkeistä. Jos ruudunlukijaa ei tarvitse huomioida, voit toteuttaa merkkimäärälaskurin myös TextInput-komponentilla.
Huomaa, että mikäli myös addon-propeilla lisätty sisältö halutaan kuvata käyttäjälle ruudunlukijalla, tulee siihen lisätä teksti aria-label-attribuutilla. Katso esimerkkiä alla olevasta koodista.
<TextInput
helpText="Ilmoita opintotuen määrä koko vuodelta."
labelText="Opintotuen määrä"
addonAfter={
<InputText addon aria-label="euroa/vuosi">
euroa/vuosi
</InputText>
}
/>
Tekstikenttä
Muut ominaisuudet löytyvät Input-komponentin ohjesivulta.
<TextInput labelText="Uusittavan reseptin nimi" />
Tilat
<>
<TextInput labelText="Kentän nimilappu" defaultValue="Tekstikenttä" />
<TextInput labelText="Kentän nimilappu" defaultValue="Tekstikenttä - vain luku" readOnly />
<TextInput labelText="Kentän nimilappu" defaultValue="Tekstikenttä - estetty" disabled />
<TextInput
labelText="Kentän nimilappu"
defaultValue="Tekstikenttä - virheellinen arvo"
errorText="Virheilmoitus"
invalid
required
/>
</>
Kokovaihtoehdot
<>
<TextInput labelText="Tekstikenttä xs-koossa" size="xs" />
<TextInput labelText="Tekstikenttä sm-koossa" size="sm" />
<TextInput labelText="Tekstikenttä md-koossa (oletus)" />
</>
Monirivinen tekstikenttä
Muut ominaisuudet löytyvät Textarea-komponentin ohjesivulta.
<>
<TextInput
labelText="Lisätieto"
helpText="Kirjoita tähän, jos reseptin uusimiseen liittyy jotain muuta oleellista."
element="textarea"
rows={4}
/>
</>
Tilat
<>
<TextInput element="textarea" labelText="Kentän nimilappu" defaultValue="Monirivinen tekstikenttä" />
<TextInput
element="textarea"
labelText="Kentän nimilappu"
defaultValue="Monirivinen tekstikenttä - vain luku"
readOnly
/>
<TextInput
element="textarea"
labelText="Kentän nimilappu"
defaultValue="Monirivinen tekstikenttä - estetty"
disabled
/>
<TextInput
element="textarea"
labelText="Kentän nimilappu"
defaultValue="Tekstikenttä - virheellinen arvo"
errorText="Virheilmoitus"
invalid
required
/>
</>
Kokovaihtoehdot
<>
<TextInput labelText="Tekstikenttä xs-koossa" size="xs" element="textarea" rows={3} />
<TextInput labelText="Tekstikenttä sm-koossa" size="sm" element="textarea" rows={4} />
<TextInput labelText="Tekstikenttä md-koossa (oletus)" element="textarea" rows={6} />
</>
Valintalista
Muut ominaisuudet löytyvät Select-komponentin ohjesivulta.
<TextInput id="example-required" labelText="Rajaa näytettäviä reseptejä" element="select" required defaultValue={0}>
<option value="0">(Valitse)</option>
<option value="1">Kaikki reseptit</option>
<option value="2">Lääkettä jäljellä</option>
<option value="3">Uusimispyyntö kesken</option>
</TextInput>
Tilat
<>
<TextInput labelText="Kentän nimilappu" element="select" defaultValue={0}>
<option value="0">(Valitse)</option>
<option value="1">Kaikki reseptit</option>
<option value="2">Lääkettä jäljellä</option>
<option value="3">Uusimispyyntö kesken</option>
</TextInput>
<TextInput labelText="Kentän nimilappu" element="select" defaultValue={0} disabled>
<option value="0">(Valitse)</option>
<option value="1">Kaikki reseptit</option>
<option value="2">Lääkettä jäljellä</option>
<option value="3">Uusimispyyntö kesken</option>
</TextInput>
<TextInput labelText="Kentän nimilappu" element="select" defaultValue={0} errorText="Virheilmoitus" required invalid>
<option value="0">(Valitse)</option>
<option value="1">Kaikki reseptit</option>
<option value="2">Lääkettä jäljellä</option>
<option value="3">Uusimispyyntö kesken</option>
</TextInput>
</>
Kokovaihtoehdot
<>
<TextInput labelText="Valintalista xs-koossa" element="select" defaultValue={0} size="xs">
<option value="0">(Valitse)</option>
<option value="1">Kaikki reseptit</option>
<option value="2">Lääkettä jäljellä</option>
<option value="3">Uusimispyyntö kesken</option>
</TextInput>
<TextInput labelText="Valintalista sm-koossa" element="select" defaultValue={0} size="sm">
<option value="0">(Valitse)</option>
<option value="1">Kaikki reseptit</option>
<option value="2">Lääkettä jäljellä</option>
<option value="3">Uusimispyyntö kesken</option>
</TextInput>
<TextInput labelText="Valintalista md-koossa (oletus)" element="select" defaultValue={0}>
<option value="0">(Valitse)</option>
<option value="1">Kaikki reseptit</option>
<option value="2">Lääkettä jäljellä</option>
<option value="3">Uusimispyyntö kesken</option>
</TextInput>
</>
Palstojen leveyden muokkaaminen
Yksipalstainen asettelu
Allekkaisessa asettelussa syöttökentän leveyttä voi muuttaa antamalla inputWidth-propin avulla Column-komponentin halutulla leveydellä.
<TextInput labelText="Uusittavan reseptin nimi" inputWidth={(children) => <Column md={8}>{children}</Column>} />
Kaksipalstainen asettelu
Rinnakkaisessa asettelussa syöttökentän leveyttä voi muuttaa antamalla inputWidth-propin avulla Column-komponentin halutulla leveydellä.
Huomaa, että oikeanpuoleinen palsta täyttää aina vaakasuunnassa nimilapulta jäävän tyhjän tilan. Syöttökentälle luodaan toinen sisäkkäinen palsta, eli leveimmän kentän saa siis tässä
tapauksessa Column-komponentin arvolla “12”.
<>
<TextInput labelText="Uusittavan reseptin nimi" leftCol={(children) => <Column md={4}>{children}</Column>} />
<TextInput
labelText="Rajaa näytettäviä reseptejä"
required
leftCol={(children) => <Column md={4}>{children}</Column>}
inputWidth={(children) => <Column md={6}>{children}</Column>}
element="select"
defaultValue={0}
>
<option value="0">(Valitse)</option>
<option value="1">Kaikki reseptit</option>
<option value="2">Lääkettä jäljellä</option>
<option value="3">Uusimispyyntö kesken</option>
</TextInput>
<TextInput
labelText="Lääkkeen määrä"
disabled
leftCol={(children) => <Column md={4}>{children}</Column>}
inputWidth={(children) => <Column md={6}>{children}</Column>}
/>
<TextInput
labelText="Lääkkeen annostus"
errorText="Lääkkeen annostuksen ohjeet puuttuvat. Täytä ohjeistus."
invalid
required
leftCol={(children) => <Column md={4}>{children}</Column>}
inputWidth={(children) => <Column md={18}>{children}</Column>}
/>
<TextInput
labelText="Uusimisen syy"
helpText="Ilmoita syy reseptin uusimiselle."
errorText="Reseptiä uusiessa tulee ilmoittaa syy. Täytä puuttuva tieto."
invalid
required
leftCol={(children) => <Column md={4}>{children}</Column>}
/>
<TextInput
labelText="Lisätieto"
helpText="Kirjoita tähän, jos reseptin uusimiseen liittyy jotain muuta oleellista."
element="textarea"
rows={4}
leftCol={(children) => <Column md={4}>{children}</Column>}
/>
</>
Piilotetun lisätiedon näyttäminen
Tarvittaessa kenttään liittyvä pidempi ohjeteksti voidaan piilottaa haitarielementin sisään hyödyntämällä collapsibleContent- ja collapsibleContentToggleText-proppeja.
Huom! Haitarielementin tekstejä ei lueta ruudunlukijan toimesta kohdistuksen siirtyessä input-kenttään.
<TextInput
helpText="Ilmoita asuinkäytössä olevat tilat."
inputWidth={(children) => <Column md={4}>{children}</Column>}
collapsibleContentToggleText="Lue, miten asunnon pinta-ala tulee ilmoittaa"
collapsibleContent={
<>
<p>
Ilmoita pinta-alana kaikki asuinkäytössä olevat tilat, joita on mahdollista lämmittää. Ilmoita pinta-ala täysinä
neliömetreinä ja pyöristä desimaaliluvut seuraavaan kokonaislukuun.
</p>
<p>
Pinta-alaan ei lasketa parveketta, kuistia, kylmää eteistä, kellaria, pannuhuonetta, autotallia ja kylmää
varastotilaa, joten niitä ei tarvitse ilmoittaa.
</p>
</>
}
labelText="Asunnon pinta-ala"
addonAfter={
<InputText addon aria-label="m²">
m²
</InputText>
}
/>
Skeleton
<>
<Skeleton variant="text" className="kds-w-1\/4 kds-block kds-mb-1" aria-label="Sisältöä ladataan." />
<Skeleton className="kds-p-1 kds-mb-1 kds-w-2\/4 kds-mb-3" aria-label="Sisältöä ladataan." />
</>
<Row className="kds-items-center" aria-label="Sisältöä ladataan">
<Column md={3}>
<Skeleton variant="text" className="kds-block" />
</Column>
<Column md={5}>
<Skeleton className="kds-p-1" />
</Column>
</Row>