Koyaka

Control

Control Basic


    <div class="control">
        <div class="icon">
            <i class="fa-solid fa-phone"></i>
        </div>
        <input class="input" type="text" placeholder="Type here" />
    </div>
    

Control with Multiple Elements


    <div class="control">
        <div class="icon">
            <i class="fa-solid fa-filter"></i>
        </div>

        <select class="select">
            <option disabled selected>Pick a color</option>
            <option>Crimson</option>
            <option>Amber</option>
            <option>Velvet</option>
        </select>

        <div class="icon">
            <i class="fa-solid fa-phone"></i>
        </div>

        <input class="input" type="text" placeholder="Type here" />
    </div>
    

Control Label


    <label class="control">
        <span>https://</span>
        <input class="input" type="url" placeholder="example" />
        <span>.com</span>
    </label>
    

Control with Action


    <div class="control primary">
        <button class="button primary soft sm">
            <div class="icon">
                <i class="fa-solid fa-add"></i>
            </div>
        </button>

        <input class="input lg" type="url" placeholder="example" />

        <span class="loader arc sm"></span>
    </div>