Input Text

<!-- Default -->
<div class="sds-input">
    <input id="" class="sds-input form-control" type="text" placeholder="{ Placeholder }" value="" aria-describedby="input-text-hint-message">

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

            {Hint}

        </p>
    </div>

</div>

<!-- Disabled -->
<div class="sds-input">
    <input id="" class="sds-input form-control" type="text" placeholder="{ Placeholder }" value="Disabled content" disabled aria-describedby="input-text-disabled-hint">

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

            {Hint}

        </p>
    </div>

</div>

<!-- Readonly -->
<div class="sds-input">
    <input id="" class="sds-input form-control" type="text" placeholder="{ Placeholder }" value="Read only content" readonly aria-describedby="input-text-readonly-hint">

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

            {Hint}

        </p>
    </div>

</div>

<!-- Error -->
<div class="sds-input">
    <input id="" class="sds-input form-control is-invalid" type="text" placeholder="{ Placeholder }" value="" aria-invalid="true" aria-describedby="input-text-hint-message input-text-error-message">

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

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

            { Hint Error }

        </p>
    </div>

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

            {Hint}

        </p>
    </div>

</div>

<!-- Trailing Button -->
<div class="sds-input">
    <input id="" class="sds-input form-control -hasIcon -hasIconRight" type="text" placeholder="{ Placeholder }" value="" aria-describedby="input-text-hint-message">

    <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-text-hint-message">

            {Hint}

        </p>
    </div>

</div>

<!-- Lg -->
<div class="sds-input -inputLg">
    <input id="" class="sds-input form-control" type="text" placeholder="{ Placeholder }" value="" aria-describedby="input-text-hint-message">

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

            {Hint}

        </p>
    </div>

</div>

<!-- Xl -->
<div class="sds-input -inputXl">
    <input id="" class="sds-input form-control" type="text" placeholder="{ Placeholder }" value="" aria-describedby="input-text-hint-message">

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

            {Hint}

        </p>
    </div>

</div>

<!-- 2 Xl -->
<div class="sds-input -input2xl">
    <input id="" class="sds-input form-control" type="text" placeholder="{ Placeholder }" value="" aria-describedby="input-text-hint-message">

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

            {Hint}

        </p>
    </div>

</div>