Esikatselu
<TextInput helpText="Dolor sit amet." labelText="Lorem ipsum" />
Käyttötarkoitus
Komponentti mahdollistaa saavutettavien kenttien toteutuksen valmiilla ulkoasulla. Kentät voi esittää allekkain tai rinnakkain.
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
TextInputkomponentti 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.
Huomaa, että mikäli myös addon-komponentilla lisätty sisältö halutaan kuvata käyttäjälle ruudunlukijalla, tulee siihen lisätä teksti aria-label-attribuutilla. Katso esimerkkiä alla olevasta koodista.
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.
Esimerkit
<TextInput
id="example-accessibility"
helpText="Ilmoita opintotuen määrä koko vuodelta."
labelText="Opintotuen määrä"
addonAfter={
<InputText addon aria-label="euroa/vuosi">
euroa/vuosi
</InputText>
}
/>
Allekkain aseteltu kenttä
Allekkaisessa asettelussa syöttökentän leveyttä voi muuttaa antamalla inputWidth-propin avulla Column-komponentin halutulla leveydellä.
<>
<TextInput
id="example"
labelText="Uusittavan reseptin nimi"
addonAfter={
<InputText addon aria-label="Resepti">
Resepti
</InputText>
}
/>
<TextInput id="example-required" labelText="Rajaa näytettäviä reseptejä" required 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 id="example-disabled" labelText="Lääkkeen määrä" disabled />
<TextInput
id="example-invalid"
labelText="Lääkkeen annostus"
errorText="Lääkkeen annostuksen ohjeet puuttuvat. Täytä ohjeistus."
invalid
/>
<TextInput
id="example-help"
labelText="Uusimisen syy"
helpText="Ilmoita syy reseptin uusimiselle."
errorText="Reseptiä uusiessa tulee ilmoittaa syy. Täytä puuttuva tieto."
invalid
required
/>
<TextInput
id="example-multiline"
labelText="Lisätieto"
helpText="Kirjoita tähän, jos reseptin uusimiseen liittyy jotain muuta oleellista."
multiline
rows={4}
/>
</>
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
id="example2"
labelText="Uusittavan reseptin nimi"
leftCol={(children) => <Column md={4}>{children}</Column>}
/>
<TextInput
id="example2-required"
labelText="Rajaa näytettäviä reseptejä"
required
leftCol={(children) => <Column md={4}>{children}</Column>}
inputWidth={(children) => <Column md={6}>{children}</Column>}
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
id="example2-disabled"
labelText="Lääkkeen määrä"
disabled
leftCol={(children) => <Column md={4}>{children}</Column>}
inputWidth={(children) => <Column md={6}>{children}</Column>}
/>
<TextInput
id="example2-invalid"
labelText="Lääkkeen annostus"
errorText="Lääkkeen annostuksen ohjeet puuttuvat. Täytä ohjeistus."
invalid
leftCol={(children) => <Column md={4}>{children}</Column>}
inputWidth={(children) => <Column md={18}>{children}</Column>}
/>
<TextInput
id="example2-help"
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
id="example2-multiline"
labelText="Lisätieto"
helpText="Kirjoita tähän, jos reseptin uusimiseen liittyy jotain muuta oleellista."
multiline
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.
const TextInputExample = () => {
const [isOpen, setIsOpen] = useState(false);
return (
<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="euroa/vuosi">
euroa/vuosi
</InputText>
}
/>
);
};
render(<TextInputExample />);
Skeleton
<>
<Skeleton variant="text" className="kds-w-1\/4 kds-block kds-mb-1" />
<Skeleton className="kds-p-1 kds-mb-1 kds-w-2\/4 kds-mb-3" />
</>
<Row className="kds-items-center">
<Column md={3}>
<Skeleton variant="text" className="kds-block" />
</Column>
<Column md={5}>
<Skeleton className="kds-p-1" />
</Column>
</Row>