HTML
Lisätietoa HTML-rakenteen ja tyylien hyödyntämisestä löydät sivulta
Käyttö ilman Reactia.
Esikatselu
<div class="kds-input-group">
<div class="kds-input-group kds-text-input">
<label class="kds-input-label" for="lorem">Lorem ipsum</label
><input class="kds-input__input" type="text" id="lorem" />
</div>
</div>
Esimerkit
Yksipalstainen asettelu
<div class="kds-input-group">
<label class="kds-input-label" for="todettuarvo"
>Todettu arvo<span class="kds-sr-only"> Pakollinen tieto</span><span aria-hidden="true"> *</span></label
>
<p class="kds-sr-only kds-input-text" id="todettuarvo-help">euroa</p>
<div class="kds-row kds-gx-2">
<div class="kds-col sm:kds-col--size sm:kds-col--6 md:kds-col--size md:kds-col--4">
<div class="kds-input">
<input
class="kds-input__input kds-input__input--invalid"
type="text"
id="todettuarvo"
required=""
aria-describedby="todettuarvo-error todettuarvo-help"
/>
<div class="kds-input__addon kds-input__addon--after kds-input__addon--md">
<p class="kds-input-text kds-input-text--addon">euroa</p>
</div>
</div>
</div>
</div>
<p class="kds-input-text kds-input-text--invalid" id="todettuarvo-error">
Virheilmoitustekstit esitetään kentän alapuolella.
</p>
</div>
Kaksipalstainen asettelu
<div class="kds-input-group kds-row kds-gx-2">
<div class="kds-col md:kds-col--size md:kds-col--4">
<label class="kds-input-label kds-input-label--col" for="todettuarvo2"
>Todettu arvo<span class="kds-sr-only"> Pakollinen tieto</span><span aria-hidden="true"> *</span></label
>
</div>
<div class="kds-col">
<p class="kds-sr-only kds-input-text" id="todettuarvo2-help">euroa</p>
<div class="kds-row kds-gx-2">
<div class="kds-col sm:kds-col--size sm:kds-col--6 md:kds-col--size md:kds-col--8 lg:kds-col--size lg:kds-col--6">
<div class="kds-input">
<input
class="kds-input__input kds-input__input--invalid"
type="text"
id="todettuarvo2"
required=""
aria-describedby="todettuarvo2-error todettuarvo2-help"
/>
<div class="kds-input__addon kds-input__addon--after kds-input__addon--md">
<p class="kds-input-text kds-input-text--addon">euroa</p>
</div>
</div>
</div>
</div>
<p class="kds-input-text kds-input-text--invalid" id="todettuarvo2-error">
Virheilmoitustekstit esitetään kentän alapuolella.
</p>
</div>
</div>
Selitteen keskittäminen
<div class="kds-input-group kds-input-group--inline">
<label class="kds-mr-4 kds-mb-2 md:kds-mb-0 kds-input-label" for="example-centered">Yhteyshenkilön nimi</label
><input class="kds-input__input" type="text" id="example-centered" />
</div>
CSS-luokat