Koyaka

Group

Group Basic


    <div class="group">
        <input class="input" type="text" placeholder="Your name" />
        <select class="select">
            <option disabled selected>Pick a color</option>
            <option>Crimson</option>
            <option>Amber</option>
            <option>Velvet</option>
        </select>
        <button class="button primary">Submit</button>
    </div>
    

Group Number Input


    <div class="group">
        <button class="button">
            <div class="icon"><i class="fa-solid fa-minus"></i></div>
        </button>
        <input class="input" type="number" value="0" />
        <button class="button">
            <div class="icon"><i class="fa-solid fa-add"></i></div>
        </button>
    </div>
    

Group Textarea + Button


    <div class="group">
        <textarea
            class="textarea"
            rows="1"
            placeholder="Type message..."
        ></textarea>
        <button class="button primary">Send</button>
    </div>
    

Group Input + Icon


    <div class="group">
        <input class="input" type="text" placeholder="Search..." />
        <button class="button">
            <div class="icon"><i class="fa-solid fa-magnifying-glass"></i></div>
        </button>
    </div>
    

Group Read-only Input


    <div class="group">
        <input class="input" type="text" value="Fixed value" readonly />
        <button class="button info">Copy</button>
    </div>