Todos los formularios se componen de varios elementos:
Etiquetas: informe a los usuarios qué significan los campos de entrada correspondientes.
Text Input o Campos de entrada: permite a los usuarios proporcionar información. La información se puede ingresar a través de una variedad de diferentes campos de entrada que van desde campos de texto, casillas de verificación y muchos otros tipos.
Texto de ayuda : proporciona ayuda sobre cómo completar un campo. El texto auxiliar es opcional.
Placeholder: sugiere lo que se incluye en un campo. El texto del marcador de posición es opcional.
Botones: permite a los usuarios enviar un formulario.
Validación: garantiza que los datos enviados por el usuario se ajusten a parámetros aceptables.
Text Input
Los input de texto permiten al usuario interactuar e introducir contenido y datos. Este componente se puede utilizar para entradas de formato largo y corto.
Siempre que sea posible, detectar y rellenar previamente las entradas para reducir errores y ahorrar tiempo. Cuando no se puede determinar el valor, usar la escritura anticipada para hacer sugerencias. Utilizar mayúsculas y minúsculas para valores predeterminados, valores detectados y texto de autocompletado.
Validación en tiempo real
La validación en tiempo real ayuda a agilizar el proceso y mantener los datos limpios cuando el usuario está completando formularios. El mensaje de validación debe incluirse para advertir al usuario sobre el texto que se ingresó incorrectamente o un campo obligatorio que falta.
Placeholder
El uso de placeholder en lugar de una etiqueta a veces se emplea como método para ahorrar espacio. Sin embargo, esto no se recomienda porque oculta el contexto y presenta problemas de accesibilidad.
Texto de ayuda
El texto auxiliar es información pertinente que ayuda al usuario a completar un campo. El texto auxiliar siempre está disponible cuando la entrada está enfocada y aparece debajo de la etiqueta.
El texto auxiliar opcional debe usarse para proporcionar instrucciones que ayuden a los usuarios a comprender cómo completar el campo de texto, así como también para indicar cualquier entrada requerida y opcional, formatos de datos y otra información relevante.
Text Area
Los componentes Text Area son utilizados como campos de texto, se diferencian de los Text Field en que son capaces de almacenar una cantidad mucho mayor de texto, incluso son capaces de crecer para contener más información.
Los campos de texto y las áreas de texto pueden tener un límite de caracteres y un contador. Use el límite de caracteres y el contador para que los usuarios sepan antes de comenzar a escribir, así entender cuándo supera el límite de caracteres.
Search
El componente Search es utilizado para realizar la busqueda del contenido de forma mucho mas rápida, evitando tener que revisar cada sección para encontrar lo que se está buscando.
Item List
Permiten crear conjuntos de elementos en forma de lista en un
menú desplegable.
Switch
Los Switches son componentes que representan una variable booleana (TRUE / FALSE), Principalmente relacionado a configuraciones.
File
El componente File es utilizado para visualizar, agrupar y seleccionar archivos dentro de una vista.
Slide-sheet
El Frame Sidesheet es utilizado como un menú configurable lateral, puede ser usado como formulario o panel de configuración.
Picker date
El componente Picker Date es utilizado como una forma expliícita y sencilla de seleccionar una fecha.
Picker Time
El componente Picker Time es utilizado como una forma expliícita y sencilla de seleccionar una hora.
Todos los componentes han sido diseñados para trabajar armoniosamente juntos, como partes de un todo mayor. Es por esto que cada componente deber ser integrado y construido siguiendo nuestros lineamientos de usabilidad y guías de construcción. Toda esta información se encuentra en la página Lineamientos de construcción de nuestro sistema de diseño. Además se debe tener en consideración la accesibilidad en el uso de la tipografía y la accesibilidad del color.