Web ResponsiveComponents
Form Elements

Form elements

Aquí encontrarás todos los elementos que debes usar para construir formularios, desde el input más básico a dropdowns, multi selects, check boxes y radio buttons, así como las normas que debes seguir para aplicarlos de manera correcta. También puedes combinar los form elements con otros elementos y componentes como iconos, botones y badges para crear páginas más complejas.

Form inputs y Text areas

Son los elementos básicos de formulario. Siempre deben contener como mínimo un título y un campo de texto. También puedes usar hints debajo del campo de texto según sea necesario.

Los text areas definen campos de texto multilínea, por lo que debes usarlos cuando quieras que el usuario escriba una cantidad mayor de texto que con los form inputs. Tienen un controlador para redimensionarlos y también puedes usar hints.

Form inputs.
Text area.

Dropdowns y Multi selects

Puedes usar los dropdowns cuando quieras que el usuario seleccione una opción de entre una lista predefinida. Al hacer click sobre el input se desplegará una caja con todas las opciones disponibles.

Usa los Multi select cuando necesites que el usuario elija más de una opción en el mismo campo. Los elemetos que selecciones se mostrarán dentro del input separados por comas hasta un máximo de tres elementos, entonces se sustituirán por un copy genérico tipo: "4 elementos seleccionados" también se mostrarán las selecciones como un badge dentro de un input alternativo que permite la opción de eliminarlos de la selección.

En ambos casos la altura máxima del desplegable incluido el buscador jamás superará los 160px.

Dropdown.
Multi select.

Inputs segmentados

Los inputs segmentados sirven para mostrar información que es susceptible de ser agrupada. Algunos casos en los que puedes usarlos son cuando haya que introducir fechas, números de tarjeta de crédito y similares. A diferencia de los form inputs, el contenido de los inputs segmentados debe ir centrado.

Imputs segmentados.

Check boxes y radio buttons

Aplica diferentes estilos a los check boxes y radio buttons en función al fondo donde los vayas a aplicar, que puede ser blanco, neutro o azul.

Check box.
Radio button.

Input width

Como norma general recuerda que debes ajustar el ancho de los inputs al de las columnas del grid layout que decidas usar para estructurar tu página.

  • Ancho de la columna
  • 20dp
Input width.

Input height

Los inputs pueden tener 3 alturas, que encajan con las alturas definidas para los botones. La altura del input por defecto es de 40dp, pero también puedes usar small inputs, que niden 30dp de altura, y large inputs, que miden 50dp de altura.

Input heights.
Inputs with button example.