Koyaka
Patreon

Select

Basic Select

Preview Code 

    <div class="flex gap-2 items-center flex-wrap">
        <div class="field">
            <select class="select">
                <option disabled selected>Pick a color</option>
                <option>Crimson</option>
                <option>Amber</option>
                <option>Velvet</option>
            </select>
        </div>
        <div class="field">
            <select class="select outlined">
                <option disabled selected>Pick a color</option>
                <option>Crimson</option>
                <option>Amber</option>
                <option>Velvet</option>
            </select>
        </div>
        <div class="field">
            <select class="select solid">
                <option disabled selected>Pick a color</option>
                <option>Crimson</option>
                <option>Amber</option>
                <option>Velvet</option>
            </select>
        </div>
    </div>

Select Sizes

Preview Code 

    <div class="flex gap-2 items-center flex-wrap">
        <div class="field">
            <select class="select xs">
                <option>Option 1</option>
            </select>
        </div>
        <div class="field">
            <select class="select sm">
                <option>Option 1</option>
            </select>
        </div>
        <div class="field">
            <select class="select">
                <option>Option 1</option>
            </select>
        </div>
        <div class="field">
            <select class="select lg">
                <option>Option 1</option>
            </select>
        </div>
        <div class="field">
            <select class="select xl">
                <option>Option 1</option>
            </select>
        </div>
    </div>

Select Colors

Preview Code 

    <div class="flex gap-2 items-center flex-wrap">
        <div class="field">
            <select class="select primary">
                <option>Option 1</option>
            </select>
        </div>
        <div class="field">
            <select class="select secondary">
                <option>Option 1</option>
            </select>
        </div>
        <div class="field">
            <select class="select accent">
                <option>Option 1</option>
            </select>
        </div>
        <div class="field">
            <select class="select info">
                <option>Option 1</option>
            </select>
        </div>
        <div class="field">
            <select class="select success">
                <option>Option 1</option>
            </select>
        </div>
        <div class="field">
            <select class="select warning">
                <option>Option 1</option>
            </select>
        </div>
        <div class="field">
            <select class="select danger">
                <option>Option 1</option>
            </select>
        </div>
    </div>

Contents