Text field

The text field allows users to enter and edit text.

When to use

User information

Text fields allow users to enter information such as contact or payment information

User information

Text fields allow users to enter information such as contact or payment information

User information

Text fields allow users to enter information such as contact or payment information

Flexible content

Text fields are flexible fields that allow different inputs like text, paragraphs, or numeric values

Flexible content

Text fields are flexible fields that allow different inputs like text, paragraphs, or numeric values

Flexible content

Text fields are flexible fields that allow different inputs like text, paragraphs, or numeric values

When to avoid

Specified answers

In the case that users are expected to respond a certain way, you may consider using a dropdown instead

Specified answers

In the case that users are expected to respond a certain way, you may consider using a dropdown instead

Specified answers

In the case that users are expected to respond a certain way, you may consider using a dropdown instead

Yes or no answers

In the case that users are supposed to indicate a simple yes or no answer, you may consider using a switch instead

Yes or no answers

In the case that users are supposed to indicate a simple yes or no answer, you may consider using a switch instead

Yes or no answers

In the case that users are supposed to indicate a simple yes or no answer, you may consider using a switch instead

Specifications

Label placement

Stacked

Please note that the stacked version does not truncate or wrap the label. Noting this, please try to keep the label as short as possible.

Left to Right

Please note the wrapping and truncation rules for the left to right version and how the optional label is below the label.

Stacked

Please note that the stacked version does not truncate or wrap the label. Noting this, please try to keep the label as short as possible.

Left to Right

Please note the wrapping and truncation rules for the left to right version and how the optional label is below the label.

Stacked

Please note that the stacked version does not truncate or wrap the label. Noting this, please try to keep the label as short as possible.

Left to Right

Please note the wrapping and truncation rules for the left to right version and how the optional label is below the label.

Content

Valued

Placeholder

Valued

Placeholder

Valued

Placeholder

Valued

Placeholder

States

Default

Disabled

Focused

Error

Read only

Default

Disabled

Focused

Error

Read only

Default

Disabled

Focused

Error

Read only

Default

Disabled

Focused

Error

Read only

Anatomy

Label

Should indicate some kind of instruction for selection. If majority of fields are required in a single form, the "Option" label can be toggled on. If majority of fields are optional, the "Required asterisks" should instead be toggled on.

Lead / Trailing icon

Optional icons can be placed on either the leading or trailing edge to add visual meaning or functionality to the text field.

Assistive text

For additional instructions or validation messages, which can be paired with an icon for enhanced visual meaning.

Value

Text field

A proud product of the Border UX team.

Privacy

Terms

Licensing

A proud product of the Border UX team.

Privacy

Terms

Licensing

A proud product of the Border UX team.

Privacy

Terms

Licensing

A proud product of the Border UX team.

Privacy

Terms

Licensing

A proud product of the Border UX team.

Privacy

Terms

Licensing