⌘ K
esc

    FormLayout

    An extension to Grid System with fine tuning to create forms.

    Vertical
    
    <div class="card">
        <h5>Vertical</h5>
        <div class="field">
            <label for="firstname1">Firstname</label>
            <input id="firstname1" type="text" class="inputfield w-full">
        </div>
        <div class="field">
            <label for="lastname1">Lastname</label>
            <input id="lastname1" type="text" class="inputfield w-full">
        </div>
    </div>
    
    
    Vertical and Grid
    
    <div class="card">
        <h5>Vertical and Grid</h5>
        <div class="formgrid grid">
            <div class="field col">
                <label for="firstname2">Firstname</label>
                <input id="firstname2" type="text" class="inputfield w-full">
            </div>
            <div class="field col">
                <label for="lastname2">Lastname</label>
                <input id="lastname2" type="text" class="inputfield w-full">
            </div>
        </div>
    </div>
    
    
    Horizontal and Fixed Width
    
    <div class="field grid">
        <label for="firstname3" class="col-fixed" style="width:100px">Firstname</label>
        <div class="col">
            <input id="firstname3" type="text" class="inputfield">
        </div>
    </div>
    <div class="field grid">
        <label for="lastname3" class="col-fixed" style="width:100px">Lastname</label>
        <div class="col">
            <input id="lastname3" type="text" class="inputfield">
        </div>
    </div>
    
    
    Horizontal
    
    <div class="card">
        <h5>Horizontal</h5>
        <div class="field grid">
            <label for="firstname4" class="col-12 mb-2 md:col-2 md:mb-0">Firstname</label>
            <div class="col-12 md:col-10">
                <input id="firstname4" type="text" class="inputfield w-full">
            </div>
        </div>
        <div class="field grid">
            <label for="lastname4" class="col-12 mb-2 md:col-2 md:mb-0">Lastname</label>
            <div class="col-12 md:col-10">
                <input id="lastname4" type="text" class="inputfield w-full">
            </div>
        </div>
    </div>
    
    
    Inline
    
    <div class="formgroup-inline">
        <div class="field">
            <label for="firstname5" class="p-sr-only">Firstname</label>
            <input id="firstname5" type="text" class="inputfield" placeholder="Firstname">
        </div>
        <div class="field">
            <label for="lastname5" class="p-sr-only">Lastname</label>
            <input id="lastname5" type="text" class="inputfield" placeholder="Lastname">
        </div>
        <button class="button" type="button" value="Submit">Submit</button>
    </div>
    
    
    Vertical Checkbox
    Horizontal Checkbox
    
    <div class="card">
        <h5>Vertical Checkbox</h5>
        <div class="field-checkbox">
            <input type="checkbox" id="city1">
            <label for="city1">Chicago</label>
        </div>
        <div class="field-checkbox">
            <input type="checkbox" id="city2">
            <label for="city2">Los Angeles</label>
        </div>
    
        <h5>Horizontal Checkbox</h5>
        <div class="formgroup-inline">
            <div class="field-checkbox">
                <input type="checkbox" id="city3">
                <label for="city3">Chicago</label>
            </div>
            <div class="field-checkbox">
                <input type="checkbox" id="city4">
                <label for="city4">Los Angeles</label>
            </div>
        </div>
    </div>
    
    
    Vertical RadioButton
    Horizontal RadioButton
    
    <div class="card">
        <h5>Vertical RadioButton</h5>
        <div class="field-radiobutton">
            <input type="radio" id="city5">
            <label for="city5">Chicago</label>
        </div>
        <div class="field-radiobutton">
            <input type="radio" id="city6">
            <label for="city6">Los Angeles</label>
        </div>
    
        <h5>Horizontal RadioButton</h5>
        <div class="formgroup-inline">
            <div class="field-radiobutton">
                <input type="radio" id="city7">
                <label for="city7">Chicago</label>
            </div>
            <div class="field-radiobutton">
                <input type="radio" id="city8">
                <label for="city8">Los Angeles</label>
            </div>
        </div>
    </div>
    
    
    Help Text
    Enter your username to reset your password.
    
    <div class="card">
        <h5>Help Text</h5>
        <div class="field">
            <label for="username">Username</label>
            <input id="username" type="username" class="inputfield w-full" aria-describedby="username-help">
            <small id="username-help">Enter your username to reset your password.</small>
        </div>
    </div>
    
    
    Advanced
    
    <div class="card">
        <h5>Advanced</h5>
        <div class="formgrid grid">
            <div class="field col-12 md:col-6">
                <label for="firstname6">Firstname</label>
                <input id="firstname6" type="text" class="inputfield w-full">
            </div>
            <div class="field col-12 md:col-6">
                <label for="lastname6">Lastname</label>
                <input id="lastname6" type="text" class="inputfield w-full">
            </div>
            <div class="field col-12">
                <label for="address">Address</label>
                <textarea id="address" type="text" rows="4" class="inputfield w-full"></textarea>
            </div>
            <div class="field col-12 md:col-6">
                <label for="city">City</label>
                <input id="city" type="text" class="inputfield w-full">
            </div>
            <div class="field col-12 md:col-3">
                <label for="state">State</label>
                <select id="state" class="w-full inputfield" style="appearance: auto">
                    <option>Arizona</option>
                    <option>California</option>
                    <option>Florida</option>
                    <option>Ohio</option>
                    <option>Washington</option>
                </select>
            </div>
            <div class="field col-12 md:col-3">
                <label for="zip">Zip</label>
                <input id="zip" type="text" class="inputfield w-full">
            </div>
        </div>
    </div>