Information

You appear to be using an unsupported browser, and it may not be able to display this site properly. You may wish to upgrade your browser.

Text input

A form field that allows users to enter a single line of text.

Sample HTML

<label class="ds_label" for="first-name">First name</label>
<input class="ds_input" type="text" id="first-name" name="first-name">

We based our text input component on the one built by GDS. Find out more about the text input component on GOV.UK’s Design System.

Size options

Fixed-width inputs

Sample HTML

<h3>Fixed-width inputs</h3>

<div>
<label class="ds_label" for="fixed-20">20 characters</label>
<input class="ds_input  ds_input--fixed-20" type="text" id="fixed-20" name="fixed-20">
</div>

<div>
<label class="ds_label" for="fixed-10">10 characters</label>
<input class="ds_input  ds_input--fixed-10" type="text" id="fixed-10" name="fixed-10">
</div>

<div>
<label class="ds_label" for="fixed-5">5 characters</label>
<input class="ds_input  ds_input--fixed-5" type="text" id="fixed-5" name="fixed-5">
</div>

<div>
<label class="ds_label" for="fixed-4">4 characters</label>
<input class="ds_input  ds_input--fixed-4" type="text" id="fixed-4" name="fixed-4">
</div>

<div>
<label class="ds_label" for="fixed-3">3 characters</label>
<input class="ds_input  ds_input--fixed-3" type="text" id="fixed-3" name="fixed-3">
</div>

<div>
<label class="ds_label" for="fixed-2">2 characters</label>
<input class="ds_input  ds_input--fixed-2" type="text" id="fixed-2" name="fixed-2">
</div>

Fluid-width inputs

Sample HTML

<h3>Fluid-width inputs</h3>

<div>
<label class="ds_label" for="fluid-75p">Three quarters</label>
<input class="ds_input  ds_input--fluid-three-quarters" type="text" id="fluid-75p" name="fluid-75p">
</div>

<div>
<label class="ds_label" for="fluid-67p">Two thirds</label>
<input class="ds_input  ds_input--fluid-two-thirds" type="text" id="fluid-67p" name="fluid-67p">
</div>

<div>
<label class="ds_label" for="fluid-50p">Half</label>
<input class="ds_input  ds_input--fluid-half" type="text" id="fluid-50p" name="fluid-50p">
</div>

<div>
<label class="ds_label" for="fluid-33p">One third</label>
<input class="ds_input  ds_input--fluid-one-third" type="text" id="fluid-33p" name="fluid-33p">
</div>

<div>
<label class="ds_label" for="fluid-25p">One quarter</label>
<input class="ds_input  ds_input--fluid-one-quarter" type="text" id="fluid-25p" name="fluid-25p">
</div>

Text input with an associated button

Sometimes buttons are directly related to an input field, such as in a site search or date picker.

Sample HTML

<label class="ds_label" for="search">Search</label>

<div class="ds_input__wrapper  ds_input__wrapper--has-icon">
    <input class="ds_input  ds_input--fixed-20" type="text" id="search" name="search">
    <button type="button" class="ds_button">
        <span class="visually-hidden">Search</span>
        <svg class="ds_icon" aria-hidden="true" role="img"><use href="/assets/images/icons/icons.stack.svg#search"></use></svg>
    </button>
</div>

Currency text fields

If you are asking the user for a currency amount, use this version of a checkbox. It has a currency symbol that cannot be deleted by the user.

Sample HTML

<label class="ds_label" for="price">Price per month</label>
<div class="ds_currency-wrapper" data-symbol="$">
    <input class="ds_input  ds_input--fixed-4" type="text" id="price" name="price">
</div>

Currency input elements need to be wrapped in a div with class ds_currency-wrapper.

The default currency symbol used is the pound sign. If you need to use a different symbol, you can specify that in a data-symbol attribute on the field’s parent element.

Inline text fields

In some cases it might be sensible to align text inputs inline, such as when asking for multiple short related fields.

Sample HTML

<fieldset>
    <legend>What is your date of birth?</legend>
    <p class="ds_hint-text">For example, 31 3 1980</p>

    <div class="ds_field-group  ds_field-group--inline">
        <div>
            <label class="ds_label" for="day">Day</label>
            <input id="day" name="day" class="ds_input ds_input--fixed-2">
        </div>

        <div>
            <label class="ds_label" for="month">Month</label>
            <input id="month" name="month" class="ds_input ds_input--fixed-2">
        </div>

        <div>
            <label class="ds_label" for="year">Year</label>
            <input id="year" name="year" class="ds_input ds_input--fixed-4">
        </div>
    </div>
</fieldset>

Website analytics

Content of this form element would not be routinely tracked through website analytics due to the risk of gathering personally identifiable information. Interaction with the element can be tracked through a data attribute showing the the field type and field description.

The data attribute is added automatically by the Design System’s ‘tracking’ script.

Back to top