Input | Vanilla

<div class="dk-input-group">
        <label
            for="labelInput"
            class="dk-input-label">
            Input field with designator
        </label>
        <div class="dk-input__value">
            <input
                placeholder="Placeholder Text"
                class="dk-input"
            />
            <span class="dk-input-value">kΩ</span>
        </div>
    </div>

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

<div class="dk-input-group">
        <label
            for="labelInput"
            class="dk-input-label">
            Input field with select dropdown
        </label>
        <div class="dk-input__select">
            <input
                placeholder="Placeholder Text"
                class="dk-input"
            />
            <select class="dk-input-select dk-input">
                <option class="">Ω</option>
                <option class="">kΩ</option>
                <option class="">MΩ</option>
            </select>
        </div>
    </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-error-message">
            User Name or Password is incorrect
        </small>
    </div>
    <br class="" />
    <div class="dk-input-group">
        <input
            type="text"
            id="errorInput"
            class="dk-input dk-input--error"
        />
        <span class="dk-input__error-feedback">
            User Name or Password is incorrect
        </span>
    </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="labelInput"
            class="dk-input-label">
            Input Label
        </label>
        <input
            type="text"
            id="labelInput"
            placeholder="Placeholder Text"
            class="dk-input"
        />
        <label
            for="labelInput"
            class="dk-input-label">
            Number Only Input Label
        </label>
        <input
            type="number"
            pattern="[0-9]*"
            min="0"
            id="labelInput"
            placeholder="123456"
            autoComplete="false"
            class="dk-input"
        />
        <label
            for="labelInput"
            class="dk-input-label">
            Email Address Input Label
        </label>
        <input
            type="email"
            min="0"
            id="labelInput"
            placeholder="email@address.com"
            class="dk-input"
        />
        <label
            for="labelInput"
            class="dk-input-label">
            Phone Number Input Label
        </label>
        <input
            type="tel"
            pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
            min="0"
            id="labelInput"
            placeholder="123-456-7890"
            class="dk-input"
        />
        <label
            for="labelInput"
            class="dk-input-label">
            Date Input Label
        </label>
        <input
            type="date"
            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
            id="multiInput1"
            type="text"
            placeholder="Hint Text"
            class="dk-input"
        />
        <label
            for="multiInput2"
            class="sr-only dk-input-label">
            Label for 2 input
        </label>
        <input
            id="multiInput2"
            type="text"
            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 field with search icon
        </label>
        <div class="dk-input__search-icon">
            <input class="dk-input" />
        </div>
    </div>
    <div class="dk-input-group">
        <label
            for="labelInput"
            class="dk-input-label">
            Input field with placeholder text and
            icon
        </label>
        <div class="dk-input__search-icon">
            <input
                placeholder="Placeholder Text"
                class="dk-input"
            />
        </div>
    </div>
    <div class="dk-input-group">
        <label
            for="labelInput"
            class="dk-input-label">
            Input field with red search icon
            button
        </label>
        <div class="dk-input__search-button">
            <input
                placeholder="Placeholder Text"
                class="dk-input"
            />
            <button class="dk-input-button"></button>
        </div>
    </div>
    <div class="dk-input-group">
        <label
            for="labelInput"
            class="dk-input-label">
            Input field with dropdown select and
            red search icon button
        </label>
        <div class="dk-input__flex">
            <input
                placeholder="Placeholder Text"
                class="dk-input"
            />
            <div class="dk-input-select">
                <select class="">
                    <option class="">This</option>
                    <option class="">That</option>
                </select>
            </div>
            <button class="dk-input-button"></button>
        </div>
    </div>

<div class="dk-input-group">
        <label
            for="labelInput"
            class="dk-input-label">
            Input Label
        </label>
        <select class="dk-input">
            <option value="option1" class="">
                Option 1
            </option>
            <option value="option2" class="">
                Option 2
            </option>
        </select>
    </div>

<div class="dk-input-group">
        <label
            for="labelInput"
            class="dk-input-label">
            Input Label
        </label>
        <select class="dk-input">
            <option
                value=""
                disabled=""
                hidden=""
                class=""
                selected="">
                Placeholder
            </option>
            <option value="option1" class="">
                Option 1
            </option>
            <option value="option2" class="">
                Option 2
            </option>
        </select>
    </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>

<div class="dk-input-group">
        <label
            for="labelInput"
            class="dk-input-label">
            Input field with red button and text
        </label>
        <div class="dk-input__text-button">
            <input
                placeholder="Placeholder Text"
                class="dk-input"
            />
            <button class="dk-input-button">
                Submit
            </button>
        </div>
    </div>
    <div class="dk-input-group">
        <label
            for="labelInput"
            class="dk-input-label">
            Input field with add to cart button
        </label>
        <div class="dk-input__cart-button">
            <input class="dk-input" />
            <button class="dk-input-button">
                Add To Cart
            </button>
        </div>
    </div>