Brand Story

01

Verbal

02

Logo

03

Color

04

Typography

05

Art Direction

06

Icon
Download
Contact

07

Campos de texto

Un “Text Field” o campo de texto permite al usuario ingresar o editar información dentro de una interfaz digital.

 

Se utiliza comúnmente en formularios para recolectar o validar datos específicos.

Input - Tipo texto

•

Anatomía

Los siguientes son elementos básicos que en conjunto conforman un “Input”.

Label

Escribiendo

Action

Helper text

1

2

3

5

7

4

6

  1. Texto label
  2. Texto input
  3. Contenedor
  4. Botón accionable o icono derecho (opcional)
  5. Indicador de estado (stroke)
  6. Texto auxiliar
  7. Icono izquierdo (opcional)

•

Estructura

La estructura de un “Input” se conforma a partir del espaciado que hay entre sus elementos básicos.

Large

Label

Escribiendo

Action

Helper text

12

48

12

8

12

Medium

Label

Escribiendo

Helper text

40

4

4

  1. Large: Se sugiere su uso cuando se disponga de amplio espacio de trabajo en la pantalla.
  2. Medium: Este es el tamaño predeterminado y más utilizado.

•

Tipografía

Los elementos de tipo texto en los “Input” deben configurarse en mayúsculas y minúsculas, siendo mayúscula la primer letra de la frase o nombre propio.

Elemento

Label

Placeholder text

Input text

Action

Helper text

Tamaño

de fuente

12px

14px

14px

14px

12px

Peso de fuente

Medium

Regular

Regular

Semibold

Regular

Token de la fuente

$action3-medium

$action2-regular

$action2-regular

$action2-semibold

$action2-regular

•

Estados interactivos & Color

os estados interactivos del campo de texto indican su momento de uso y comunican la respuesta del sistema.

Estos estados ayudan al usuario a comprender situaciones como éxito, advertencia o error durante la interacción.

Label

Placeholder text

Action

Helper text

1

2

3

5

7

4

6

Input enable

  1. Color label: $carbon dark-600
  2. Color placeholder: $carbon dark-400
  3. Color contenedor: $carbon light-100
  4. Botón accionable: $carbon mid-100
  5. Indicador de estado: $carbon light-900
  6. Color texto auxiliar: $semantic info-900
  7. Color iconos: $secondary-900

Label

Input text

Action

Helper text

1

2

3

5

7

4

6

Input Disable

  1. Color label: $carbon dark-600
  2. Color placeholder: $carbon dark-100
  3. Color contenedor: $carbon light-400
  4. Botón accionable: $carbon mid-100
  5. Indicador de estado: $carbon light-900
  6. Color texto auxiliar: $carbon mid-100
  7. Color iconos: $carbon mid-100

Label

Placeholder text

Action

Helper text

1

2

3

5

7

4

6

Input Focus

  1. Color label: $carbon dark-600
  2. Color placeholder: $carbon dark-400
  3. Color contenedor: $carbon light-100
  4. Botón accionable: $secondary-900
  5. Indicador de estado: $carbon mid-600
  6. Color texto auxiliar: $semantic info-900
  7. Color iconos: $secondary-900

Label

Input text

Action

Helper text

1

2

3

5

7

4

6

Input Typing

  1. Color label: $carbon dark-600
  2. Color placeholder: $carbon dark-600
  3. Color contenedor: $carbon light-400
  4. Botón accionable: $secondary-900
  5. Indicador de estado: $carbon mid-600
  6. Color texto auxiliar: $semantic info-900
  7. Color iconos: $secondary-900

Label

Escribiendo

Action

Helper text

1

2

3

5

7

4

6

Input Filled

  1. Color label: $carbon dark-600
  2. Color placeholder: $carbon dark-600
  3. Color contenedor: $carbon light-100
  4. Botón accionable: $secondary-900
  5. Indicador de estado: $carbon mid-600
  6. Color texto auxiliar: $semantic info-900
  7. Color iconos: $secondary-900

Label

Input text

Action

Helper text success

1

2

3

5

7

4

6

Input Success

  1. Color label: $carbon dark-600
  2. Color placeholder: $carbon dark-600
  3. Color contenedor: $se. success-100
  4. Botón accionable: $secondary-900
  5. Indicador de estado: $se. success-900
  6. Color texto auxiliar: $sem. success-900
  7. Color iconos: $se. success-900

Label

Input text

Action

Helper text warning

1

2

3

5

7

4

6

Input Warning

  1. Color label: $carbon dark-600
  2. Color placeholder: $carbon dark-600
  3. Color contenedor: $se. warning-100
  4. Botón accionable: $sem. warning-900
  5. Indicador de estado: $se. warning-900
  6. Color texto auxiliar: $sem. warning-900
  7. Color iconos: $sem. warning-900

Label

Input text

Action

Helper text error

1

2

3

5

7

4

6

Input Error

  1. Color label: $carbon dark-600
  2. Color placeholder: $carbon dark-600
  3. Color contenedor: $sem. error-100
  4. Botón accionable: $sem. error-900
  5. Indicador de estado: $sem. error-900
  6. Color texto auxiliar: $sem. error-900
  7. Color iconos: $sem. error-900

Input - OTP

•

Anatomía

Los siguientes son los elementos básicos que conforman un “OTP Input”. Los tokens de color utilizados se comparten con los distintos estados del componente “Input – Tipo texto” descritos en esta misma sección.

1

2

3

4

5

6

7

8

Helper text

1

4

2

3

  1. Texto input (placeholder)
  2. Contenedor
  3. Texto auxiliar
  4. Indicador de estado (stroke)

•

Tipografía

Los campos de tipo texto en los inputs deben estar configurados exclusivamente para formato numérico, ya que han sido diseñados específicamente para ese propósito.

Elemento

Texto input (placeholder)

Helper text

Tamaño de fuente

21px

12px

Peso de fuente

Medium

Regular

Token de la fuente

$principal/H5-medium

$action2-regular

Input - Password

•

Anatomía

Los siguientes son los elementos básicos que conforman un “Password Input”. Los tokens de color utilizados se comparten con los distintos estados del componente “Input – Tipo texto” descritos en esta misma sección.

1

2

3

4

Caption Message

1

3

5

2

4

  1. Texto input (placeholder)
  2. Contenedor
  3. Icono
  4. Texto auxiliar
  5. Indicador de estado (stroke)

•

Tipografía

Los campos de tipo texto en los inputs deben estar configurados exclusivamente para formato numérico, ya que han sido diseñados específicamente para ese propósito.

Elemento

Texto input (placeholder)

Helper text

Tamaño de fuente

21px

12px

Peso de fuente

Medium

Regular

Token de la fuente

$principal/H5-medium

$action3-regular

Librería de Átomos →
Librería de Moléculas →

This is fine 🔥 | All Rights Reserved

Librería de átomos →

|

Librería de Moléculas →

ÁTOMOS

Logo

01

Color

02

Tipografía

03

Espaciados

04

Iconografía

05

MOLÉCULAS

Botones

06

Campos de texto

07

Controles de selección

08

Dropdowns

09

Modales

10

Notification (Toast)

11

Badges

12

07

Campos de texto

Un “Text Field” o campo de texto permite al usuario ingresar o editar información dentro de una interfaz digital. Se utiliza comúnmente en formularios para recolectar o validar datos específicos.

Input - Tipo texto

•

Anatomía

Los siguientes son elementos básicos que en conjunto conforman un “Input”.

Label

Escribiendo

Action

Helper text

1

2

3

5

7

4

6

  1. Texto label
  2. Texto input
  3. Contenedor
  4. Botón accionable o icono derecho (opcional)
  5. Indicador de estado (stroke)
  6. Texto auxiliar
  7. Icono izquierdo (opcional)

•

Estructura

La estructura de un “Input” se conforma a partir del espaciado que hay entre sus elementos básicos.

Large

Label

Escribiendo

Action

Helper text

12

48

12

8

12

Medium

Label

Escribiendo

Helper text

40

4

4

  1. Large: Se sugiere su uso cuando se disponga de amplio espacio de trabajo en la pantalla.
  2. Medium: Este es el tamaño predeterminado y más utilizado.

•

Tipografía

Los elementos de tipo texto en los “Input” deben configurarse en mayúsculas y minúsculas, siendo mayúscula la primer letra de la frase o nombre propio.

Elemento

Label

Placeholder text

Input text

Action

Helper text

Tamaño de fuente

12px

14px

14px

14px

12px

Peso de fuente

Medium

Regular

Regular

Semibold

Regular

Token de la fuente

$action3-medium

$action2-regular

$action2-regular

$action2-semibold

$action2-regular

•

Estados interactivos & Color

os estados interactivos del campo de texto indican su momento de uso y comunican la respuesta del sistema.

Estos estados ayudan al usuario a comprender situaciones como éxito, advertencia o error durante la interacción.

Label

Placeholder text

Action

Helper text

1

2

3

5

7

4

6

Input enable

  1. Color label: $carbon dark-600
  2. Color placeholder: $carbon dark-400
  3. Color contenedor: $carbon light-100
  4. Botón accionable: $carbon mid-100
  5. Indicador de estado: $carbon light-900
  6. Color texto auxiliar: $semantic info-900
  7. Color iconos: $secondary-900

Label

Input text

Action

Helper text

1

2

3

5

7

4

6

Input Disable

  1. Color label: $carbon dark-600
  2. Color placeholder: $carbon dark-100
  3. Color contenedor: $carbon light-400
  4. Botón accionable: $carbon mid-100
  5. Indicador de estado: $carbon light-900
  6. Color texto auxiliar: $carbon mid-100
  7. Color iconos: $carbon mid-100

Label

Placeholder text

Action

Helper text

1

2

3

5

7

4

6

Input Focus

  1. Color label: $carbon dark-600
  2. Color placeholder: $carbon dark-400
  3. Color contenedor: $carbon light-100
  4. Botón accionable: $secondary-900
  5. Indicador de estado: $carbon mid-600
  6. Color texto auxiliar: $semantic info-900
  7. Color iconos: $secondary-900

Label

Input text

Action

Helper text

1

2

3

5

7

4

6

Input Typing

  1. Color label: $carbon dark-600
  2. Color placeholder: $carbon dark-600
  3. Color contenedor: $carbon light-400
  4. Botón accionable: $secondary-900
  5. Indicador de estado: $carbon mid-600
  6. Color texto auxiliar: $semantic info-900
  7. Color iconos: $secondary-900

Label

Escribiendo

Action

Helper text

1

2

3

5

7

4

6

Input Filled

  1. Color label: $carbon dark-600
  2. Color placeholder: $carbon dark-600
  3. Color contenedor: $carbon light-100
  4. Botón accionable: $secondary-900
  5. Indicador de estado: $carbon mid-600
  6. Color texto auxiliar: $semantic info-900
  7. Color iconos: $secondary-900

Label

Input text

Action

Helper text success

1

2

3

5

7

4

6

Input Success

  1. Color label: $carbon dark-600
  2. Color placeholder: $carbon dark-600
  3. Color contenedor: $se. success-100
  4. Botón accionable: $secondary-900
  5. Indicador de estado: $se. success-900
  6. Color texto auxiliar: $sem. success-900
  7. Color iconos: $se. success-900

Label

Input text

Action

Helper text warning

1

2

3

5

7

4

6

Input Warning

  1. Color label: $carbon dark-600
  2. Color placeholder: $carbon dark-600
  3. Color contenedor: $se. warning-100
  4. Botón accionable: $sem. warning-900
  5. Indicador de estado: $se. warning-900
  6. Color texto auxiliar: $sem. warning-900
  7. Color iconos: $sem. warning-900

Label

Input text

Action

Helper text error

1

2

3

5

7

4

6

Input Error

  1. Color label: $carbon dark-600
  2. Color placeholder: $carbon dark-600
  3. Color contenedor: $sem. error-100
  4. Botón accionable: $sem. error-900
  5. Indicador de estado: $sem. error-900
  6. Color texto auxiliar: $sem. error-900
  7. Color iconos: $sem. error-900

Input - OTP

•

Anatomía

Los siguientes son los elementos básicos que conforman un “OTP Input”. Los tokens de color utilizados se comparten con los distintos estados del componente “Input – Tipo texto” descritos en esta misma sección.

1

2

3

4

5

6

7

8

Helper text

1

4

2

3

  1. Texto input (placeholder)
  2. Contenedor
  3. Texto auxiliar
  4. Indicador de estado (stroke)

•

Tipografía

Los campos de tipo texto en los inputs deben estar configurados exclusivamente para formato numérico, ya que han sido diseñados específicamente para ese propósito.

Elemento

Texto input

(placeholder)

Helper text

Tamaño de fuente

21px

12px

Peso de fuente

Medium

Regular

Token de la fuente

$principal/H5-medium

$action2-regular

Input - Password

•

Anatomía

Los siguientes son los elementos básicos que conforman un “Password Input”. Los tokens de color utilizados se comparten con los distintos estados del componente “Input – Tipo texto” descritos en esta misma sección.

1

2

3

4

Caption Message

1

3

5

2

4

  1. Texto input (placeholder)
  2. Contenedor
  3. Icono
  4. Texto auxiliar
  5. Indicador de estado (stroke)

•

Tipografía

Los campos de tipo texto en los inputs deben estar configurados exclusivamente para formato numérico, ya que han sido diseñados específicamente para ese propósito.

Elemento

Texto input

(placeholder)

Helper text

Tamaño de fuente

21px

12px

Peso de fuente

Medium

Regular

Token de la fuente

$principal/H5-medium

$action3-regular

Librería de Átomos →
Librería de Moléculas →

This is fine 🔥 | All Rights Reserved

ÁTOMOS

Logo

01

Color

02

Tipografía

03

Espaciados

04

Iconografía

05

MOLÉCULAS

Botones

06

Campos de texto

07

Controles de selección

08

Dropdowns

09

Modales

10

Notification (Toast)

11

Badges

12

Librería de Átomos →
Librería de Moléculas →

07

Campos de texto

Un “Text Field” o campo de texto permite al usuario ingresar o editar información dentro de una interfaz digital.

Se utiliza comúnmente en formularios para recolectar o validar datos específicos.

Input - Tipo texto

•

Anatomía

Los siguientes son elementos básicos que en conjunto conforman un “Input”.

Label

Escribiendo

Action

Helper text

1

2

3

5

7

4

6

  1. Texto label
  2. Texto input
  3. Contenedor
  4. Botón accionable o icono derecho (opcional)
  5. Indicador de estado (stroke)
  6. Texto auxiliar
  7. Icono izquierdo (opcional)

•

Estructura

La estructura de un “Input” se conforma a partir del espaciado que hay entre sus elementos básicos.

Large

Label

Escribiendo

Action

Helper text

12

48

12

8

12

Medium

Label

Escribiendo

Helper text

40

4

4

  1. Large: Se sugiere su uso cuando se disponga de amplio espacio de trabajo en la pantalla.
  2. Medium: Este es el tamaño predeterminado y más utilizado.

•

Tipografía

Los elementos de tipo texto en los “Input” deben configurarse en mayúsculas y minúsculas, siendo mayúscula la primer letra de la frase o nombre propio.

Elemento

Label

Placeholder text

Input text

Action

Helper text

Tamaño de fuente

12px

14px

14px

14px

12px

Peso de fuente

Medium

Regular

Regular

Semibold

Regular

Token de la fuente

$action3-medium

$action2-regular

$action2-regular

$action2-semibold

$action3-regular

•

Estados interactivos & Color

os estados interactivos del campo de texto indican su momento de uso y comunican la respuesta del sistema.

Estos estados ayudan al usuario a comprender situaciones como éxito, advertencia o error durante la interacción.

Label

Placeholder text

Action

Helper text

1

2

3

5

7

4

6

Input enable

  1. Color label: $carbon dark-600
  2. Color placeholder: $carbon dark-400
  3. Color contenedor: $carbon light-100
  4. Botón accionable: $carbon mid-100
  5. Indicador de estado: $carbon light-900
  6. Color texto auxiliar: $semantic info-900
  7. Color iconos: $secondary-900

Label

Input text

Action

Helper text

1

2

3

5

7

4

6

Input Disable

  1. Color label: $carbon dark-600
  2. Color placeholder: $carbon dark-100
  3. Color contenedor: $carbon light-400
  4. Botón accionable: $carbon mid-100
  5. Indicador de estado: $carbon light-900
  6. Color texto auxiliar: $carbon mid-100
  7. Color iconos: $carbon mid-100

Label

Placeholder text

Action

Helper text

1

2

3

5

7

4

6

Input Focus

  1. Color label: $carbon dark-600
  2. Color placeholder: $carbon dark-400
  3. Color contenedor: $carbon light-100
  4. Botón accionable: $secondary-900
  5. Indicador de estado: $carbon mid-600
  6. Color texto auxiliar: $semantic info-900
  7. Color iconos: $secondary-900

Label

Input text

Action

Helper text

1

2

3

5

7

4

6

Input Typing

  1. Color label: $carbon dark-600
  2. Color placeholder: $carbon dark-600
  3. Color contenedor: $carbon light-400
  4. Botón accionable: $secondary-900
  5. Indicador de estado: $carbon mid-600
  6. Color texto auxiliar: $semantic info-900
  7. Color iconos: $secondary-900

Label

Escribiendo

Action

Helper text

1

2

3

5

7

4

6

Input Filled

  1. Color label: $carbon dark-600
  2. Color placeholder: $carbon dark-600
  3. Color contenedor: $carbon light-100
  4. Botón accionable: $secondary-900
  5. Indicador de estado: $carbon mid-600
  6. Color texto auxiliar: $semantic info-900
  7. Color iconos: $secondary-900

Label

Input text

Action

Helper text success

1

2

3

5

7

4

6

Input Success

  1. Color label: $carbon dark-600
  2. Color placeholder: $carbon dark-600
  3. Color contenedor: $se. success-100
  4. Botón accionable: $secondary-900
  5. Indicador de estado: $se. success-900
  6. Color texto auxiliar: $sem. success-900
  7. Color iconos: $se. success-900

Label

Input text

Action

Helper text warning

1

2

3

5

7

4

6

Input Warning

  1. Color label: $carbon dark-600
  2. Color placeholder: $carbon dark-600
  3. Color contenedor: $se. warning-100
  4. Botón accionable: $sem. warning-900
  5. Indicador de estado: $se. warning-900
  6. Color texto auxiliar: $sem. warning-900
  7. Color iconos: $sem. warning-900

Label

Input text

Action

Helper text error

1

2

3

5

7

4

6

Input Error

  1. Color label: $carbon dark-600
  2. Color placeholder: $carbon dark-600
  3. Color contenedor: $sem. error-100
  4. Botón accionable: $sem. error-900
  5. Indicador de estado: $sem. error-900
  6. Color texto auxiliar: $sem. error-900
  7. Color iconos: $sem. error-900

Input - OTP

•

Anatomía

Los siguientes son los elementos básicos que conforman un “OTP Input”. Los tokens de color utilizados se comparten con los distintos estados del componente “Input – Tipo texto” descritos en esta misma sección.

1

2

3

4

5

6

7

8

Helper text

1

4

2

3

  1. Texto input (placeholder)
  2. Contenedor
  3. Texto auxiliar
  4. Indicador de estado (stroke)

•

Tipografía

Los campos de tipo texto en los inputs deben estar configurados exclusivamente para formato numérico, ya que han sido diseñados específicamente para ese propósito.

Elemento

Texto input (placeholder)

Helper text

Tamaño de fuente

21px

12px

Peso de fuente

Medium

Regular

Token de la fuente

$principal/H5-medium

$action2-regular

Input - Password

•

Anatomía

Los siguientes son los elementos básicos que conforman un “Password Input”. Los tokens de color utilizados se comparten con los distintos estados del componente “Input – Tipo texto” descritos en esta misma sección.

1

2

3

4

Caption Message

1

3

5

2

4

  1. Texto input (placeholder)
  2. Contenedor
  3. Icono
  4. Texto auxiliar
  5. Indicador de estado (stroke)

•

Tipografía

Los campos de tipo texto en los inputs deben estar configurados exclusivamente para formato numérico, ya que han sido diseñados específicamente para ese propósito.

Elemento

Texto input (placeholder)

Helper text

Tamaño de fuente

21px

12px

Peso de fuente

Medium

Regular

Token de la fuente

$principal/H5-medium

$action3-regular

This is fine 🔥 | All Rights Reserved