Esikatselu
<>
<InputGroup>
<TextInput id="lorem" labelText="Lorem ipsum" />
</InputGroup>
<InputGroup>
<TextInput id="dolor" labelText="Dolor sit amet" />
</InputGroup>
</>
Käyttötarkoitus
Tällä komponentilla voi ryhmitellä kenttiä ja kenttäryhmiä. Käytä InputGroup-komponenttia kenttien ryhmityksen luomiseen pystysuunnassa.
Komponenttia voi käyttää yhdessä muiden lomakekomponenttien kanssa räätälöityjen kenttien ja kenttäryhmien toteutukseen. Kenttien asettelua
voi muokata Row ja Column -komponenteilla.
Saavutettavuus
Huomioi ruudunlukijan käyttäjiä käyttämällä tarvittaessa fieldset- ja legend-tageja tai role="group" ja aria-describedby-attribuutteja.
Tarkemmat ohjeet löydät Kenttäryhmät-osion koodiesimerkeistä.
Esimerkit
Kenttien välistyksen asettaminen
Erota lomakkeen kentät ja kenttäryhmät aina toisistaan InputGroup-komponentilla.
Tämä lisää kenttien väliin tyhjää tilaa, mikä parantaa lomakkeen luettavuutta.
<>
<InputGroup>
<TextInput id="kenttä1" labelText="Kenttä 1" />
</InputGroup>
<InputGroup>
<TextInput id="kenttä2" labelText="Kenttä 2" />
</InputGroup>
<InputGroup>
<TextInput id="kenttä3" labelText="Kenttä 3" />
</InputGroup>
<Button>Painike</Button>
</>
Yksipalstainen asettelu
Kenttien leveyttä voi säätää Row ja Column -komponenteilla.
<>
<InputGroup>
<InputLabel htmlFor="todettuarvo" requiredLabel="Pakollinen tieto">
Todettu arvo
</InputLabel>
<InputText id="todettuarvo-help" className="kds-sr-only">
euroa
</InputText>
<Row gx={2}>
<Column sm={6} md={4}>
<Input
id="todettuarvo"
invalid
required
aria-describedby="todettuarvo-error todettuarvo-help"
addonAfter={<InputText addon>euroa</InputText>}
/>
</Column>
</Row>
<InputText error id="todettuarvo-error">
Virheilmoitustekstit esitetään kentän alapuolella.
</InputText>
</InputGroup>
<InputGroup>
<SelectionGroup labelText="Realisointia edellytetään" required>
<Radio name="realisointi" id="realisointi-kylla" labelText="Kyllä" />
<Radio name="realisointi" id="realisointi-ei" labelText="Ei" defaultChecked />
</SelectionGroup>
</InputGroup>
<InputGroup>
<InputLabel htmlFor="lisatieto">Lisätieto</InputLabel>
<Row gx={2}>
<Column md={8} sm={10}>
<Textarea id="lisatieto" rows={5} aria-describedby="lisatieto-info" />
<InputText info id="lisatieto-info" className="kds-mt-1">
200 merkkiä jäljellä
</InputText>
</Column>
</Row>
</InputGroup>
</>
Kaksipalstainen asettelu
Row ja Column-komponenteilla voi luoda myös kaksipalstaisia lomakkeita. Pienellä näytöllä kenttien tulee asettua allekkain.
Row-komponentin saa luotua myös InputGroup-komponentin row-propilla.
<>
<InputGroup row>
<Column md={4}>
<InputLabel center htmlFor="todettuarvo2" requiredLabel="Pakollinen tieto">
Todettu arvo
</InputLabel>
</Column>
<Column>
<InputText id="todettuarvo2-help" className="kds-sr-only">
euroa
</InputText>
<Row gx={2}>
<Column sm={6} md={8} lg={6}>
<Input
id="todettuarvo2"
required
invalid
aria-describedby="todettuarvo2-error todettuarvo2-help"
addonAfter={<InputText addon>euroa</InputText>}
/>
</Column>
</Row>
<InputText error id="todettuarvo2-error">
Virheilmoitustekstit esitetään kentän alapuolella.
</InputText>
</Column>
</InputGroup>
<InputGroup>
<SelectionGroup
required
labelText="Realisointia edellytetään"
leftCol={(children) => <Column md={4}>{children}</Column>}
>
<Radio name="realisointi2" id="realisointi2-kylla" labelText="Kyllä" />
<Radio name="realisointi2" id="realisointi2-ei" labelText="Ei" defaultChecked />
</SelectionGroup>
</InputGroup>
<InputGroup row>
<Column md={4}>
<InputLabel center htmlFor="lisatieto2">
Lisätieto
</InputLabel>
</Column>
<Column>
<Textarea id="lisatieto2" rows={5} aria-describedby="lisatieto-info2" />
<InputText info id="lisatieto-info2" className="kds-mt-1">
200 merkkiä jäljellä
</InputText>
</Column>
</InputGroup>
</>
Kenttäryhmät
Komponentin inline-prop asettaa elementit samalle riville. Asettelua voi muokata käyttämällä Flex CSS-apuluokkia.
Jos kenttäryhmä koostuu useasta kentästä, ne tulee ryhmitellä fieldset-tagilla ja nimetä legend-tagilla ruudunlukijoita varten. Lisäksi nimilapun tulee olla aina fieldset-tagin ensimmäinen lapsi, muuten ruudunlukijat saattavat jättää otsikon lukematta.
<fieldset>
<legend>Ryhmän nimilappu</legend> // Nimen oltava aina tässä kohtaa rakennetta
<div></div>// Muu sisältö
</fieldset>
Ryhmän voi toteuttaa myös role="group" ja aria-describedby -attribuuteilla.
<div role="group" aria-describedby="group-label">
<InputLabel id="group-label">Kesäloma</InputLabel>
<InputGroup inline>
<Input type="date" addonBefore={<InputText addon>Alkaa</InputText>} aria-label="Loma alkaa" />
<span className="kds-mx-4">-</span>
<Input type="date" addonBefore={<InputText addon>Päättyy</InputText>} aria-label="Loma päättyy" />
</InputGroup>
</div>
Kenttäryhmien asetteluun voi käyttää myös Row ja Column komponentteja.
<InputGroup as="fieldset">
<InputLabel as="legend">Ratkaistava aika</InputLabel>
<InputGroup row className="kds-items-center kds-mb-0">
<Column sm="auto">
<Input
id="pvm-alkaa2"
type="date"
addonBefore={<InputText addon>Alkaa</InputText>}
aria-label="Alkaa"
defaultValue="2021-01-01"
/>
</Column>
<Column col="auto">
<span className="kds-mx-2">-</span>
</Column>
<Column sm="auto">
<Input
id="pvm-paattyy2"
type="date"
invalid
addonBefore={<InputText addon>Päättyy</InputText>}
aria-label="Päättyy"
aria-describedby="pvm-paattyy-error2"
/>
</Column>
</InputGroup>
<InputText error id="pvm-paattyy-error2">
Virheilmoitustekstit esitetään kentän alapuolella.
</InputText>
</InputGroup>
Selitteen keskittäminen
Rinnakkain asetelluissa kentissä nimilappu tulee keskittää (ensimmäisen) kentän kanssa. Asemointiin voi käyttää tilanteen mukaan InputGroup ja Column -komponentteja.
InputGroup-komponentin inline-prop keskittää rivillä olevat elementit automaattisesti.
<InputGroup inline>
<InputLabel htmlFor="example-centered" className="kds-mr-4 kds-mb-2 md:kds-mb-0">
Yhteyshenkilön nimi
</InputLabel>
<Input id="example-centered" />
</InputGroup>
InputLabel-komponentin center-prop keskittää selitteen, kun asemointi tehdään Column -komponenttien kanssa.
<InputGroup row>
<Column md={3}>
<InputLabel htmlFor="example-centered2" center>
Yhteyshenkilön nimi
</InputLabel>
</Column>
<Column md={5}>
<Input id="example-centered2" />
</Column>
</InputGroup>