Koyaka

Input

Basic Input


    <div class="flex gap-2 items-center flex-wrap">
        <div class="field">
            <input type="text" placeholder="Type here" class="input" />
        </div>
        <div class="field">
            <input type="text" placeholder="Type here" class="input outlined" />
        </div>
        <div class="field">
            <input type="text" placeholder="Type here" class="input solid" />
        </div>
    </div>
    

Input Sizes


    <div class="flex gap-2 items-center flex-wrap">
        <div class="field">
            <input class="input xs" type="text" placeholder="Type here" />
        </div>
        <div class="field">
            <input class="input sm" type="text" placeholder="Type here" />
        </div>
        <div class="field">
            <input class="input" type="text" placeholder="Type here" />
        </div>
        <div class="field">
            <input class="input lg" type="text" placeholder="Type here" />
        </div>
        <div class="field">
            <input class="input xl" type="text" placeholder="Type here" />
        </div>
    </div>
    

Input Colors


    <div class="flex gap-2 items-center flex-wrap">
        <div class="field">
            <input class="input primary" type="text" placeholder="Type here" />
        </div>
        <div class="field">
            <input
                class="input secondary"
                type="text"
                placeholder="Type here"
            />
        </div>
        <div class="field">
            <input class="input accent" type="text" placeholder="Type here" />
        </div>
        <div class="field">
            <input class="input info" type="text" placeholder="Type here" />
        </div>
        <div class="field">
            <input class="input success" type="text" placeholder="Type here" />
        </div>
        <div class="field">
            <input class="input warning" type="text" placeholder="Type here" />
        </div>
        <div class="field">
            <input class="input danger" type="text" placeholder="Type here" />
        </div>
    </div>