Generic selectors

Exact matches only

Search in title

Search in content

Post Type Selectors

Text Field

A Text Field component in UX provides users with a space to input and edit text or alphanumeric characters.

text-field
  • Overview
  • Specs
  • Guidelines

Component

A Text Field component is a fundamental user interface element that allows users to input and edit text or alphanumeric characters within an application or website.

Visually, a Text Field typically appears as a rectangular box or input field within the user interface, providing users with a clear and designated area to input text.

It often includes a border or background to distinguish it from surrounding elements and may feature additional visual cues such as placeholder text or icons to provide context or instructions to users.

Text Field anatomy

A: Default Variation

B: Adornment Variation

C: Button Icon Variation

D: Chips Variation

E: Identifier Variation

F: Link Variation

G: Select Variation

1: Label

2: Adornment

3: Button Icon

4: Closable Chip

5: Placeholder

6: Link Button

7. Selectable Chip

Article Name applied in a Text Field

Used for:

Names

In cases where it is necessary to write the name of a client, an article or others, a Text Field should be used for this versatility;

Emails

In cases where it is necessary to insert an email, the correct component to use is a Text Field;

Entity number

In cases where it is necessary to show an entity number that is not modifiable, it is done by using the Text Field component in the read only state;

Street

In cases where it is necessary to insert a street name, due to the versatility of the input value, the recommended component to be used is the Text Field.

Don’t use for:

Choice input

When waiting for a user choice, make sure you show the different choices, for example with a radio button or a select box;

Complex data

For tasks involving extensive data entry or manipulation, Text Fields may not provide sufficient functionality or features to support complex data structures, calculations, or validations;

Data security

In contexts where sensitive or confidential information is being entered, such as passwords or personal identification numbers (PINs), consider using the password component.

Textfield_password
Text Field used as a password input

Demo

Access the Figma file and inspect the element using Dev Mode.

Input Mask at Figma
Open Figma

Last Update

Before
Old version of the Text Field
Current
Current version of the Text Field
  • Updated color of states;
  • Updated button typography;

Related

Tooltip

Tooltips are used to provide additional information about elements or functionalities on a page …
Read More
Chips

Chips

Chips are small visual elements commonly used in user interfaces to represent discrete pieces …
Read More

Label

A Label serves as a crucial element for enhancing the clarity and usability of a digital interface …
Read More

States

TextField
Text Field

Default

Enabled 
.enabled {
  label: var(--grey-7);
  input-stroke: var(--grey-5);
  input-background: var(--grey-1);
  placeholder: var(--grey-6);
}
Hover 
.hover {
  label: var(--grey-7);
  input-stroke: var(--grey-6);
  input-background: var(--grey-1);
  placeholder: var(--grey-6);
}
Focus 
.focus {
  label: var(--grey-7);
  input-stroke: var(--theme-100);
  input-background: var(--grey-1);
  insert: var(--grey-8);
}
Read-only 
.readOnly {
  label: var(--grey-7);
  input-stroke: var(--grey-3);
  input-background: var(--grey-1);
  placeholder: var(--grey-8);
}
Disabled 
.disabled {
  label: var(--grey-7);
  input-stroke: var(--grey-5);
  input-background: var(--grey-3);
  placeholder: var(--grey-6);
}
Error 
.error {
  label: var(--grey-7);
  input-stroke: var(--error-100);
  input-background: var(--grey-1);
  placeholder: var(--grey-8);
  icon: var(--error-100);
}

Adornment

Enabled 
.enabled {
  label: var(--grey-7);
  input-stroke: var(--grey-5);
  input-background: var(--grey-1);
  placeholder: var(--grey-6);
  icon: var(--grey-7);
}
Hover 
.hover {
  label: var(--grey-7);
  input-stroke: var(--grey-6);
  input-background: var(--grey-1);
  placeholder: var(--grey-6);
  icon: var(--grey-7);
}
Focus 
.focus {
  label: var(--grey-7);
  input-stroke: var(--theme-100);
  input-background: var(--grey-1);
  insert: var(--grey-8);
  icon: var(--grey-7);
}
Read-only 
.readOnly {
  label: var(--grey-7);
  input-stroke: var(--grey-3);
  input-background: var(--grey-1);
  placeholder: var(--grey-8);
  icon: var(--grey-7);
}
Disabled 
.disabled {
  label: var(--grey-7);
  input-stroke: var(--grey-5);
  input-background: var(--grey-3);
  placeholder: var(--grey-6);
  icon: var(--grey-7);
}
Error 
.error {
  label: var(--grey-7);
  input-stroke: var(--error-100);
  input-background: var(--grey-1);
  placeholder: var(--grey-8);
  icon: var(--error-100);
  icon: var(--grey-7);
}

Button Icon

Enabled 
.enabled {
  label: var(--grey-7);
  input-stroke: var(--grey-5);
  input-background: var(--grey-1);
  placeholder: var(--grey-6);
  button-background: var(--grey-4);
  button-icon: var(--grey-8);
}
Hover 
.hover {
  label: var(--grey-7);
  input-stroke: var(--grey-6);
  input-background: var(--grey-1);
  placeholder: var(--grey-6);
  button-background: var(--grey-4);
  button-icon: var(--grey-8);
}
Focus 
.focus {
  label: var(--grey-7);
  input-stroke: var(--theme-100);
  input-background: var(--grey-1);
  insert: var(--grey-8);
  button-background: var(--grey-4);
  button-icon: var(--grey-8);
}
Read-only 
.readOnly {
  label: var(--grey-7);
  input-stroke: var(--grey-3);
  input-background: var(--grey-1);
  placeholder: var(--grey-8);
  button-background: var(--grey-4);
  button-icon: var(--grey-8);
}
Disabled 
.disabled {
  label: var(--grey-7);
  input-stroke: var(--grey-5);
  input-background: var(--grey-3);
  placeholder: var(--grey-6);
  button-background: var(--grey-4);
  button-icon: var(--grey-8);
}
Error 
.error {
  label: var(--grey-7);
  input-stroke: var(--error-100);
  input-background: var(--grey-1);
  placeholder: var(--grey-8);
  icon: var(--error-100);
  button-background: var(--grey-4);
  button-icon: var(--grey-8);
}

Chips

Enabled 
.enabled {
  label: var(--grey-7);
  input-stroke: var(--grey-5);
  input-background: var(--grey-1);
  placeholder: var(--grey-6);
}
Hover 
.hover {
  label: var(--grey-7);
  input-stroke: var(--grey-6);
  input-background: var(--grey-1);
  placeholder: var(--grey-6);
}
Focus 
.focus {
  label: var(--grey-7);
  input-stroke: var(--theme-100);
  input-background: var(--grey-1);
  insert: var(--grey-8);
}
Read-only 
.readOnly {
  label: var(--grey-7);
  input-stroke: var(--grey-3);
  input-background: var(--grey-1);
  placeholder: var(--grey-8);
  chip-background: var(--grey-4);
  chip-icon: var(--grey-8);
}
Disabled 
.disabled {
  label: var(--grey-7);
  input-stroke: var(--grey-5);
  input-background: var(--grey-3);
  placeholder: var(--grey-6);
  chip-background: var(--grey-4);
  chip-icon: var(--grey-8);
}
Error 
.error {
  label: var(--grey-7);
  input-stroke: var(--error-100);
  input-background: var(--grey-1);
  placeholder: var(--grey-8);
  icon: var(--error-100);
}

Identifier

Enabled 
.enabled {
  label: var(--grey-7);
  input-stroke: var(--grey-5);
  input-background: var(--grey-1);
  placeholder: var(--grey-6);
  chip-background: var(--grey-4);
  chip-text: var(--grey-8);
}
Hover 
.hover {
  label: var(--grey-7);
  input-stroke: var(--grey-6);
  input-background: var(--grey-1);
  placeholder: var(--grey-6);
  chip-background: var(--grey-4);
  chip-text: var(--grey-8);
}
Focus 
.focus {
  label: var(--grey-7);
  input-stroke: var(--theme-100);
  input-background: var(--grey-1);
  insert: var(--grey-8);
  chip-background: var(--grey-4);
  chip-text: var(--grey-8);
}
Read-only 
.readOnly {
  label: var(--grey-7);
  input-stroke: var(--grey-3);
  input-background: var(--grey-1);
  placeholder: var(--grey-8);
  chip-background: var(--grey-4);
  chip-text: var(--grey-8);
}
Disabled 
.disabled {
  label: var(--grey-7);
  input-stroke: var(--grey-5);
  input-background: var(--grey-3);
  placeholder: var(--grey-6);
  chip-background: var(--grey-4);
  chip-text: var(--grey-8);
}
Error 
.error {
  label: var(--grey-7);
  input-stroke: var(--error-100);
  input-background: var(--grey-1);
  placeholder: var(--grey-8);
  icon: var(--error-100);
  chip-background: var(--grey-4);
  chip-text: var(--grey-8);
}

Link

Enabled 
.enabled {
  label: var(--grey-7);
  input-stroke: var(--grey-5);
  input-background: var(--grey-1);
  placeholder: var(--grey-6);
  button-background: var(--grey-1);
  button-color: var(--theme-100);
}
Hover 
.hover {
  label: var(--grey-7);
  input-stroke: var(--grey-6);
  input-background: var(--grey-1);
  placeholder: var(--grey-6);
  button-background: var(--grey-1);
  button-color: var(--theme-100);
}
Focus 
.focus {
  label: var(--grey-7);
  input-stroke: var(--theme-100);
  input-background: var(--grey-1);
  insert: var(--grey-8);
  button-background: var(--grey-1);
  button-color: var(--theme-100);
}
Read-only 
.readOnly {
  label: var(--grey-7);
  input-stroke: var(--grey-3);
  input-background: var(--grey-1);
  placeholder: var(--grey-8);
  button-background: var(--grey-1);
  button-color: var(--theme-100);
}
Disabled 
.disabled {
  label: var(--grey-7);
  input-stroke: var(--grey-5);
  input-background: var(--grey-3);
  placeholder: var(--grey-6);
  button-background: var(--grey-1);
  button-color: var(--theme-100);
}
Error 
.error {
  label: var(--grey-7);
  input-stroke: var(--error-100);
  input-background: var(--grey-1);
  placeholder: var(--grey-8);
  icon: var(--error-100);
  button-background: var(--grey-1);
  button-color: var(--theme-100);
}

Select

Enabled 
.enabled {
  label: var(--grey-7);
  input-stroke: var(--grey-5);
  input-background: var(--grey-1);
  placeholder: var(--grey-6);
  chip-background: var(--grey-4);
  chip-text: var(--grey-8);
}
Hover 
.hover {
  label: var(--grey-7);
  input-stroke: var(--grey-6);
  input-background: var(--grey-1);
  placeholder: var(--grey-6);
  chip-background: var(--grey-4);
  chip-text: var(--grey-8);
}
Focus 
.focus {
  label: var(--grey-7);
  input-stroke: var(--theme-100);
  input-background: var(--grey-1);
  insert: var(--grey-8);
  chip-background: var(--grey-4);
  chip-text: var(--grey-8);
}
Read-only 
.readOnly {
  label: var(--grey-7);
  input-stroke: var(--grey-3);
  input-background: var(--grey-1);
  placeholder: var(--grey-8);
  chip-background: var(--grey-4);
  chip-text: var(--grey-8);
}
Disabled 
.disabled {
  label: var(--grey-7);
  input-stroke: var(--grey-5);
  input-background: var(--grey-3);
  placeholder: var(--grey-6);
  chip-background: var(--grey-4);
  chip-text: var(--grey-8);
}
Error 
.error {
  label: var(--grey-7);
  input-stroke: var(--error-100);
  input-background: var(--grey-1);
  placeholder: var(--grey-8);
  icon: var(--error-100);
  chip-background: var(--grey-4);
  chip-text: var(--grey-8);
}

Size

Small 
.small {
  label: var(--label-small);
  input-height: 28px;
  input-border: var(--x-small-radius);
  input-gap: 8px;
  input-padding: var(0, --spacing-8);
  placeholder: var(--label-small);
  \\ For Chips
  padding-left: var(--sapcing-4);
  chip-size: var(--small); 
}
Regular 
.regular {
  label: var(--label-regular);
  input-height: 36px;
  input-border: var(--x-small-radius);
  input-gap: 8px;
  input-padding: var(0, --spacing-8);
  placeholder: var(--label-regular);
  \\ For Chips
  padding-left: var(--sapcing-4);
  chip-size: var(--regular); 
}
Large 
.large {
  label: var(--label-large);
  input-height: 40px;
  input-border: var(--x-small-radius);
  input-gap: 8px;
  input-padding: var(0, --spacing-8);
  placeholder: var(--label-large);
  \\ For Chips
  padding-left: var(--sapcing-8);
  chip-size: var(--regular); 
}

Useful links

guidelines figma accent icon

Consult our Figma file to access our assets and inspect them in dev mode.

Figma Component
polygon-framework

This component is or will be provided by the Polygon framework. See its documentation to learn more.

Polygon Framework

This element is in line with the guidelines of the CDS (Cegid Design System). Find out more.

Cegid DS

Behavior

Clear

We can delete content when it is inserted in focus and state states.

We use this behavior to speed up the insertion or deletion of content.

Clear
Clear button inside a Text Field

Validation

We have two possible validations for Text Fields.

By default, a validation is applied when the Text Field status changes from focus to active.

We can also use a mechanism to validate the content as the user enters it. This validation should be avoided because, when excessive, it causes friction for the user. It is recommended to use it when you need to create a unique name, for example.

Validation
Validation error in a Text Field

Required

When a Text Field is mandatory, we add an asterisk after its label. If it remains empty after submitting the form, it should trigger error validation.

This helps the user to have a reference on what is the most important and mandatory information in a form and to have fewer errors until form is presented correctly.

Required
Required information in Text-Field

Dos & Dont’s

Tooltip + HelperText
Don’t

Use tooltips with help messages;

Do

Combine action or detail variations with help variations;

Case Studies

Building a new Seamless User Experience

Using a design system is like having a set of building blocks for creating digital products. It ensures everything looks …
Read More

Discover the exciting features

Compose Design brings a host of thrilling and transformative new features designed to enhance your experience. Dive into our latest …
Read More

Benefits of a Design System

A design system is a collection of reusable components and guidelines that ensure consistency and efficiency in building digital products …
Read More

References

Outline