HTML
Lisätietoa HTML-rakenteen ja tyylien hyödyntämisestä löydät sivulta
Käyttö ilman Reactia.
Esikatselu
<div class="kds-input-group kds-file-input">
<span class="kds-input-label" id="file-input-example-label">Lorem Ipsum</span>
<p class="kds-input-text" id="file-input-example-help">Dolor sit amet</p>
<button
class="kds-flex kds-btn kds-btn--outline kds-btn--primary"
aria-describedby="file-input-example-label file-input-example-help file-input-example-info"
type="button"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="1em"
height="1em"
class="kds-mr-2 kds-icon kds-icon--size-relative"
role="img"
aria-hidden="true"
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-miterlimit="10"
stroke-width="2"
d="M12 2v20M2 12h20"
></path>
<path fill="none" d="M0 0h24v24H0z"></path></svg
>Adipiscing elit
</button>
<input hidden id="file-input-example" type="file" />
<p class="kds-input-text kds-input-text--info" id="file-input-example-info">Consectetur</p>
</div>