Estilos

Componentes

Formularios

Organismos

Campo de texto (input text)

Los campos de texto permiten a las personas usuarias ingresar nombres, direcciones de correo electrónico, contraseñas, comentarios y otros tipos de texto sin formato. Generalmente, se usa en formularios.

Uso

Cuándo usar

  • Para datos concisos que no requieran más de una línea, como el nombre de una persona, el correo electrónico o número de teléfono utilizá el campo de texto.
  • Cuando se espera una respuesta larga, como una consulta, comentario o descripción, utilizá el campo de área de texto.
  • Puede utilizarse para mostrar datos precargados que puedan requerir edición por parte de la persona usuaria.

Cuándo no usar

  • Cuando haya opciones conocidas y definidas de antemano, por ejemplo: provincias, países, tipo de documento, utilizá el componente selector.
  • Cuando la persona usuaria necesite seleccionar más de una opción, utilizá el componente casilla de verificación.
  • Cuando la persona usuaria necesite seleccionar una única opción visible, utilizá el componente botón de radio.

Campo de texto

Se utiliza para ingresar datos breves, de una sola línea, como nombres, dirección de correo electrónico o números de teléfonos.

Ejemplo visual de campo de texto

Tipos de campos de texto

El componente campo de texto admite diferentes formatos para adaptarse a distintas necesidades del formulario. Su apariencia, validación y comportamiento pueden variar según el valor type configurado.

Podés acceder a la ficha de patrones de formulario para consultar el diseño sugerido para cada tipo de campo.

TipoComportamientoConsideraciones
TextoCampo por defecto. Permite cualquier texto corto en una sola línea.Usar cuando no hay validaciones específicas. Es necesario definir el propósito con un label.
ContraseñaOculta el valor ingresado y permite mostrar/ocultar contenido con un ícono.Requiere accesibilidad del botón de "ver contraseña" (aria-label).
CorreoValida el formato de dirección de correo. En dispositivos mobile muestra teclado con el símbolo "@".Evitar el uso de autocorrector. Informar a la persona usuaria si el formato ingresado no es válido.
NúmeroAcepta sólo números. Muestra teclado numérico en mobile.No siempre es ideal para datos como DNI o códigos postales ya que puede impedir caracteres no numéricos, como espacios.
TeléfonoPermite ingresar números de teléfono. Muestra el teclado numérico en mobile.A diferencia del tipo Número, acepta caracteres como +, -, y espacios. Considerar un placeholder para indicar el formato esperado.
FechaMuestra un selector de fecha nativo (calendario).El diseño del selector nativo puede variar entre navegadores. Considerar un placeholder para indicar el formato esperado.
HoraMuestra selector nativo de hora.Funciona bien cuando el dato es específico, por ejemplo en turnos. Informar si el formato es 12h o 24h.

Prefijos y sufijos

Son útiles cuando existe un símbolo o abreviatura que ayuden a entender mejor qué tipo de información se espera. Recomendamos no utilizar únicamente prefijos o sufijos, ya que los lectores de pantalla no los leerán.

Ejemplos de uso de prefijos

Mala práctica de uso de prefijos
close

Evitar el uso de prefijos como único indicador del dato que se espera ingresar.

Buena práctica de uso de prefijos
check

Utilizar el texto de prefijo para reforzar el tipo de dato que se espera, como los símbolos de una moneda.

Ejemplos de uso de sufijos

Buena práctica de uso de sufijos
close

Evitar el uso de sufijos como único indicador del dato que se espera ingresar.

Buena práctica de uso de sufijos
check

Utilizar el texto de prefijo para reforzar el tipo de dato que se espera, como los símbolos de una moneda.

Iconos accionables y decorativos

Se pueden incluir iconos dentro de los campos de texto para complementar visualmente su propósito o brindar acciones adicionales.

  • Iconos decorativos. Se ubican al comienzo del campo, y ayudan a reforzar el contexto del dato que se espera, por ejemplo, un icono de ubicación en un campo de dirección.
  • Iconos accionables. Se ubican generalmente al final del campo, y permiten ejecutar una acción relacionada, como copiar contenido, activar dictado por voz, o mostrar/ocultar contraseña.

Ejemplos de uso

Ejemplo de uso de accionables 1Ejemplo de uso de accionables 2

Mensaje de error

Si los datos ingresados son inválidos, aparecerá un mensaje de error debajo del campo de texto describiendo lo que está mal. Los errores más comunes incluyen:

  • Formato incorrecto de datos. El contenido no coincide con el formato esperado, por ejemplo, una dirección de correo sin "@".
  • Caracteres no permitidos. Se ingresaron símbolos o letras que no están habilitados para ese campo, por ejemplo, letras en un campo numérico.
  • Dejar un campo obligatorio incompleto. Falta completar un dato obligatorio que el formulario necesita para avanzar.

Ejemplos de uso

Mala práctica en mensaje de error en formularios
close

Evitá términos técnicos o específicos del sistema que puedan confundir.

Buena práctica en mensaje de error en formularios
check

Utilizá descripciones simples, directas y orientadas a la solución.

Área de texto

Se utiliza para permitir que las personas usuarias ingresen una cantidad de texto que sea más extensa de una sola línea. Se suele usar para comentarios o preguntas en formularios.

Ejemplo visual de campo de area de texto

Contador de caracteres

Es un indicador que informa a las personas usuarias cuánto texto pueden ingresar cuando hay un límite en la cantidad de caracteres. Recomendamos utilizar este indicador sólo cuando exista una buena razón para limitar los caracteres, por ejemplo:

  • Para mantener la información clara y fácil de leer en procesos como solicitudes o formularios breves.
  • Restricciones técnicas o legales. Cuando el sistema tiene un límite específico, por ejemplo, en un campo de nombre o código.
  • Dejar un campo obligatorio incompleto. Falta completar un dato obligatorio que el formulario necesita para avanzar.

Indicador de requerido y opcional

Indica si un campo es obligatorio u opcional, ayudando a las personas a completar el formulario con claridad. Podés consultar la ficha de patrones de formulario para conocer los lineamientos de uso del indicador.

Ejemplo visual de indicador de requerido y opcional

Ancho mínimo y máximo

El ancho de cada campo debe ser proporcional a la longitud del contenido esperado.Podés conocer más sobre la disposición de los campos en la ficha de patrones de formulario.

  • El ancho mínimo del campo de texto es de 160px.
  • El ancho máximo del campo de texto es de 356px.
  • En dispositivos mobile el campo ocupa todo el ancho disponible.
Ejemplo visual de ancho mínimo y máximo, indicando columnas

Contenidos

Etiquetas (label)

Cada campo de texto debe tener una etiqueta para identificar y describir su propósito. El texto de la etiqueta debe estar alineado a la izquierda. Recomendamos escribir el texto de la etiqueta en mayúsculas y minúsculas, siendo lo más conciso posible, y no utilizar dos puntos después de los nombres de las etiquetas.

Texto descriptivo

Es un texto que guía al usuario para ingresar datos en el formato apropiado, brindando una explicación del campo y ayudando a prevenir errores. El texto descriptivo aparece debajo del campo de texto, es opcional, pero recomendado, y no debe contener más de 3 líneas de texto.

Texto del marcador de posición (placeholder)

El texto de marcador de posición (placeholder) es opcional y proporciona sugerencias o ejemplos de lo que se debe ingresar. El placeholder desaparece una vez que la persona usuaria comienza a ingresar datos, por lo tanto, no debe sustituir a la etiqueta (label) ni contener información crucial. Además, sugerimos que se relacione con el texto descriptivo ya que los lectores de pantalla no lo leen y puede ser difícil para las personas recordar la información proporcionada.

Contenido en esta página

Texto

Texto de asistencia

  <div class="form-label-container">
    <label for="input-text" class="form-label">
      Campo de texto *
    </label>
  </div>
  <input
    type="text"
    class="form-control"
    id="input-text"
    name="campoTexto"
    aria-describedby="Texto"
    placeholder="Ingrese Textos"
  />
  <p class="form-label-description">Texto de asistencia</p>

Número

Campo de asistencia

  <div class="form-label-container">
    <label for="input-number" class="form-label">
      Campo numérico *
    </label>
  </div>
  <input
    type="number"
    class="form-control"
    id="input-number"
    name="campoNumero"
    aria-describedby="Number"
    placeholder="Ingrese Números"
  />
  <p class="form-label-description">Campo de asistencia</p>

Correo electrónico

Campo de asistencia

  <div class="form-label-container">
    <label for="input-email" class="form-label">
      Campo de email *
    </label>
  </div>
  <input
    type="email"
    class="form-control"
    id="input-email"
    name="campoEmail"
    aria-describedby="Email"
    placeholder="email@test.com"
  />
  <p class="form-label-description">Campo de asistencia</p>

Fecha

  <div class="form-label-container">
    <label for="input-date" class="form-label">
      Nombre del campo *
    </label>
  </div>
  <input
    type="date"
    class="form-control"
    id="input-date"
    name="campoFecha"
    aria-describedby="Date"
    placeholder="Selecciona la fecha"
  />

Bloque de texto

Campo de asistencia

  <div class="form-label-container">
    <label for="input-textarea" class="form-label">
      Nombre del campo *
    </label>
  </div>
  <textarea class="form-control" id="input-textarea" name="campoBloqueTexto" placeholder="Texto de ejemplo"></textarea>
  <p class="form-label-description">Campo de asistencia</p>

De selección

Campo de asistencia


<div class="form-label-container">
  <label for="input-select" class="form-label">
    Nombre del selector *
  </label>
</div>
<select class="form-control form-select" aria-label="Ejemplo de selección por defecto">
    <option value="0">Seleccionar</option>
    <option value="1">Opción</option>
    <option value="2">Opción</option>
    <option value="3">Opción</option>
</select>
<p class="form-label-description">Campo de asistencia</p>

Deshabilitado






  <div class="container">
    <div class="col-12 col-lg-6">
      <div class="form-label-container">
        <label for="example-five" class="form-label disabled">
          Ejemplo campo de texto
        </label>
      </div>
      <input
        type="text"
        class="form-control"
        id="example-five"
        aria-describedby="Campo de texto"
        placeholder="Textos"
        disabled
      />
    </div>

    <div class="col-12 col-lg-6">
      <div class="form-label-container">
        <label for="example-four" class="form-label disabled">
          Ejemplo campo de numero
        </label>
      </div>
      <input
        type="number"
        class="form-control"
        id="example-four"
        aria-describedby="campo de número"
        placeholder="Números"
        disabled
      />
    </div>

    <div class="col-12 col-lg-6">
      <div class="form-label-container">
        <label for="example-three" class="form-label disabled">
          Ejemplo campo de mail
        </label>
      </div>
      <input
        type="email"
        class="form-control"
        id="example-three"
        aria-describedby="Email"
        placeholder="Email@test.com"
        disabled
      />
    </div>

    <div class="col-12 col-lg-6">
      <div class="form-label-container">
        <label for="example-two" class="form-label disabled">
          Ejemplo campo de fecha
        </label>
      </div>
      <input
        type="date"
        class="form-control"
        id="example-two"
        aria-describedby="Date"
        placeholder="selecciona tu fecha"
        disabled
      />
    </div>

    <div class="col-12 col-lg-6">
      <div class="form-label-container">
        <label for="example-one" class="form-label disabled">
          Ejemplo TextArea
        </label>
      </div>
      <textarea class="form-control" id="example-one" disabled ></textarea>
    </div>

    <div class="col-12 col-lg-6">
      <div class="form-label-container">  
        <label for="example-disabled-select" class='form-label disabled'>
          Ejemplo campo de selección.
        </label>
      </div>
      <select class="form-control form-select" aria-label="Ejemplo de input de selección por defecto" disabled>
        <option selected>Campo de selección</option>
        <option value="1">Opción</option>
        <option value="2">Opción</option>
        <option value="3">Opción</option>
      </select>
    </div>
  </div>

Con fondo

Con fondo light


<div class="p-4 form-bg-light">
  <div class="form-label-container">
    <label for="input-text-bg" class="form-label">
      Ejemplo campo de texto con fondo
    </label>
  </div>
  <input
    type="text"
    class="form-control"
    id="input-text-bg"
    name="campoTextoBg"
    aria-describedby="Texto"
    placeholder="Textos"
  />
</div>

Variantes

Anatomía

Anatomia del input de texto
ElementoCarácter
1. Etiqueta (label)Obligatorio, indicá que tipo de información requiere el campo.
2. Campo (InputField)Obligatorio, es el área donde las personas usuarias ingresan el texto.
3. Indicador de requeridoOpcional, los campos pueden etiquetarse como obligatorios u opcionales según el contexto.
4. PlaceholderOpcional, puede usarse para ejemplificar el formato del dato esperado.
5. Acción "eliminar contenido"Opcional, se utiliza como atajo para eliminar el contenido del campo.
6. Texto sufijoOpcional, se utiliza para ayudar a entender mejor qué tipo de información se espera, y se ubica al final del campo.
7. Icono derechoOpcional, muestra un icono decorativo a la derecha del campo de entrada.
8. Icono izquierdoOpcional, muestra un icono, decorativo o accionable, a la izquierda del campo de entrada.
9. Texto prefijoOpcional, se utiliza para ayudar a entender mejor qué tipo de información se espera y se ubica al inicio del campo.
10. Texto descriptivoOpcional pero recomendado, se utiliza para proporcionar ayuda o contexto adicional sobre el dato a ingresar.

Estados

Predeterminado (default)

Estado predeterminado del campo de texto en una interfaz.

Estado predeterminado del input de texto

En Foco (focus)

Es un principio de accesibilidad que asegura que cualquier elemento interactivo en una interfaz sea claramente visible cuando recibe la atención del usuario, especialmente al ser navegado con el teclado. En Obelisco se utiliza un borde o anillo (focus ring) por fuera del componente en un color distintivo.

Estado en foco del input de texto

Activo

Cuando un usuario está escribiendo contenido activamente en el campo.

Estado activo del input de texto

Completado

Indica que la persona usuaria ingresó información válida en el campo de texto.

Estado activo del input de texto

Error

Para garantizar la accesibilidad, el estado de error debe ser claramente perceptible. En los campos de texto, se utiliza un borde en color rojo con suficiente contraste. Esto asegura que todas las personas puedan identificar y corregir errores fácilmente, cumpliendo con las pautas de accesibilidad (WCAG).

Estado de error del input de texto

Deshabilitado (disabled)

Estado que indica que el campo de texto no está disponible para la interacción, lo que significa que no puede activarse.

Estado deshabilitado del input de texto

Contenido en esta página

Navegación alternativa

El componente de migas de pan está construido para ser reconocido por herramientas de asistencia como la navegación por teclado o lectores por voz.

TABENTER

Utilizando el tab la persona usuaria puede navegar a través de elementos de la interfaz. Además, con el enter, puede accionar los elementos sobre los que esté posicionada como botones, enlaces, entre otros.

Navegacion alternativa del campo de texto

Etiquetado descriptivo

Utilizá el atributo for para asociar una etiqueta <label> con un elemento de formulario como <input> o <textarea>, haciendo coincidir su valor con el atributo "id" del elemento correspondiente.

Además, los campos de formulario deben incluir el atributo name, que define el nombre del dato al enviarse el formulario, y el atributo type, que especifica el tipo de información esperada, por ejemplo, texto, correo o contraseña.

<div class="form-label-container">
    <label for="email">Correo electrónico</label>
</div>
<input type="email" id="email" name="email"/>
<p class="form-label-description">Campo de asistencia</p>

Criterios WCAG aplicados

Success Criterion 1.1.1 Non-text Content (Level A)

Si el campo tiene un ícono decorativo, por ejemplo, un ícono de búsqueda, debe tener una alternativa textual o estar marcado como decorativo (aria-hidden="true" o role="presentation").

Success Criterion 1.3.1 Info and Relationships (Level A)

La información, la estructura y las relaciones transmitidas a través de la presentación pueden determinarse mediante programación o están disponibles en el texto.

Success Criterion 1.4.11 Non-Text Contrast (Level AA)

La presentación visual de elementos de la interfaz de usuario y objetos gráficos tiene por lo menos una relación de contraste de 3:1 con respecto a los colores adyacentes.

Success Criterion 2.1.1 Keyboard (Level A)

Todas las funcionalidades del contenido se puede operar a través de una interfaz de teclado.

Success Criterion 2.4.6 Headings and Labels (Level AA)

Si se utilizan encabezados o etiquetas, deben describir con precisión el propósito o contenido al que se refieren. Esto facilita la comprensión y navegación del contenido, especialmente para personas con discapacidades cognitivas o que utilizan lectores de pantalla.

Success Criterion 2.4.7 Focus Visible (Level AA)

Cualquier interfaz de usuario operable por teclado tiene un modo de operación donde el indicador de enfoque del teclado es visible. Cuando utiliza un teclado para navegar por los checkboxs, los enlaces tienen un subrayado visible y un recuadro outline que indica que los enlaces son interactivos.

Success Criterion 3.3.2 Labels or Instructions (Level A)

Asegúrese de que todo el texto de ayuda y los mensajes de error proporcionen asistencia significativa para ayudar a los usuarios a evitar o corregir errores.

Success Criterion 4.1.2 Name, Role, Value (Level A)

Para todos los componentes de la interfaz de usuario (incluidos, entre otros: elementos de formulario, enlaces y componentes generados por scripts), el nombre y la función se pueden determinar mediante programación; los estados, propiedades y valores que puede establecer el usuario se pueden configurar mediante programación; y la notificación de cambios en estos elementos está disponible para los agentes de usuario, incluidas las tecnologías de asistencia.

Contenido en esta página

Navegación de pie de página