Textbox with symbol or acronym

Taxonomic name: A-TEXTBOX--SYMBOL or A-TEXBOX--ACRONYM

CORE COMPONENT

v.3.2.0 - Updated 13/02/18.

Atom

Set of symbols and acronyms that can be added as a prefix or suffix on a textbox to enhance understanding of what is required to be entered within the textbox, ie. a currency amount or percentage.

See the main textbox reference for usage rules and additional options.

Symbols and acronyms can be used to either side of the input field (left or right) but please be consistent in your form design and throughout the site.

Examples

Standard textbox with symbol prefix

Standard textbox with symbol suffix

Standard textbox with acronym prefix

Standard textbox with acronym suffix

Valid state

This is a valid text

Errored state

Please enter a valid text

Disabled state

Symbols

Acronyms

Notes for developers

See the main textbox reference developer notes for further information and additional options.

Can be combined with the restricted width textboxes.

Input types

Care should be taken when choosing input field types for various uses, particularly with regard to number entry, as making the wrong selection could prevent users from inputting the required details into a form. For further information, see the form introduction page.

Important messages

To help those using assistive technologies, make sure that success/error messages which need to be announced to users have their aria attributes updated to role="alert" and/or aria-live="assertive".

Using autocomplete

Users appreciate when websites save them time by automatically filling common fields like names, email addresses and other frequently used fields, plus it helps to reduce potential input errors, especially on virtual keyboards and small devices.

Browsers use many methods to determine which fields they can auto-populate based on previously specified data by the user, and you can give hints to the browser by providing both the name attribute and the autocomplete attribute on each input element.

Further details can be found in the developer notes on the form introduction page.

Code Examples

Standard textbox

<div class="m-form-row">
	<label class="a-label" for="...">...</label>
	<div class="m-form-row__content">
		<input type="..." id="..." name="..." placeholder="..." class="a-textbox [ Modifier ]" />
	</div>
</div>

Classes overview

The following table gives you a quick overview of the CSS classes that can be applied.

Class Outcome Required Applied to Comments
.a-textbox--symbol For adding a prefixed symbol to a textbox Yes a-textbox Required for adding symbols
.a-textbox--acronym For adding a prefixed acronym to a textbox Yes a-textbox Required for adding acronyms
.a-textbox--suffix Modifier changing the prefixed symbol or acronym to a suffix   .a-textbox--symbol
.a-textbox--acronym		  
.a-textbox--symbol-dollar Modifier for adding a Dollar symbol   .a-textbox--symbol  
.a-textbox--symbol-euro Modifier for adding a Euro symbol   .a-textbox--symbol  
.a-textbox--symbol-lira Modifier for adding a Turkish Lira symbol   .a-textbox--symbol  
.a-textbox--symbol-pound Modifier for adding a Great British Pound symbol   .a-textbox--symbol  
.a-textbox--symbol-rupee Modifier for adding a Indian Rupee symbol   .a-textbox--symbol  
.a-textbox--symbol-rupiah Modifier for adding a Indonesia Rupiah symbol   .a-textbox--symbol  
.a-textbox--symbol-singapore-dollar Modifier for adding a Singapore Dollar symbol   .a-textbox--symbol  
.a-textbox--symbol-taiwan-dollar Modifier for adding a Taiwan Dollar symbol   .a-textbox--symbol  
.a-textbox--symbol-vietnamese-dong Modifier for adding a Vietnamese Dong symbol   .a-textbox--symbol  
.a-textbox--symbol-yuan Modifier for adding a Chinese Yuan symbol   .a-textbox--symbol  
.a-textbox--symbol-zloty Modifier for adding a Polish Zloty symbol   .a-textbox--symbol  
.a-textbox--symbol-pence Modifier for adding a pence symbol as a suffix   .a-textbox--symbol Suffix modifier not required
.a-textbox--symbol-percent Modifier for adding a percent symbol as a suffix   .a-textbox--symbol Suffix modifier not required
.a-textbox--acronym-cad Modifier for adding the Canadian dollar (CAD) acronym   .a-textbox--acronym  
.a-textbox--acronym-cny Modifier for adding the Chinese Yuan (CNY) acronym   .a-textbox--acronym  
.a-textbox--acronym-eur Modifier for adding the Euro (EUR) acronym   .a-textbox--acronym  
.a-textbox--acronym-gbp Modifier for adding the Great British Pound (GBP) acronym   .a-textbox--acronym  
.a-textbox--acronym-hkd Modifier for adding the Hong Kong Dollar (HKD) acronym   .a-textbox--acronym  
.a-textbox--acronym-idr Modifier for adding the Indonesia Rupiah (IDR) acronym   .a-textbox--acronym  
.a-textbox--acronym-inr Modifier for adding the Indian Rupee (INR) acronym   .a-textbox--acronym  
.a-textbox--acronym-pln Modifier for adding the Polish Zloty (PLN) acronym   .a-textbox--acronym  
.a-textbox--acronym-sgd Modifier for adding the Singapore Dollar (SGD) acronym   .a-textbox--acronym  
.a-textbox--acronym-try Modifier for adding the Turkish Lira (TRY) acronym   .a-textbox--acronym  
.a-textbox--acronym-twd Modifier for adding the Taiwan Dollar (TWD) acronym   .a-textbox--acronym  
.a-textbox--acronym-vnd Modifier for adding the Vietnamese Dong (VND) acronym   .a-textbox--acronym  
.a-textbox--acronym-cad Modifier for adding the Canadian dollar (CAD) acronym   .a-textbox--acronym