menu

DESIGN SYSTEM

Form Elements

To make the styling of form elements consistent, follow the class names in these examples and wrap these form controls in a div class="form-group"

INPUTS

    <label for="first_name">First Name (Label)</label>   
    

    <input class="form-control" id="last_name" maxlength="40" name="first_name" size="20" type="text" placeholder="Text input">
    

    <select class="form-control" id="state" name="state">
        <option disabled="disabled" selected="selected" value="">Select</option>
    </select>
    

    <input class="form-control" id="datePlaceholder" maxlength="40" name="datePlaceholder" size="12" type="date">
    
Radio buttons

    <legend class="question">Radio buttons</legend>
    <div class="radio">
        <input type="radio" name="radio-buttons" id="yes" value="yes" checked="checked">
        <label for="yes" class="radio-label">Yes</label>
    </div>
    
Checkboxes

    <legend class="question">Checkboxes</legend>
    <div class="checkbox">
        <input type="checkbox" name="check-box" id="option-1" value="1">
        <label for="option-1" class="checkbox-label">Option 1</label>
    </div>
    
FULL FORM EXAMPLE

    <div id="form-example">
        <div class="form-group">
            <label for="first_name">First Name</label>
            <input class="form-control" id="first_name" maxlength="40" name="first_name" size="20" type="text">
        </div>

        <div class="form-group">
            <label for="last_name">Last Name</label>
            <input class="form-control" id="last_name" maxlength="40" name="first_name" size="20" type="text">
        </div>

        <div class="form-group">
            <label for="state">State</label>
            <select class="form-control" id="state" name="state">
                <option disabled="disabled" selected="selected" value="">Select</option>
                <option value="ACT">ACT</option>
                <option value="NSW">NSW</option>
                <option value="NT">NT</option>
                <option value="QLD">QLD</option>
                <option value="SA">SA</option>
                <option value="TAS">TAS</option>
                <option value="VIC">VIC</option>
                <option value="WA">WA</option>
                <option value="NA">Not applicable</option>
            </select>
        </div>

        <div class="form-group radio-group">
            <legend class="question">Radio buttons</legend>
            <div class="radio">
                <input type="radio" name="radio-buttons" id="yes" value="yes" checked="checked">
                <label for="yes" class="radio-label">Yes</label>
            </div>
            <div class="radio">
                <input type="radio" name="radio-buttons" id="no" value="no">
                <label for="no" class="radio-label">No</label>
            </div>
            <div class="radio">
                <input type="radio" name="radio-buttons" id="maybe" value="maybe">
                <label for="maybe" class="radio-label">Maybe</label>
            </div>
        </div>

        <div class="form-group">
            <legend class="question">Checkboxes</legend>
            <div class="checkbox">
                <input type="checkbox" name="check-box" id="option-1" value="1">
                <label for="option-1" class="checkbox-label">Option 1</label>
            </div>

            <div class="checkbox">
                <input type="checkbox" name="check-box" id="option-2" value="1">
                <label for="option-2" class="checkbox-label">Option 2</label>
            </div>

            <div class="checkbox">
                <input type="checkbox" name="check-box" id="option-3" value="1">
                <label for="option-3" class="checkbox-label">Option 3</label>
            </div>

            <div class="checkbox">
                <input type="checkbox" name="check-box" id="option-4" value="1">
                <label for="option-4" class="checkbox-label">Option 4</label>
            </div>
        </div>
    </div>