HTML
Lisätietoa HTML-rakenteen ja tyylien hyödyntämisestä löydät sivulta
Käyttö ilman Reactia.
Esikatselu
<input class="kds-input__input" type="text" />
Tekstikentän osat
<div class="kds-input-group">
<label class="kds-input-label" for="text-field"> Nimilappu (InputLabel) </label>
<p class="kds-input-text kds-mb-2" id="text-field-help">Täyttöohje (InputText)</p>
<input
class="kds-input__input"
type="text"
id="text-field"
aria-describedby="text-field-help text-field-info"
placeholder="Tekstikenttä (Input)"
/>
<p class="kds-input-text kds-input-text--info" id="text-field-info">Aputeksti (InputText)</p>
</div>
Esimerkit
Tekstikentän eri tilat
<div>
<div class="kds-input-group">
<input class="kds-input__input" type="text" aria-label="Esimerkki tekstikentästä" placeholder="Tekstikenttä" />
</div>
<div class="kds-input-group">
<input
class="kds-input__input"
type="text"
aria-label="Esimerkki vain-luku tekstikentästä"
readonly
placeholder="Tekstikenttä - vain luku"
/>
</div>
<div class="kds-input-group">
<input
class="kds-input__input"
disabled
type="text"
aria-label="Esimerkki estetystä tekstikentästä"
placeholder="Tekstikenttä - estetty"
/>
</div>
<div class="kds-input-group">
<input
aria-invalid="true"
class="kds-input__input kds-input__input--invalid"
type="text"
aria-label="Esimerkki virheellisestä tekstikentästä"
required
placeholder="Tekstikenttä - virheellinen arvo"
/>
</div>
</div>
Kokovaihtoehdot
<div>
<div class="kds-input-group kds-input-group--xs">
<label class="kds-input-label kds-input-label--xs" for="input-size-xs">Tekstikenttä xs-koossa</label>
<p class="kds-input-text kds-input-text--xs" id="invalid-text-field-error">Täyttöohje (xs)</p>
<input class="kds-input__input kds-input__input--xs" type="text" id="input-size-xs" />
</div>
<div class="kds-input-group kds-input-group--sm">
<label class="kds-input-label kds-input-label--sm" for="input-size-sm">Tekstikenttä sm-koossa</label>
<p class="kds-input-text kds-input-text--sm" id="invalid-text-field-error">Täyttöohje (sm)</p>
<input class="kds-input__input kds-input__input--sm" type="text" id="input-size-sm" />
</div>
<div class="kds-input-group">
<label class="kds-input-label" for="input-size-md">Tekstikenttä md-koossa (oletus)</label>
<p class="kds-input-text kds-input-text--md" id="invalid-text-field-error">Täyttöohje (md)</p>
<input class="kds-input__input" type="text" id="input-size-md" />
</div>
</div>
Lisätietojen yhdistäminen
<div class="kds-input-group">
<label class="kds-input-label" for="unemployment">
Työttömyyden aikaiset palkkatulot
</label>
<div class="kds-input">
<div class="kds-input__addon kds-input__addon--before kds-input__addon--md">
<p class="kds-input-text kds-input-text--addon">€</p>
</div>
<input class="kds-input__input" type="number" id="unemployment" style="max-width: 12rem" />
<div class="kds-input__addon kds-input__addon--after kds-input__addon--md">
<div class="kds-select">
<select class="kds-select__input" aria-label="Tulon tyyppi">
<option value="month">euroa/kuukausi</option>
<option value="four-week">euroa/4 viikkoa</option>
</select>
</div>
</div>
</div>
</div>
CSS-luokat