K
KoreUI

Float Label

Form

Wrapper de etiqueta flotante con tres variantes. Envuelve cualquier componente de input de kore-ui.

Uso básico

Importante: el input interno debe tener placeholder=" " (un espacio) para detectar correctamente el estado vacío/lleno. No pases la prop label al input interno.

<x-kore::float-label label="Nombre completo">
    <x-kore::input wire:model="name" placeholder=" " />
</x-kore::float-label>
<x-kore::float-label label="Nombre completo">
    <x-kore::input wire:model="name" placeholder=" " />
</x-kore::float-label>

Variante Over

La etiqueta empieza centrada dentro del input como placeholder. Al enfocar o cuando tiene valor, flota arriba sobre el borde superior con un recorte de fondo.

<x-kore::float-label label="Email">
    <x-kore::input wire:model="email" type="email" placeholder=" " />
</x-kore::float-label>
<x-kore::float-label label="Email">
    <x-kore::input wire:model="email" type="email" placeholder=" " />
</x-kore::float-label>

Variante In

La etiqueta empieza dentro del input cerca de la parte superior. Al enfocar, se encoge pero permanece dentro. El input tiene padding superior extra.

<x-kore::float-label label="Usuario" variant="in">
    <x-kore::input wire:model="username" placeholder=" " />
</x-kore::float-label>
<x-kore::float-label label="Usuario" variant="in">
    <x-kore::input wire:model="username" placeholder=" " />
</x-kore::float-label>

Variante On

La etiqueta siempre está sobre el borde superior con un recorte de fondo. Nunca se mueve, solo cambia de color al enfocar.

<x-kore::float-label label="Nombre" variant="on">
    <x-kore::input wire:model="firstName" placeholder=" " />
</x-kore::float-label>
<x-kore::float-label label="Nombre" variant="on">
    <x-kore::input wire:model="firstName" placeholder=" " />
</x-kore::float-label>

Con otros componentes

El wrapper funciona con cualquier componente de formulario que renderice un input o textarea.

<x-kore::float-label label="Contraseña">
    <x-kore::password wire:model="password" placeholder=" " />
</x-kore::float-label>

<x-kore::float-label label="Biografía" variant="in">
    <x-kore::textarea wire:model="bio" placeholder=" " />
</x-kore::float-label>
<x-kore::float-label label="Contraseña">
    <x-kore::password wire:model="password" placeholder=" " />
</x-kore::float-label>

<x-kore::float-label label="Biografía" variant="in">
    <x-kore::textarea wire:model="bio" placeholder=" " />
</x-kore::float-label>

Props

Prop Tipo Default Descripción
label string|null null Texto de la etiqueta flotante
variant string over Variante: over, in, on