Text input
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.
Feedback, help and support
If you need help or support you can e-mail us at designsystem@gov.scot
There is a problem
Thanks for your feedback