Form Dialog

Grab’n Go form layout recipe examples

Copy, paste, modify.

Sign in

Username

Password

<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="--87259" type="text" placeholder="Email" required="required" />
    <label class="kx-label" for="--87259">
        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="--66237" type="password" placeholder="Minimum 6 characters" required="required" />
    <label class="kx-label" for="--66237">
        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">
            <!-- 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

Email Address

First Name

Last Name

Telephone number (optional)

Phone(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="--43908" type="email" placeholder="name@example.com" required="required" />
    <label class="kx-label" for="--43908">
        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="--17105" type="text" required="required" />
    <label class="kx-label" for="--17105">
        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="--22596" type="text" required="required" />
    <label class="kx-label" for="--22596">
        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">

                    </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="--52918" type="tel" />
    <label class="kx-label kx-is-vishidden" for="--52918">
        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

Street Address

Postal code

City

<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="--17652" type="text" required="required" />
    <label class="kx-label" for="--17652">
        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="--99264" type="number" required="required" />
    <label class="kx-label" for="--99264">
        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="--35836" type="text" required="required" />
    <label class="kx-label" for="--35836">
        City
    </label>
</div>
                    </div>
                </div>
            </fieldset>
        </div>
    </div>
</form>