Text Field

UI Components

The Text Field component is used to input and submit text-based information, particularly on the login page and in forms. Its size, shape, and style can be customized.

Introduction

The Text Field component is a fundamental element in any design system, as it allows users to input and submit text-based information. It is a versatile component that can be used in a variety of contexts, from forms and surveys to search bars and chat interfaces.

The Text Field component in the GoodBarber design system likely includes a variety of different options to suit different use cases, such as different sizes and types, as well as support for multiple lines of text. Additionally, it likely follows a consistent set of design principles to ensure that it looks and feels like a cohesive part of your app design, including things like consistent spacing.

Anatomy

The Text Field component exists in 3 sizes (Small, Medium, Large) and 2 types (Title UP and Title IN). It can be on 1 line or several lines. Despite the many variations of the component, some design principles are constant.

Title UP

Common design principles

The spacing and the size of the icons are the same for the 3 sizes of the component:

Single LineMulti-Line

Single and multi-line text fields in Title-Up layout

Single and multi-line text fields in Title-Up layout

Field Height: Single Line

For this Title UP version of the component, the height of the field does not vary according to the content, but according to the size chosen (Small, Medium or Large).


MobileTabletWeb

Small
Small single text field in Title-Up layout

Small single text field in Title-Up layout

Medium
Medium single text field in Title-Up layout

Medium single text field in Title-Up layout

Large
Large single text field in Title-Up layout

Large single text field in Title-Up layout

Field Height: Multi-Line

The height of the field depends here on its content. We add a top and bottom padding whose value depends on the chosen field size:

Height and padding of a multi-line text field in Title-Up layout

Height and padding of a multi-line text field in Title-Up layout

SmallPadding Top / Bottom12 px
MediumPadding Top / Bottom16 px
LargePadding Top / Bottom20 px


MobileTabletWeb

Small
Small multi-line text field in Title-Up layout

Small multi-line text field in Title-Up layout

Medium
Medium multi-line text field in Title-Up layout

Medium multi-line text field in Title-Up layout

Large
Large multi-line text field in Title-Up layout

Large multi-line text field in Title-Up layout

Title IN

Common design principles

The spacing and the size of the icons are the same for the 3 sizes of the component but for this Title IN version, the display changes according to the state of the component:

  • Disabled / Inactive → Field Title
  • Focus / Complete / Error → Field Title + User input

Single LineMulti-Line

Disabled / Inactive states
Display in Disabled / Inactive states in Title-In layout

Display in Disabled / Inactive states in Title-In layout

Focus / Complete / Error states
Display in Focus / Complete / Error states in Title-In layout

Display in Focus / Complete / Error states in Title-In layout

Field Height: Single Line

For the Disabled and Inactive states, only the Field Title appears, however, the height of the field will be that of the Focus, Complete and Error state which include the Field title and the User input:

Single line text field height in Title-In layout

Single line text field height in Title-In layout


MobileTabletWeb

Small
Small single line text field in Title-In layout

Small single line text field in Title-In layout

Medium
Small single line text field in Title-In layout

Small single line text field in Title-In layout

Large
Small single line text field in Title-In layout

Small single line text field in Title-In layout

Field Height: Multi-Line

The top/bottom padding value depends on the chosen field size:

Multi-line text field height in Title-In layout

Multi-line text field height in Title-In layout

SmallPadding Top / Bottom*8 px
MediumPadding Top / Bottom12 px
LArgePadding Top / Bottom16 px


MobileTabletWeb

Small
Small multi-line text field in Title-In layout

Small multi-line text field in Title-In layout

Medium
Medium multi-line text field in Title-In layout

Medium multi-line text field in Title-In layout

Large
Large multi-line text field in Title-In layout

Large multi-line text field in Title-In layout

Font Size

The Font size changes depending on the devices and the choice of the component size.

You can have an overview of the different versions of the Text Field with the corresponding font sizes in the file at the bottom of the page.

Component SizeText LevelMobileTabletWeb
SmallBody 1141516
Small Body 1111212
MediumBody 1161719
Small Body 1121313
LargeBody 1192122
Small Body 1131414

Properties

Shape

Below, the Shape atom applied with the types Sharp / Rounded / Round for the fields on 1 line:

Shape on single line text field

Shape on single line text field

When we have several lines, we go from a radius of 50% of the height of the component to 12px.

Shape on multi-line text field

Shape on multi-line text field

⚠️ Round Shape Specificities

Border

By default, the Border Atom value is 1px for all states except Focus and Focus Error:


Disabled / Inactive / Complete / ErrorFocus / Focus Error

Border on field state

Border on field state

Shadow

The Shadow level changes for the Focus and Focus Errorstate: in fact, we go to the higher level to accentuate the elevation and thus highlight the activated component.

⚠️ Caution, the Inner Shadow option is not available for Focus and Focus Error, we will use Drop Shadow.


Disabled / Inactive / Complete / ErrorFocus / Focus Error

Drop shadow level 1&2 on field

Drop shadow level 1&2 on field

Drop shadow according field state

Drop shadow according field state

Mix Inner & Drop shadow according field state

Mix Inner & Drop shadow according field state

Mix levels of Inner & Drop shadow according field state

Mix levels of Inner & Drop shadow according field state

Layout

Form

Depending on the device, the layout of a Text Field associated with a button may vary.

On Mobile, the 2 components are one on top of the other because of the lack of space. The button occupies the whole width of the page :

Form spacing on mobile

Form spacing on mobile

On Tablet and Web, if the 2 components are one above the other the button will have its minimum length. If they are on the same line, the Text Field occupies the space left by the button:

Form spacing on tablet and desktop

Form spacing on tablet and desktop

To know the spacing between the fields and to see how they behave in the layout of a form, please refer to the Form Layout section.

Behavior

State animation in Title-Up and Title-In

State animation in Title-Up and Title-In

States

Title UPTitle IN

Disabled
Disabled state

Disabled state

Inactive
Inactive state

Inactive state

Focus
Focus state

Focus state

Complete
Complete state

Complete state

Error
Error state

Error state

Error Focus
Error Focus state

Error Focus state

Preview

Below a preview of the XD file, we find:

  • The 3 component sizes Small / Medium / Large
  • The corresponding font sizes
  • The 2 options Title IN and Title UP
  • The 3 shape options Sharp / Rounded / Round
  • Technical specifications for each field type
  • 2 states: Inactive and Complete