Form Layout

Grab’n Go form layout recipe examples

Copy, paste, modify.

Sign in

OR
<form class="kx-form kx-container kx-container--mob-m">
    <div class="kx-row kx-row--gutters">
        <div class="kx-col kx-col--12">
            <!-- FIELD Component -->
<div class="kx-form__element">
    <input class="kx-field kx-field--size-large kx-hide-required" id="--73315" type="text" placeholder="Email" required="required" />
    <label class="kx-label" for="--73315">
        Username
    </label>
</div>
        </div>
        <div class="kx-col kx-col--12">
            <!-- FIELD Component -->
<div class="kx-form__element">
    <input class="kx-field kx-field--size-large kx-hide-required" id="--5868" type="password" placeholder="Minimum 6 characters" required="required" />
    <label class="kx-label" for="--5868">
        Password
    </label>
</div>
        </div>
        <div class="kx-col kx-col--12">
            <!-- BUTTON Component -->
<button class="kx-btn kx-btn--skin-primary kx-btn--size-large kx-btn--fluid">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">Sign In</span>
    </span>
</button>
        </div>
        <div class="kx-col kx-col--12">
            <div class="kx-divider kx-divider--size-none"><span class="kx-divider__txt">OR</span></div>
        </div>
        <div class="kx-col kx-col--12">
            <!-- BUTTON Component -->
<button class="kx-btn kx-btn--skin-secondary kx-btn--size-large kx-btn--fluid">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">Creat New Account</span>
    </span>
</button>
        </div>
    </div>
</form>

Register

Telephone number (optional)
<form class="kx-form kx-container kx-container--tab-m">
    <div class="kx-row kx-row--gutters">
        <div class="kx-col kx-col--12">
            <!-- FIELD Component -->
<div class="kx-form__element">
    <input class="kx-field kx-field--size-large kx-hide-required" id="--82970" type="email" placeholder="name@example.com" required="required" />
    <label class="kx-label" for="--82970">
        Email Address
    </label>
</div>
        </div>
        <div class="kx-col kx-col--12 kx-col--5@tab-s">
            <!-- FIELD Component -->
<div class="kx-form__element">
    <input class="kx-field kx-field--size-large kx-hide-required" id="--15891" type="text" required="required" />
    <label class="kx-label" for="--15891">
        First Name
    </label>
</div>
        </div>
        <div class="kx-col kx-col--12 kx-col--7@tab-s">
            <!-- FIELD Component -->
<div class="kx-form__element">
    <input class="kx-field kx-field--size-large kx-hide-required" id="--20289" type="text" required="required" />
    <label class="kx-label" for="--20289">
        Last Name
    </label>
</div>
        </div>
        <div class="kx-col kx-col--12">
            <fieldset class="kx-fieldset">
                <legend class="kx-label">Telephone number <span class="kx-form__optional">(optional)</span></legend>
                <div class="kx-row kx-row--gutters">
                    <div class="kx-col kx-col--4 kx-col--3@tab-s">
                        <!-- SELECT Component -->
<div class="kx-form__element kx-ui">
    <select class="kx-field kx-field--size-large kx-ui" id="--53868">
        <option value="1">+45</option>
        <option value="2">+46</option>
        <option value="3" selected>+47</option>
        <option value="4">+48</option>
    </select>
    <label class="kx-label kx-is-vishidden" for="--53868">
        Country
    </label>
    </div>
                    </div>
                    <div class="kx-col kx-col--8 kx-col--9@tab-s">
                        <!-- FIELD Component -->
<div class="kx-form__element">
    <input class="kx-field kx-field--size-large" id="--20376" type="tel" />
    <label class="kx-label kx-is-vishidden" for="--20376">
        Phone<span class="kx-form__optional">(optional)</span>
    </label>
</div>
                    </div>
                </div>
            </fieldset>
        </div>
        <div class="kx-col kx-col--12">
            <!-- BUTTON Component -->
<button class="kx-btn kx-btn--skin-primary kx-btn--size-large">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">Create Account</span>
    </span>
</button>
        </div>
    </div>
</form>

Address

Address
<form class="kx-form kx-container kx-container--tab-m kx-ui">
    <div class="kx-row kx-row--gutters">
        <div class="kx-col kx-col--12">
            <fieldset class="kx-fieldset">
                <legend class="kx-label kx-is-vishidden">Address</legend>
                <div class="kx-row kx-row--gutters">
                    <div class="kx-col kx-col--12">
                        <!-- FIELD Component -->
<div class="kx-form__element">
    <input class="kx-field kx-field--size-large kx-hide-required" id="--95976" type="text" required="required" />
    <label class="kx-label" for="--95976">
        Street Address
    </label>
</div>
                    </div>
                    <div class="kx-col kx-col--4 kx-col--2@tab-s">
                        <!-- FIELD Component -->
<div class="kx-form__element">
    <input class="kx-field kx-field--size-large kx-hide-spin-button kx-hide-required" id="--39486" type="number" required="required" />
    <label class="kx-label" for="--39486">
        Postal code
    </label>
</div>
                    </div>
                    <div class="kx-col kx-col--8 kx-col--10@tab-s">
                        <!-- FIELD Component -->
<div class="kx-form__element">
    <input class="kx-field kx-field--size-large kx-hide-required" id="--82509" type="text" required="required" />
    <label class="kx-label" for="--82509">
        City
    </label>
</div>
                    </div>
                </div>
            </fieldset>
        </div>
    </div>
</form>