Input

Input de texto

Campo con label, ayuda, validación (CVA + Validator) y tamaños sm / md / lg. Cambia los controles y mira cómo se actualizan el preview y el código.

Tamaño

Tipo

Ancho

Angular

Vue

<flt-input
  [(value)]="value"
  label="Email"
  placeholder="tú@correo.com"
  size="md"
  type="text"
 />

<FltInput
  v-model="value"
  label="Email"
  placeholder="tú@correo.com"
  size="md"
  type="text"
 />

Validación

El núcleo de validación es compartido entre Angular y Vue: required, patrón de email y mensajes personalizados. Deja el segundo campo vacío y sal de él para ver el error.

Angular

Vue

Email (válido)

Tu correo de acceso

Email (requerido)

Déjalo vacío y sal del campo para ver el error

<flt-input
  label="Email (válido)"
  helpText="Tu correo de acceso"
  [required]="true"
  [rules]="{ pattern: emailPattern }"
  [(value)]="email"
/>

<FltInput
  v-model="email"
  label="Email (válido)"
  help-text="Tu correo de acceso"
  :required="true"
  :rules="{ pattern: emailPattern }"
/>