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.
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 |