Input | Vanilla

<div class="dk-input-group">
        <label
            for="labelInput"
            class="dk-input-label">
            Input Label
        </label>
        <input
            type="text"
            id="labelInput"
            placeholder="Placeholder Text"
            class="dk-input"
        />
    </div>

<div class="dk-input-group">
        <label
            for="multiInput1"
            class="dk-input-label">
            Form Field Group with Multiple Inputs
        </label>
        <input
            type="text"
            id="multiInput1"
            placeholder="Hint Text"
            class="dk-input"
        />
        <label
            for="multiInput2"
            class="sr-only dk-input-label">
            Label for 2 input
        </label>
        <input
            type="text"
            id="multiInput2"
            placeholder="Placeholder"
            class="dk-input"
        />
        <small class="dk-error-message">
            It&#x27;s wrong
        </small>
    </div>

<div class="dk-input-group">
        <label
            for="labelInput"
            class="dk-input-label">
            Input Label
        </label>
        <small class="dk-input-helper">
            This is an example of some
            instructional text
        </small>
        <input
            type="text"
            id="labelInput"
            class="dk-input"
        />
    </div>

<div class="dk-input-group">
        <label
            for="errorInput"
            class="dk-input-label">
            Field with error
        </label>
        <input
            type="text"
            id="errorInput"
            class="dk-input dk-input--error"
        />
        <small class="dk-input__error-feedback">
            User Name or Password is incorrect
        </small>
    </div>

<div class="dk-input-group">
        <label
            for="disabledInput"
            class="dk-input-label">
            Disabled field
        </label>
        <input
            type="text"
            id="disabledInput"
            placeholder="Disabled Field"
            disabled=""
            class="dk-input"
        />
    </div>

<div class="dk-input-group">
        <label
            for="labelInput"
            class="dk-input-label">
            Input Label
        </label>
        <textarea
            id="w3review"
            name="w3review"
            placeholder="this is a placeholder"
            rows="8"
            cols="50"
            class="dk-input">
            Lorem ipsum dolor sit amet,
            consectetur adipisicing elit. Ipsa at
            esse cupiditate hic doloremque,
            exercitationem sunt veritatis rerum
            tempora adipisci vel nesciunt
            architecto asperiores sed neque minus
            laboriosam fuga molestias?
        </textarea>
    </div>