Text input

Sample HTML

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

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" />
</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" />
</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" />
</div>

<div>
<label class="ds_label" for="fixed-4">4 characters</label>
<input class="ds_input  ds_input--fixed-4" type="text" id="tfixed-" />
</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" />
</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" />
</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" />
</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" />
</div>

<div>
<label class="ds_label" for="fluid-50p">Half</label>
<input class="ds_input  ds_input--fluid-half" type="text" id="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" />
</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" />
</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

<div>
    <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" />
        <a href="#" class="ds_button">
            <span class="visually-hidden">Search</span>
            <svg class="ds_icon" aria-hidden="true" role="img"><use xlink:href="/assets/images/icons/icons.stack.svg#search"></use></svg>
        </a>
    </div>
</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

<div>
    <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" />
    </div>
</div>

Developer notes

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

<form>
    <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" class="ds_input ds_input--fixed-2" />
            </div>

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

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

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.

Feedback, help or support

If you need any help or want to give any feedback you can e-mail us at: designsystem@gov.scot

Back to top