Input

Input captura texto corto como patente, correo o teléfono. Va dentro de Field, que suma el Label, la ayuda y los errores.

Mantención 10.000 km

Datos de contacto

Te avisamos por WhatsApp cuando el mecánico vaya en camino.

Anatomía

Input es solo el contenedor y el texto. En formularios va siempre dentro de Field, que suma el Label, el texto de ayuda y el mensaje de error, y los conecta para lectores de pantalla.

Ahí llega tu boleta.

  1. Label
  2. Valor
  3. Contenedor
  4. Texto de ayuda

Tamaños

Las alturas calzan con Select y FloatingInput, así un formulario mixto mantiene el mismo ritmo. En mobile cada tamaño crece un poco para facilitar el toque.

smFiltros, búsquedas y tablas densas.
defaultFormularios y la mayoría de los pasos del checkout.
lgHeroes y flujos mobile donde el campo es protagonista.

Estados

VacíoEl placeholder muestra el formato esperado.
Con valorLo que escribió el usuario es lo que más destaca.
DeshabilitadoSin borde y con relleno atenuado mientras no aplica.
Solo lecturaDatos precargados que no se editan en este paso.

Field y Label

Field envuelve un solo control y le pasa el id, aria-invalid y aria-describedby. Funciona igual con Input, Textarea y Select.

Con LabelLa etiqueta va arriba y siempre visible.

Lo usamos para emitir tu boleta.

Con ayudadescription explica para qué pedimos el dato.
Con errorerror reemplaza la ayuda y agrega el ícono.

Textarea

Para textos de más de una línea usa Textarea. Comparte bordes, tamaños y estados con Input.

VacíoParte con la altura de un Input de una línea.
Con valorCrece sola a medida que el usuario escribe.

Uso

Sí
Un Label visible que sigue ahí cuando el usuario ya escribió.
No
Usar el placeholder como etiqueta. Desaparece al escribir.
Sí
Errores que dicen cómo corregir el dato.
No
Errores genéricos que no ayudan a avanzar.

Código

import { Field } from '@carvuk/design-system/components/field';
import { Input } from '@carvuk/design-system/components/input';

<Field label='Patente' error={errors.plate}>
  <Input placeholder='JTRX-12' />
</Field>