Example Open example in a new window Code sample <div class="form_field"> <input type="text" required> </div> Notes Inputs can cater for many different types of input (See the variants below) All form fields are considered required by default and must use the required attribute. If a field is not required, remove the required attribute, and label the field as optional. When capturing known numeric patterns such as Credit Cards, ID numbers, etc. use the inputmode="numeric" attribute combined with the pattern="…" attribute. Don't forget to add autocomplete attributes and their associated values. See MDN: autocomplete Avoid using any of the button-like input types (<input type="button|image|reset|submit">). Use <button> elements instead. If you want to accept multi-line text input, use a <textarea></textarea> rather than a text input. After validation, if the field is invalid, you must use the aria-invalid="true" attribute. See form rows for more error/success details. Details Pattern scope: Atom – The smallest possible pattern, independent Design source: Figma Relevant assets: Stylesheets: Shared stylesheets [See index.css] /css/patterns/form_field.css Variants Placeholder Give the user a helpful example Example Open type in a new window Code sample <div class="form_field"> <input type="text" placeholder="e.g. Jesse Brown" required> </div> Notes This attribute must not be used as a replacement for the field's associated <label>. Optional field Some fields will be treated as optional. Example Open type in a new window Code sample <div class="form_field"> <input type="text" placeholder="e.g. Jesse Brown"> </div> Notes Note the lack of a required attribute. Type: date Date entry with free validation! Example Open type in a new window Code sample <div class="form_field"> <input type="date" required> </div> Type: email Email address entry with free validation! Example Open type in a new window Code sample <div class="form_field"> <input type="email" autocomplete="email" required> </div> Type: file File uploads, and capturing photos / camera inputs. Example Open type in a new window Code sample <div class="form_field"> <input type="file" required> </div> Notes If you want to use this input type, then your associated <form> must include the following attribute: enctype="multipart/form-data" Use the accept attribute to specify what types of files are allowed Type: number Numbers such as integers and decimals. Example Open type in a new window Code sample <div class="form_field"> <input type="number" required> </div> Notes This input type can only be used for true numbers, such as integers, decimals, etc. Don’t use this input type for values such as Credit Cards, ID numbers, etc. Use the max, min, step if those values are known or predictable. Type: password Input masking when entering sensitive information Example Open type in a new window Code sample <div class="form_field"> <input name="password" type="password" autocomplete="current-password" required> </div> Notes The example below is for a log-in prompt. If you instead want to capture a user's password during registration, use the appropriate alternative autocomplete value. Type: search Use this input type when creating search forms Example Open type in a new window Code sample <div class="form_field"> <input type="search" required> </div> Type: tel Phone number input with free validation! Example Open type in a new window Code sample <div class="form_field"> <input type="tel" required> </div> Type: number-like Numeric input, but not a number Example Open type in a new window Code sample <div class="form_field"> <input type="text" pattern="[0-9]*" inputmode="numeric" required> </div> Notes Details on the gov.uk blog about capturing credit card numbers Type: URL Capture online addresses and other URLs with type="url". Example Open type in a new window Code sample <div class="form_field"> <input type="url" required> </div> Checkboxes If you want the user to select one (or more) from five (or less) items, then use a group of checkboxes Example Open type in a new window Code sample <div class="form_field"> <ul> <li> <label> <input type="checkbox" name="fruit" value="apples"> <span> Apples </span> </label> </li> <li> <label> <input type="checkbox" name="fruit" value="bananas"> <span> Bananas </span> </label> </li> <li> <label> <input type="checkbox" name="fruit" value="peaches"> <span> Peaches </span> </label> </li> </ul> </div> Notes Use the same name attribute value for each checkbox so they're grouped logically Radios If you want the user to select at most one from five or less items, then use a group of radio buttons Example Open type in a new window Code sample <div class="form_field"> <ul> <li> <label> <input type="radio" name="fruit" value="apples"> <span> Apples </span> </label> </li> <li> <label> <input type="radio" name="fruit" value="bananas"> <span> Bananas </span> </label> </li> <li> <label> <input type="radio" name="fruit" value="peaches"> <span> Peaches </span> </label> </li> </ul> </div> Notes Use the same name attribute value for each radio button so they're grouped logically Select If the number of options for a field exceeds 5 items, then use a <select> instead. Example Open type in a new window Code sample <div class="form_field"> <select required> <optgroup label="A"> <option>Apples <option>Aubergines </optgroup> <optgroup label="C"> <option>Carrots <option>Coconuts </optgroup> <option>Other </select> </div> Textarea If you want to support multi-line text, then the <textarea> element is the correct choice. Example Open type in a new window Code sample <div class="form_field"> <textarea rows="3" cols="30" required></textarea> </div> Location A custom use of icons to denote a Location lookup field. Example Open type in a new window Code sample <div class="form_field"> <input type="search" data-icon="location" data-mode="icon-after" required> </div>