Text Field
A Text Field component in UX provides users with a space to input and edit text or alphanumeric characters.
- 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.
- 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
- 7. Selectable Chip
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.
Demo
Access the Figma file and inspect the element using Dev Mode.
Last Update
- Updated text field for link variation;
- Updated color for link on disabled state.
States
Enabled
.enabled {
label: var(--grey-7);
input-border: var(--grey-5);
input-background: var(--grey-1);
placeholder: var(--grey-7);
}Hover
.hover {
label: var(--grey-7);
input-border: var(--grey-6);
input-background: var(--grey-1);
placeholder: var(--grey-7);
}Focus
.focus {
label: var(--grey-7);
input-border: var(--theme-100);
input-background: var(--grey-1);
insert: var(--grey-8);
}Read-only
.readonly {
label: var(--grey-7);
input-border: var(--grey-1);
input-background: var(--grey-3);
placeholder: var(--grey-7);
}Disabled
.disabled {
label: var(--grey-7);
input-border: var(--grey-4);
input-background: var(--grey-2);
placeholder: var(--grey-6);
}Error
.error {
label: var(--grey-7);
input-border: var(--error-100);
input-background: var(--grey-1);
placeholder: var(--grey-8);
icon: var(--error-100);
}Filled
.filled {
placeholder: var(--grey-8);
}Variations
Adornment
.adornment {
label: var(--grey-7);
input-border: var(--grey-5);
input-background: var(--grey-1);
placeholder: var(--grey-7);
icon: var(--grey-7);
}Button Icon
.button_icon {
label: var(--grey-7);
input-border: var(--grey-5);
input-background: var(--grey-1);
placeholder: var(--grey-7);
button-background: var(--grey-4);
button-icon: var(--grey-8);
}Chips
.chips {
label: var(--grey-7);
input-border: var(--grey-5);
input-background: var(--grey-1);
placeholder: var(--grey-8);
chip-background: var(--grey-4);
chip-icon: var(--grey-8);
}Identifier
.identifier {
label: var(--grey-7);
input-border: var(--grey-5);
input-background: var(--grey-1);
placeholder: var(--grey-7);
chip-background: var(--grey-4);
chip-text: var(--grey-8);
}Link
.link {
label: var(--grey-7);
input-border: var(--grey-5);
input-background: var(--grey-1);
placeholder: var(--grey-7);
link-color: var(--theme-100);
}Select
.select {
label: var(--grey-7);
input-border: var(--grey-5);
input-background: var(--grey-1);
placeholder: var(--grey-7);
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
Consult our Figma file to access our assets and inspect them in dev mode.
This component is or will be provided by the Polygon framework. See its documentation to learn more.
This element is in line with the guidelines of the CDS (Cegid Design System). Find out more.
Behavior
Position
Input-type components must always be placed on grey-1 backgrounds (white) for optimal usability.
Avoid using them on grey-3 backgrounds (grey), as this can compromise the visibility of disabled and read-only states.
If placement on grey-3 backgrounds is necessary, ensure that disabled or read-only states are not utilized in these scenarios.
Avoid placing input-type components on grey-3 backgrounds to maintain optimal visibility and accessibility.
Input-type components should be placed over grey-1 backgrounds for optimal visibility and usability.
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.
Combine action or detail variations with help variations.
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.
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.
Use tooltips with help messages.
Hidden Required Text Fields
Text fields are very common UI elements, which means they are implemented frequently and in all sorts of interfaces. However, in some cases, they may not be immediately visible to users, for example when they are in a collapsed expander.
When required text fields are not immediately displayed, it is important that users know they are there. To this end, a red asterisk should be implemented in the UI element that is hiding the text field.
Link Variation
On the text field with link, an adornment can be used. The adornment is placed inside the text field before its label, providing visual context or reinforcing the meaning of the content.
When the field is disabled, use grey-6 for the entire field, including the link.
Using an adornment is not required.
Case Studies
Read Mode: Making Content Feel Effortless and Understandable
A Visual Recap of 2025: how we enhanced chatbot communication
