Input Amount

<!-- Default -->
<div class="sds-input -hasShadow">
    <input id="" class="sds-input form-control" type="number" placeholder="0" value="4000" aria-describedby="input-amount-hint">

    <div class="sds-input__shadowInput form-control" aria-hidden="true">
        <div class="sds-input__shadowValue">
            4000
        </div>
        <div class="sds-input__shadowCurrency">
            €
        </div>
    </div>

    <div class="sds-input__hint">
        <p class="sds-hint sds-textHelperSmall" id="input-amount-hint">

            {Hint}

        </p>
    </div>

</div>

<!-- Icon -->
<div class="sds-input -hasShadow">
    <input id="" class="sds-input form-control -hasIcon -hasIconRight" type="number" placeholder="0" value="4000" aria-describedby="input-amount-hint">

    <div class="sds-input__shadowInput form-control" aria-hidden="true">
        <div class="sds-input__shadowValue">
            4000
        </div>
        <div class="sds-input__shadowCurrency">
            €
        </div>
    </div>

    <div class="sds-input__iconRight -isButton">

        <button type="button" class="sds-btn -iconBtn -btnSecondary -ghost">

            <span class="sds-icon sds-icon-trash"></span>

        </button>

    </div>

    <div class="sds-input__hint">
        <p class="sds-hint sds-textHelperSmall" id="input-amount-hint">

            {Hint}

        </p>
    </div>

</div>

<!-- Large -->
<div class="sds-input -hasShadow -inputLg">
    <input id="" class="sds-input form-control" type="number" placeholder="0" value="4000" aria-describedby="input-amount-hint">

    <div class="sds-input__shadowInput form-control" aria-hidden="true">
        <div class="sds-input__shadowValue">
            4000
        </div>
        <div class="sds-input__shadowCurrency">
            €
        </div>
    </div>

    <div class="sds-input__hint">
        <p class="sds-hint sds-textHelperSmall" id="input-amount-hint">

            {Hint}

        </p>
    </div>

</div>

<!-- Xl -->
<div class="sds-input -hasShadow -inputXl">
    <input id="" class="sds-input form-control" type="number" placeholder="0" value="4000" aria-describedby="input-amount-hint">

    <div class="sds-input__shadowInput form-control" aria-hidden="true">
        <div class="sds-input__shadowValue">
            4000
        </div>
        <div class="sds-input__shadowCurrency">
            €
        </div>
    </div>

    <div class="sds-input__hint">
        <p class="sds-hint sds-textHelperSmall" id="input-amount-hint">

            {Hint}

        </p>
    </div>

</div>

<!-- 2 Xl -->
<div class="sds-input -hasShadow -input2xl">
    <input id="" class="sds-input form-control" type="number" placeholder="0" value="4000" aria-describedby="input-amount-hint">

    <div class="sds-input__shadowInput form-control" aria-hidden="true">
        <div class="sds-input__shadowValue">
            4000
        </div>
        <div class="sds-input__shadowCurrency">
            €
        </div>
    </div>

    <div class="sds-input__hint">
        <p class="sds-hint sds-textHelperSmall" id="input-amount-hint">

            {Hint}

        </p>
    </div>

</div>

<!-- Disabled -->
<div class="sds-input -hasShadow">
    <input id="" class="sds-input form-control" type="number" placeholder="0" value="4000" disabled aria-describedby="input-amount-hint">

    <div class="sds-input__shadowInput form-control" aria-hidden="true">
        <div class="sds-input__shadowValue">
            4000
        </div>
        <div class="sds-input__shadowCurrency">
            €
        </div>
    </div>

    <div class="sds-input__hint">
        <p class="sds-hint sds-textHelperSmall" id="input-amount-hint">

            {Hint}

        </p>
    </div>

</div>

<!-- Readonly -->
<div class="sds-input -hasShadow">
    <input id="" class="sds-input form-control" type="number" placeholder="0" value="4000" readonly aria-describedby="input-amount-hint">

    <div class="sds-input__shadowInput form-control" aria-hidden="true">
        <div class="sds-input__shadowValue">
            4000
        </div>
        <div class="sds-input__shadowCurrency">
            €
        </div>
    </div>

    <div class="sds-input__hint">
        <p class="sds-hint sds-textHelperSmall" id="input-amount-hint">

            {Hint}

        </p>
    </div>

</div>

<!-- Error -->
<div class="sds-input -hasShadow">
    <input id="" class="sds-input form-control is-invalid" type="number" placeholder="0" value="4000" aria-invalid="true" aria-describedby=" input-amount-error">

    <div class="sds-input__shadowInput form-control" aria-hidden="true">
        <div class="sds-input__shadowValue">
            4000
        </div>
        <div class="sds-input__shadowCurrency">
            €
        </div>
    </div>

    <div class="invalid-feedback">
        <p class="sds-hint sds-textHelperSmall -hintError" id="input-amount-error">

            <span class="sds-hint__icon sds-icon sds-icon-alert" aria-hidden="true"></span>

            {Hint}

        </p>
    </div>

</div>

<!-- Hint Error -->
<div class="sds-input -hasShadow">
    <input id="" class="sds-input form-control is-invalid" type="number" placeholder="0" value="4000" aria-invalid="true" aria-describedby="input-amount-hint input-amount-error">

    <div class="sds-input__shadowInput form-control" aria-hidden="true">
        <div class="sds-input__shadowValue">
            4000
        </div>
        <div class="sds-input__shadowCurrency">
            €
        </div>
    </div>

    <div class="invalid-feedback">
        <p class="sds-hint sds-textHelperSmall -hintError" id="input-amount-error">

            <span class="sds-hint__icon sds-icon sds-icon-alert" aria-hidden="true"></span>

            {Hint}

        </p>
    </div>

    <div class="sds-input__hint">
        <p class="sds-hint sds-textHelperSmall" id="input-amount-hint">

            {Hint}

        </p>
    </div>

</div>