Formularios
Entrada de texto de una sola línea o de varias.
<vadavo-textfield> genera su propio input (o textarea con el atributo multiline) dentro de su shadow root y participa en FormData como un campo nativo. Acepta type, placeholder, disabled, required y name.
El atributo label pone la etiqueta encima del control, y el propio campo la asocia a él. error lleva el mensaje del problema: aparece debajo, y es su presencia lo que pone el campo en rojo.
<vadavo-textfield label="Nombre de dominio" placeholder="example.com"></vadavo-textfield><vadavo-textfield label="Nombre de dominio" value="vadavo.com" error="Ese dominio ya está registrado."></vadavo-textfield>multiline genera un textarea en vez de un input.
<vadavo-textfield label="Notas" multiline placeholder="El cliente pagará con tarjeta."></vadavo-textfield>El hueco icon añade un icono inicial que cambia de color al enfocar el campo; el hueco affix añade un afijo final de solo lectura, como una moneda o una unidad.
<vadavo-textfield label="Buscar dominio" placeholder="example.com">
<vadavo-icon slot="icon" name="search"></vadavo-icon>
</vadavo-textfield>
<vadavo-textfield label="Precio" type="number" value="24">
<span slot="affix">€ / mes</span>
</vadavo-textfield>| Token | Qué es |
|---|---|
--textfield--height--box | El alto del campo. |
--textfield--padding--box | El relleno interior (padding) del campo. |
--textfield--background--box | El color de fondo del campo. |
--textfield--radius--box | El radio de borde del campo. |
--textfield--border--rest | El color del borde del campo en reposo. |
--textfield--border--hover | El color del borde del campo al apuntarlo. |
--textfield--border--focus | El color del borde del campo cuando tiene el foco. |
--textfield--color--text | El color del texto escrito en el campo. |
--textfield--color--placeholder | El color del texto de marcador (placeholder) del campo. |
--textfield--padding--affix | El espacio que el campo reserva a la derecha para el contenido del hueco affix. |
--textfield--color--icon | El color del icono del hueco icon en reposo. |
--textfield--color--focus-icon | El color del icono del hueco icon cuando el campo tiene el foco. |