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 color of states;
- Updated button typography;
- Updated link style;
