Cardiff Council Content and design system

www.cardiff.gov.uk

Forms

selecting

Select fieldRadio buttonsCheckbox

layout

Message boxNavigation buttonsValidation and Errors

input

TextEmailTelephoneTextAreaSearch boxDateTimeRangeFileNumber

Number

Defines a numeric input field.

You can also set restrictions on what numbers are accepted.

The following example displays a numeric input field, where you can enter a value from 1 to 5:

How to use this component


Code Resource

<label for="number" class="form_formLabelTitle">Number *</label>
<input type="number" name="number" id="number" class="form_formTextbox" title="select a number" min="1" max="5" autocomplete="1" aria-describedby="number_description" >
<span id="number_description" class="form_formInformationMessage">Select a number between 1 and 5.</span>
/* Input Fields and Label*/
.form_formTextbox {
    width: 100%;
    font-size: medium;
    margin-bottom: 15px;
    float: right;
    display: block;
    border-radius: 0px;
    border: 1px solid silver;
    padding: 2px 5px;
    border-radius: 6px;
    height: 45px;
    text-indent: 10px;
}

.form_formTextbox:hover, .form_formTextbox:focus {
    border: 1px solid #015b66;
    background: #f9f9f9;
outline: none;
}

.form_formLabelTitle {
    width: 100%;
    font-size: 1em;
    color: black;
    float: left;
    text-align: left;
    padding: 7px;
    padding-left: 0px;
}


.form_formInformationMessage {
    width: 100%;
    float: left;
    margin-bottom: 10px;
    color: #464545;
    position: relative;
    top: -10px;
    font-size: 0.9em;
    float: left;
}


/* END */

Working Example

Select a number between 1 and 5.