Input Field
Open in Figma
Text input
<div class="input-field">
<label for="input">label</label>
<input class="text-input" id="input" name="input" placeholder="placeholder" aria-invalid="false" aria-errormessage="input-validation" type="text" required>
<div id="input-validation" class="input-field__validation">validation message</div>
</div>Telephone input
This example uses a pattern to match mobile phone numbers.
<div class="input-field">
<label for="input-telephone">label</label>
<input class="text-input" id="input-telephone" name="input-telephone" placeholder="placeholder" aria-invalid="false" aria-errormessage="input-telephone-validation" type="tel" pattern="^(07\d{8,12}|447\d{7,11})$" required>
<div id="input-telephone-validation" class="input-field__validation">validation message</div>
</div>Email input
This example uses a pattern to match most email addresses, and sets multiple to false. Note that where multiple is set to true, an empty list is an acceptable value.
<div class="input-field">
<label for="input-email">label</label>
<input class="text-input" id="input-email" name="input-email" placeholder="placeholder" aria-invalid="false" aria-errormessage="input-email-validation" type="email" pattern="^[a-zA-Z0-9_.-]+@[a-zA-Z0-9_.-]+\.[a-zA-Z]{2,24}$" multiple="false" required>
<div id="input-email-validation" class="input-field__validation">validation message</div>
</div>Date input
This example sets a min and max date.
<div class="input-field">
<label for="input-date">label</label>
<input class="date-input" id="input-date" name="input-date" aria-invalid="false" aria-errormessage="input-date-validation" type="date" min="{DateTime.Now.AddDays(-30):yyyy-MM-dd}" max="{DateTime.Now.AddDays(30):yyyy-MM-dd}" required>
<div id="input-date-validation" class="input-field__validation">validation message</div>
</div>Date Selector (Day, Month, Year)
<div class="input-field">
<label for="input">label</label>
<div>
<input class="text-input" id="input-day" name="input-day" placeholder="DD" aria-invalid="false" aria-errormessage="input-validation" type="text" required>
<input class="text-input" id="input-month" name="input-month" placeholder="MM" aria-invalid="false" aria-errormessage="input-validation" type="text" required>
<input class="text-input" id="input-year" name="input-year" placeholder="YYYY" aria-invalid="false" aria-errormessage="input-validation" type="text" required>
<div>
<div id="input-validation" class="input-field__validation">validation message</div>
</div>Checkbox input
<div class="input-field">
<label class="check-radio" for="input-checkbox">
<input id="input-checkbox" type="checkbox" name="input-checkbox" value="input-checkbox" aria-invalid="false" aria-errormessage="input-checkbox-validation" required>
label
</label>
<div id="input-checkbox-validation" class="input-field__validation">validation message</div>
</div>Radio group input
<fieldset class="input-field">
<legend>legend</legend>
<label class="check-radio" for="input-radio-group-1">
<input id="input-radio-group-1" type="radio" name="input-radio-group" value="input-radio-group-1" aria-invalid="false" aria-errormessage="radio-group-validation" required>
label
</label>
<label class="check-radio" for="input-radio-group-2">
<input id="input-radio-group-2" type="radio" name="input-radio-group" value="input-radio-group-2" aria-invalid="false" aria-errormessage="radio-group-validation" required>
label
</label>
<div id="radio-group-validation" class="input-field__validation">validation message</div>
</fieldset>Checkbox group input
<fieldset class="input-field">
<legend>legend</legend>
<label class="check-radio" for="input-checkbox-group-1">
<input id="input-checkbox-group-1" type="checkbox" name="input-checkbox-group" aria-invalid="false" aria-errormessage="checkbox-group-validation" value="input-checkbox-group-1">
label
</label>
<label class="check-radio" for="input-checkbox-group-2">
<input id="input-checkbox-group-2" type="checkbox" name="input-checkbox-group" aria-invalid="false" aria-errormessage="checkbox-group-validation" value="input-checkbox-group-2">
label
</label>
<div id="checkbox-group-validation" class="input-field__validation">validation message</div>
</fieldset>Variations and modifiers
Input field with hint text
<div class="input-field">
<label for="input-hint">label</label>
<div id="input-hint-text" class="input-field__hint">hint text</div>
<input class="text-input" id="input-hint" name="input-hint" placeholder="placeholder" type="text" aria-describedby="input-hint-text" aria-invalid="false" aria-errormessage="input-hint-validation" required>
<div id="input-hint-validation" class="input-field__validation">validation message</div>
</div>Input field with help text
<div class="input-field">
<label for="input-help">label</label>
<input class="text-input" id="input-help" name="input-help" placeholder="placeholder" type="text" aria-describedby="input-help-text" aria-invalid="false" aria-errormessage="input-help-validation" required>
<div id="input-help-text" class="input-field__help">help text</div>
<div id="input-help-validation" class="input-field__validation">validation message</div>
</div>Input field with hint and help text
<div class="input-field">
<label for="input-hint-and-help">label</label>
<div id="input-hint-text-2" class="input-field__hint">hint text</div>
<input class="text-input" id="input-hint-and-help" name="input-hint-and-help" placeholder="placeholder" type="text" aria-describedby="input-hint-text-2 input-help-text-2" aria-invalid="false" aria-errormessage="input-hint-and-help-validation" required>
<div id="input-help-text-2" class="input-field__help">help text</div>
<div id="input-hint-and-help-validation" class="input-field__validation">validation message</div>
</div>Input field with icon left
An input field with an icon to the left. This can be applied at the same time as an icon to the right. Care must be taken so that icons do not conflict with HTML default rendering.
<div class="input-field input-field--icon-left">
<label for="input-icon-left">label</label>
<span class="input-field__input">
<span class="material-symbols-rounded" aria-hidden="true">
check_circle
</span>
<input class="text-input" id="input-icon-left" name="input-icon-left" placeholder="placeholder" type="text" aria-invalid="false" aria-errormessage="input-icon-left-validation" required>
</span>
<div id="input-icon-left-validation" class="input-field__validation">validation message</div>
</div>Input field with icon right
An input field with an icon to the right. This can be applied at the same time as an icon to the left. Care must be taken so that icons do not conflict with HTML default rendering.
<div class="input-field input-field--icon-right">
<label for="input-icon-right">label</label>
<span class="input-field__input">
<input class="text-input" id="input-icon-right" name="input-icon-right" placeholder="placeholder" type="text" aria-invalid="false" aria-errormessage="input-icon-right-validation" required>
<span class="material-symbols-rounded" aria-hidden="true">
check_circle
</span>
</span>
<div id="input-icon-right-validation" class="input-field__validation">validation message</div>
</div>Input field with error state
When the input has either the error or invalid classes, render validation message and attach the error state icon to the label or legend in the case of a fieldset.
<div class="input-field">
<label for="input-error">label</label>
<input class="text-input error" id="input-error" name="input-error" placeholder="placeholder" aria-invalid="true" aria-errormessage="input-error-validation" type="text" required>
<div id="input-error-validation" class="input-field__validation">validation message</div>
</div>Input field with error state on validation message
Where the child input requires the error state icon to be attached to the validation message instead of the label.
<div class="input-field input-field--icon-validation">
<label for="input-error-icon-validation">label</label>
<input class="text-input error" id="input-error-icon-validation" name="input-error-icon-validation" placeholder="placeholder" type="text" aria-invalid="true" aria-errormessage="input-error-icon-validation-message" required>
<div id="input-error-icon-validation-message" class="input-field__validation">validation message</div>
</div>Wide radio group
Where a radio group needs to take up a full width it can be given the wide modifier. Input fields have a set width by default.
<fieldset class="input-field input-field--fieldset-wide">
<legend>legend</legend>
<div class="flex gap-m">
<label class="check-radio" for="input-radio-group-wide-1">
<input id="input-radio-group-wide-1" type="radio" name="input-radio-group-wide" aria-invalid="false" aria-errormessage="input-radio-group-wide-validation" value="input-radio-group-wide-1" required>
label
</label>
<label class="check-radio" for="input-radio-group-wide-2">
<input id="input-radio-group-wide-2" type="radio" name="input-radio-group-wide" aria-invalid="false" aria-errormessage="input-radio-group-wide-validation" value="input-radio-group-wide-2" required>
label
</label>
</div>
<div id="input-radio-group-wide-validation" class="input-field__validation">validation message</div>
</fieldset>