FloatingInput

FloatingInput lleva el label dentro del campo y lo sube al borde al escribir. Es el campo de los pasos del checkout, donde cada línea de alto cuenta.

Paso 2 de 3

Tus datos

Para coordinar la visita del mecánico.

Anatomía

El label vive dentro del campo y sube al borde cuando hay foco o valor. Así el formulario ocupa menos alto sin perder el nombre de cada dato.

Ahí llega tu boleta.

  1. Label flotante
  2. Valor
  3. Contenedor
  4. Hint o error

Comportamiento

Es el campo de los pasos del checkout. Fuera del checkout prefiere Input dentro de Field.

En reposoSin valor, el label hace de placeholder. Haz clic para verlo subir.
FlotandoCon foco o valor, el label sube y corta el borde.

Tamaños

smFormularios densos dentro de sheets.
defaultLos pasos del checkout.
lgFlujos mobile con un solo campo protagonista.

Estados

Lo usamos para emitir tu boleta.

Con hintExplica para qué pedimos el dato.
Con errorAparece al salir del campo y reemplaza al hint.
DeshabilitadoEl campo no aplica por ahora.
Deshabilitado con valorUn dato que ya conocemos y no se edita aquí.

Uso

Sí
Labels de una o dos palabras que caben flotando.
No
Labels largos que se rompen en dos líneas al flotar sobre el borde.
Sí
Un solo estilo de campo en todo el formulario.
No
Mezclar FloatingInput con Input y Label en el mismo paso.

Código

import { FloatingInput } from '@carvuk/design-system/components/floating-input';

<FloatingInput label='Correo' type='email' error={errors.email} />
<FloatingInput label='Teléfono' hint='Para coordinar la visita.' />