Form fields

  1. Form fields usage guides
  1. Home
  2. Form fields
Radio buttons
Example:
Copy HTML here
 
<div class="label-text">
    <div class="form-check form-check-inline">
        <input class="" type="radio" name="inlineRadioOptions" id="Eziway" value="option1">
        <label class="form-check-label" for="Eziway">Eziway</label>
    </div>
    <div class="form-check form-check-inline">
        <input class="" type="radio" name="inlineRadioOptions" id="Licensee" value="option2">
        <label class="form-check-label" for="Licensee">Licensee</label>
    </div>
</div>
Check boxes
Example:
Copy HTML here
 
<div class="col-12 pt-2">
    <div class="form-check form-check-inline">
        <input class="" type="checkbox" name="Yes" id="ReductionList" value="option1">
        <label class="form-check-label align-text-bottom" for="ReductionList">4 Year Reduction List</label>
    </div>
</div>
Options
Example:
Copy HTML here
 
<div class="row mb-3">
    <div class="col-6">
        <label class="label-text mb-2">
            Group:
        </label>
        <select class="form-control form-select">
            <option value="Select option">Option 1</option>
            <option value="Select option">Option 1</option>
            <option value="Select option">Option 1</option>
            <option value="Select option">Option 1</option>
        </select>
    </div>
    <div class="col-6">
        <label class="label-text mb-2">
            Employer:
        </label>
        <select class="form-control form-select">
            <option value="Select option">Option 1</option>
            <option value="Select option">Option 1</option>
            <option value="Select option">Option 1</option>
            <option value="Select option">Option 1</option>
        </select>
    </div>
</div>
Date selection
Example:
Copy HTML here
 
<div class="col-lg-6 col-md-6 col-12 mt-3 mt-lg-0 mt-md-0">
    <div class="row">
        <div class="col-12">
            <label class="label-text mb-2">
                Date Opened:
            </label>
        </div>
    </div>
    <div class="row">
        <div class="col-6 d-flex align-items-center">
            <label class="label-text">From:&nbsp;</label>
            <div> <input type="date" class="form-control"></div>
            <label class="label-text ms-3">To:&nbsp;</label>
            <div> <input type="date" class="form-control"></div>
        </div>
    </div>
</div>
File upload
Example:
Copy HTML here
 
<div class="col-6">
    <label class="label-text mb-2">Payroll Actual Deduction Upload</label>
    <input type="file" class="form-control">
</div>
Cycle upload
Example:
Copy HTML here
 
<div class="col-12 col-md-6">
    <label class="label-text mb-2">Upload into: </label>
    <div class="input-group">
        <select class="form-select">
            <option>Last Pay Cycle 15/08/2023</option>
            <option selected="selected">Current Pay Cycle 29/08/2023</option>
            <option>Fortnightly of 12/09/2023</option>
            <option>Fortnightly of 26/09/2023</option>
        </select>
        <button class="btn btn-sm btn-primary mb-0">Upload</button>
    </div>
</div>
Yes / No Options
Insurance questions
Example:
Copy HTML here
 
<div class="col-lg-12">
    <div class="tab-content  p-3">
        <div class="row">
            <div class="col-lg-12">
                <div class="px-2 heading03 mb-2 pt-0">Insurance questions</div>
            </div>
        </div>
        <div class="row pt-0">
            <div class="col-12">
                <div class="px-2 striped-row">
                    <div class="row">
                        <div class="col-lg-6 col-md-12 col-sm-12 col-12 required">
                            <label class="label-text">In the past 3 years been declared bankrupt, insolvent, or had an administrator appointed</label>
                        </div>
                        <div class="col-lg-6 col-md-12 col-sm-12 col-12">
                            <div class="input-group">
                                <div class="form-check form-check-inline pt-1">
                                    <input class="" type="radio" name="inlineRadioOptions" id="Yes" value="">
                                    <label class="form-check-label align-top" for="Yes">Yes</label>
                                </div>
                                <div class="form-check form-check-inline pt-1">
                                    <input class="" type="radio" name="inlineRadioOptions" id="no" value="">
                                    <label class="form-check-label align-top" for="no">No</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-6 col-md-12 col-sm-12 col-12 required">
                            <label class="label-text">In the past 3 years been convicted of a criminal offense</label>
                        </div>
                        <div class="col-lg-6 col-md-12 col-sm-12 col-12">
                            <div class="input-group">
                                <div class="form-check form-check-inline pt-1">
                                    <input class="" type="radio" name="inlineRadioOptions" id="Yes2" value="">
                                    <label class="form-check-label align-top" for="Yes2">Yes</label>
                                </div>
                                <div class="form-check form-check-inline pt-1">
                                    <input class="" type="radio" name="inlineRadioOptions" id="no2" value="">
                                    <label class="form-check-label align-top" for="no2">No</label>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>

    </div>
</div>
Label and Field text
Exemption_17000
Example:
Copy HTML here
 
<div class="col-12 col-md-2 mb-2">
    <label class="label-text mb-2">FBT Status:</label>
    <div class="data-value">Exemption_17000</div>
</div>
Inline label and input field
Example:
Copy HTML here
 
<div class="row">
    <div class="col-md-4 col-xl-3 col-lg-3 mb-2 required">
        <label class="label-text">Roadside Assist Provider Option Name:</label>
    </div>
    <div class="col-md-4 col-xl-3 col-lg-3 col-12 ">
        <input type="text" class="form-control">
    </div>
</div>
Inline label and textarea field
Example:
Copy HTML here
 
<div class="row">
    <div class="col-3 mb-2">
        <label class="label-text">Description:</label>
    </div>
    <div class="col-5">
        <textarea class="form-control h-auto"></textarea>
    </div>
</div>
Input groups (Without required field)
Example:
Copy HTML here
 
<div class="input-group">
    <div class="input-group-text ">
        <label class="col-form-label ">ACN:</label>
    </div>
    <input class="form-control" id="txtACN" name="ACN" type="text" value="" maxlength="11" minlength="11" onkeypress="return event.charCode >= 48 && event.charCode <= 57" autocomplete="off">
</div>
Input groups (With required field)
Company Name is Required
Example:
Copy HTML here
 
<div class="input-group">
    <span class="input-group-text"><label class="col-form-label text-start required_field" for="Company_Name">Company Name</label></span>
    <input class="form-control required text-box single-line" id="Name" maxlength="200" name="Name" placeholder="Enter Name" type="text" value="( St ANNA's ) Croatian Ukrainian &amp; Belarusian Aged Care Association">
</div>
<span class="field-validation-valid text-danger form-text text-xs" data-valmsg-for="Name" data-valmsg-replace="true"></span>
Validation text position and format for various fields
Name is Required
Field is Required
Select one of the option
Select the option
Upload the file
Upload the file
Copy HTML here
 
<span class="field-validation-valid text-danger form-text text-xs" data-valmsg-for="Field" data-valmsg-replace="true">Field is Required</span>