A textbox (also known as an input ) allows the user to enter data.

The purpose of a textbox is to collect form data. Therefore, textbox should always be used in conjunction with a form, label and submit button.

IMPORTANT:The examples below show the textbox in isolation, without any label. Remember: every textbox requires a label!

Single-Line Textbox

Use an input tag for a single-line textbox.

Readonly Textbox

Use the readonly attribute to prevent any modification of the value.

Disabled Textbox

Use the disabled attribute to completely disable the input and any value.

Error-State Textbox

Use the aria-invalid attribute to highlight any input with error.

Multi-line Textbox

Use the textarea tag for a multi-line textbox.

A multi-line textbox allows line breaks and has a minimum height of 200px.

Fluid Textbox

Apply the textbox--fluid modifier (or fluid utility class) to fill the width of the parent element.

Textbox with Icon

Single-line textboxes can be augmented with any SVG icon .

To display the icon at the end of the control, position the svg tag after the input.

NOTE: The icon is presentational, and therefore hidden from assistive technology using aria-hidden . Remember, the purpose of the field must be conveyed using a label.

Textbox with Icon Button

Single-line textboxes also support an icon button in the end position.

An icon button in the end position can also be teamed up with a static icon in the start position.

Large Textbox

Use textbox--large modifier to style the textbox to be large size

Textbox Prefix

Add a span containing text before the input to show it as a prefix text.

Textbox Postfix

Add a span containing text after the input to show it as a postfix text.

Mixed icons and static text

Postfix/prefix icons can be mixed with static text in the textbox.