BETA This is a new service — your feedback will help us to improve it.

Back to components

Date input

Contents

Example
What is your date of birth? For example, 31 3 1980

HTML Snippet for date input

<form>
    <div class="form-group">
        <fieldset>
            <legend>
                <span class="form-label-bold">What is your date of birth?</span>
                <span class="form-hint">For example, 31 3 1980</span>
            </legend>
            <div class="form-date">
                <div class="form-group form-group-day">
                    <label class="form-label" for="dob-day">Day</label>
                    <input class="form-control" id="dob-day" name="dob-day" type="text" inputmode="numeric" pattern="[0-9]*" minlength="1" maxlength="2">
                </div>
                <div class="form-group form-group-month">
                    <label class="form-label" for="dob-month">Month</label>
                    <input class="form-control" id="dob-month" name="dob-month" type="text" inputmode="numeric" pattern="[0-9]*" minlength="1" maxlength="2">
                </div>
                <div class="form-group form-group-year">
                    <label class="form-label" for="dob-year">Year</label>
                    <input class="form-control" id="dob-year" name="dob-year" type="text" inputmode="numeric" pattern="[0-9]*" minlength="4" maxlength="4">
                </div>
            </div>
        </fieldset>
    </div>
</form>

Error handling

  • add a class of form-group-error to the surrounding <div class="form-group form-group-error">
  • the error message <span class="error-message">Choose an answer</span> goes after the <legend>
  • add a class of form-control-error to the <input> with the error
Example
What is your date of birth? For example, 31 3 1980 Error message goes here
What is your date of birth? For example, 31 3 1980 Error message goes here
What is your date of birth? For example, 31 3 1980 Error message goes here

HTML Snippet for date input error handling

<form>
    <div class="form-group form-group-error">
        <fieldset>
            <legend>
                <span class="form-label-bold">What is your date of birth?</span>
                <span class="form-hint">For example, 31 3 1980</span>
            </legend>
            <span class="error-message">Error message goes here</span>
            <div class="form-date">
                <div class="form-group form-group-day">
                    <label class="form-label" for="dob-day">Day</label>
                    <input class="form-control form-control-error" id="dob-day" name="dob-day" type="text" inputmode="numeric" pattern="[0-9]*" minlength="1" maxlength="2">
                </div>
                <div class="form-group form-group-month">
                    <label class="form-label" for="dob-month">Month</label>
                    <input class="form-control" id="dob-month" name="dob-month" type="text" inputmode="numeric" pattern="[0-9]*" minlength="1" maxlength="2">
                </div>
                <div class="form-group form-group-year">
                    <label class="form-label" for="dob-year">Year</label>
                    <input class="form-control" id="dob-year" name="dob-year" type="text" inputmode="numeric" pattern="[0-9]*" minlength="4" maxlength="4">
                </div>
            </div>
        </fieldset>
    </div>
</form>

<form>
    <div class="form-group form-group-error">
        <fieldset>
            <legend>
                <span class="form-label-bold">What is your date of birth?</span>
                <span class="form-hint">For example, 31 3 1980</span>
            </legend>
            <span class="error-message">Error message goes here</span>
            <div class="form-date">
                <div class="form-group form-group-day">
                    <label class="form-label" for="dob-day">Day</label>
                    <input class="form-control" id="dob-day" name="dob-day" type="text" inputmode="numeric" pattern="[0-9]*" minlength="1" maxlength="2">
                </div>
                <div class="form-group form-group-month">
                    <label class="form-label" for="dob-month">Month</label>
                    <input class="form-control form-control-error" id="dob-month" name="dob-month" type="text" inputmode="numeric" pattern="[0-9]*" minlength="1" maxlength="2">
                </div>
                <div class="form-group form-group-year">
                    <label class="form-label" for="dob-year">Year</label>
                    <input class="form-control" id="dob-year" name="dob-year" type="text" inputmode="numeric" pattern="[0-9]*" minlength="4" maxlength="4">
                </div>
            </div>
        </fieldset>
    </div>
</form>

<form>
    <div class="form-group form-group-error">
        <fieldset>
            <legend>
                <span class="form-label-bold">What is your date of birth?</span>
                <span class="form-hint">For example, 31 3 1980</span>
            </legend>
            <span class="error-message">Error message goes here</span>
            <div class="form-date">
                <div class="form-group form-group-day">
                    <label class="form-label" for="dob-day">Day</label>
                    <input class="form-control" id="dob-day" name="dob-day" type="text" inputmode="numeric" pattern="[0-9]*" minlength="1" maxlength="2">
                </div>
                <div class="form-group form-group-month">
                    <label class="form-label" for="dob-month">Month</label>
                    <input class="form-control" id="dob-month" name="dob-month" type="text" inputmode="numeric" pattern="[0-9]*" minlength="1" maxlength="2">
                </div>
                <div class="form-group form-group-year">
                    <label class="form-label" for="dob-year">Year</label>
                    <input class="form-control form-control-error" id="dob-year" name="dob-year" type="text" inputmode="numeric" pattern="[0-9]*" minlength="4" maxlength="4">
                </div>
            </div>
        </fieldset>
    </div>
</form>
Leeds City Council logo

Copyright © Leeds City Council 2020

Back to top