Input


<div class="form-group">
    <label class="control-label" for="txt">Text input &lt;label&gt;</label>
    <input type="text" class="form-control" id="txt">
</div>

Input with error


<div class="form-group has-error">
    <label class="control-label" for="txt1">Text input with error</label>
    <input type="text" class="form-control" id="txt1">
</div>

Textarea


<div class="form-group">
    <label class="control-label" for="txtarea">Text area</label>
    <textarea class="form-control" rows="5" id="txtarea"></textarea>
</div>

Date group

Date of birth (<legend> same as h6)

<div class="form-group">
    <fieldset>
        <legend>Date of birth (&lt;legend&gt; same as h6)</legend>
        <div class="col-wrap">
            <div class="col col--fluid-3">
                <label class="control-label" for="dd">Day</label>
                <input type="text" class="form-control" id="dd" maxlength="2"
                       placeholder="DD">
            </div>
            <div class="col col--fluid-3">
                <label class="control-label" for="mm">Month</label>
                <input type="text" class="form-control" id="mm" maxlength="2"
                       placeholder="MM">
            </div>
            <div class="col col--fluid-3">
                <label class="control-label" for="yyyy">Year</label>
                <input type="text" class="form-control" id="yyyy" maxlength="4"
                       placeholder="YYYY">
            </div>
        </div>
    </fieldset>
</div>

Checkbox

Check boxes

<div class="form-group">
    <fieldset>
        <legend>Check boxes</legend>
        <div class="checkbox">
            <label><input type="checkbox" value="">Option 1</label>
        </div>
        <div class="checkbox">
            <label><input type="checkbox" value="">Option 2</label>
        </div>
        <div class="checkbox has-error">
            <label><input id="txt2" type="checkbox" value="">Option 3 with error</label>
        </div>
    </fieldset>
</div>

Radio button

Check boxes

<div class="form-group">
    <fieldset>
        <legend>Check boxes</legend>
        <div class="radio">
            <label><input type="radio" name="optradio">Option 1</label>
        </div>
        <div class="radio">
            <label><input type="radio" name="optradio">Option 2</label>
        </div>
        <div class="radio">
            <label><input type="radio" name="optradio">Option 3</label>
        </div>
    </fieldset>
</div>

Select list


<div class="form-group">
    <label class="control-label" for="sel1">Select list</label>
    <select class="form-control" id="sel1">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
    </select>
</div>

Text alert


 <div class="alert" role="alert">
     <h5>There were some errors:</h5>
     <p>Please enter some <a href="#txt1">text</a></p>
     <p>Please select one <a href="#txt2">option</a></p>
 </div>