Components

Text input

All text inputs must have:

  • Visible label that is aligned above the text input
  • They should be short, direct and always written in sentence case

If you are asking one question on a page, then you can set the label as the main heading on the page (should match the page header style in terms of font size, weight and typeface).

You should always try to use appropriately sized text input fields. For example, when you are asking a user for a postcode, you will want to use a much shorter input width due to the expected amount of characters the user is going to enter.

We have additional helper classes to support this which can be demonstrated below.

Example

With different widths

                                
                                <div class="form__control">
<label class="form__label">Event name</label>
<input type="text" class="form__input"/>
</div>

<h3>With different widths</h3>
<div class="form__control">
<label class="form__label">20 width</label>
<input type="text" class="form__input input-width--20"/>
</div>
<div class="form__control">
<label class="form__label">40 width</label>
<input type="text" class="form__input input-width--40"/>
</div>
<div class="form__control">
<label class="form__label">50 width</label>
<input type="text" class="form__input input-width--50"/>
</div>
<div class="form__control">
<label class="form__label">100 width</label>
<input type="text" class="form__input input-width--100"/>
</div>
<div class="form__control">
<label class="form__label">120 width</label>
<input type="text" class="form__input input-width--120"/>
</div>
<div class="form__control">
<label class="form__label">140 width</label>
<input type="text" class="form__input input-width--140"/>
</div>
<div class="form__control">
<label class="form__label">160 width</label>
<input type="text" class="form__input input-width--160"/>
</div>
<div class="form__control">
<label class="form__label">180 width</label>
<input type="text" class="form__input input-width--180"/>
</div>
<div class="form__control">
<label class="form__label">200 width</label>
<input type="text" class="form__input input-width--200"/>
</div>
<div class="form__control">
<label class="form__label">220 width</label>
<input type="text" class="form__input input-width--220"/>
</div>
<div class="form__control">
<label class="form__label">240 width</label>
<input type="text" class="form__input input-width--240"/>
</div>
<div class="form__control">
<label class="form__label">260 width</label>
<input type="text" class="form__input input-width--260"/>
</div>
<div class="form__control">
<label class="form__label">280 width</label>
<input type="text" class="form__input input-width--280"/>
</div>
<div class="form__control">
<label class="form__label">300 width</label>
<input type="text" class="form__input input-width--300"/>
</div>
<div class="form__control">
<label class="form__label">320 width</label>
<input type="text" class="form__input input-width--320"/>
</div>

Portal Code example

  • Inputs will normally be defined by the out of box controls
  • There may be times you need to create your own field as part of your journey. These should follow standard principles in terms of validation and style of the label (if it is the only field on the page, the label should be the heading)
  • You can use input widths as well as mentioned to control the width of the input

Out of the box

Custom HTML

                        
                        <h2>Out of the box</h2>
<input name="ctl00$ContentContainer$WebFormControl_02548c086e2de911a8a600224800449b$EntityFormView$civ_binstodeliver" type="text" id="civ_binstodeliver" class="text integer form-control " onchange="setIsDirty(this.id);" style="/* display: none; */">

<h2>Custom HTML</h2>
<label for="name">Label for the field</label>
<input name="name" type="text" class="text form-control"/>
Back to top