REMOVED

This component has been removed from the Framework. Move to using form affix.

Taxonomic name: A-TEXTBOX--SYMBOL
Added on: v3.2.0 (16/02/18)
Removed on: v5.0.0 (05/10/20)

Textbox symbol

This provided a set of symbols and acronyms that could be added as a prefix or suffix to a textbox to enhance understanding of what wass required to be entered, for example a currency amount or percentage.

Design and usage

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.

Interactive examples

Standard textbox with symbol prefix and suffix

Interactive example

Code example

Standard textbox with symbol prefix

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

Standard textbox with symbol suffix

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

Standard textbox with acronym prefix and suffix

Interactive example

Code example

Standard textbox with symbol prefix

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

Standard textbox with symbol suffix

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

Valid textbox with prefix

Interactive example

Code example

<div class="m-form-row is-valid">
	<label class="a-label" for="...">...</label>
	<div class="m-form-row__content">
		<p class="m-form-row__validation-message">...</p>
		<input type="..." id="..." name="..." class="a-textbox a-textbox--acronym a-textbox--suffix [ Modifier ]" />
	</div>
</div>

Errored textbox with prefix

Interactive example

Code example

<div class="m-form-row is-error">
	<label class="a-label" for="...">...</label>
	<div class="m-form-row__content">
		<p class="m-form-row__error-message" id="..."><span class="u-hidden--visually">Error: </span>Please enter a valid email</p>
		<input type="..." id="..." name="..." class="a-textbox a-textbox--acronym a-textbox--suffix [ Modifier ]" />
	</div>
</div>

Disabled textbox with prefix

Interactive example

Code example

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

Symbols

Acronyms

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="..." class="a-textbox [ Modifier ]" />
	</div>
</div>

Development and test

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.

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`

Component releases

Added on: v3.2.0 (16/02/18)
Removed on: v5.0.0 (05/10/20)

Latest update:

Component removed and replaced by form affix, which provides more flexability.

Full version history

A full history of changes and enhancements detailing all minor and major updates to the component.

View full version history

Want something new in Framework, or to chat about an issue you're having with it?

Contact the team