Etiquetas flotantes (Floating labels)
Crea etiquetas de formulario hermosas y sencillas que flotan sobre tus campos de entrada.
Ejemplo
Envuelve un par de elementos <input class="form-control"> y <label> en .form-floating para habilitar etiquetas flotantes con los campos de formulario de texto de Bootstrap.
Se requiere un atributo placeholder no vacío en cada <input> ya que nuestra implementación de etiquetas flotantes solo con CSS se basa en el pseudoelemento :placeholder-shown para detectar cuándo la entrada está vacía. El texto del marcador de posición en sí no es visible; solo se muestra la etiqueta <label> a los usuarios.
Ten en cuenta también que la entrada <input> debe ir primero para que podamos utilizar un selector de hermanos (es decir, ~).
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
<label for="floatingInput">Dirección de correo electrónico</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="floatingPassword" placeholder="Contraseña">
<label for="floatingPassword">Contraseña</label>
</div>Cuando ya hay un value definido, las etiquetas <label> se ajustarán automáticamente a su posición flotante.
<form class="form-floating">
<input type="email" class="form-control" id="floatingInputValue" placeholder="[email protected]" value="[email protected]">
<label for="floatingInputValue">Entrada con valor</label>
</form>Los estilos de validación de formularios también funcionan como se esperaba.
<form class="form-floating">
<input type="email" class="form-control is-invalid" id="floatingInputInvalid" placeholder="[email protected]" value="[email protected]">
<label for="floatingInputInvalid">Entrada no válida</label>
</form>Áreas de texto (Textareas)
De forma predeterminada, las áreas de texto <textarea> con .form-control tendrán la misma altura que los elementos <input>.
<div class="form-floating">
<textarea class="form-control" placeholder="Deja un comentario aquí" id="floatingTextarea"></textarea>
<label for="floatingTextarea">Comentarios</label>
</div>Para establecer una altura personalizada en tu <textarea>, no uses el atributo rows. En su lugar, establece una height explícita (ya sea en línea o mediante CSS personalizado).
<div class="form-floating">
<textarea class="form-control" placeholder="Deja un comentario aquí" id="floatingTextarea2" style="height: 100px"></textarea>
<label for="floatingTextarea2">Comentarios</label>
</div>Elementos de selección (Selects)
Aparte de .form-control, las etiquetas flotantes solo están disponibles en .form-select. Funcionan de la misma manera, pero a diferencia de los elementos <input>, siempre mostrarán la etiqueta <label> en su estado flotante. No se admiten elementos de selección con size y multiple.
<div class="form-floating">
<select class="form-select" id="floatingSelect" aria-label="Floating label select example">
<option selected>Abre este menú de selección</option>
<option value="1">Uno</option>
<option value="2">Dos</option>
<option value="3">Tres</option>
</select>
<label for="floatingSelect">Funciona con selectores (selects)</label>
</div>Deshabilitado
Agrega el atributo booleano disabled en una entrada, un área de texto o una selección para darle una apariencia atenuada, eliminar eventos del puntero y evitar el enfoque.
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInputDisabled" placeholder="[email protected]" disabled>
<label for="floatingInputDisabled">Dirección de correo electrónico</label>
</div>
<div class="form-floating mb-3">
<textarea class="form-control" placeholder="Deja un comentario aquí" id="floatingTextareaDisabled" disabled></textarea>
<label for="floatingTextareaDisabled">Comentarios</label>
</div>
<div class="form-floating mb-3">
<textarea class="form-control" placeholder="Deja un comentario aquí" id="floatingTextarea2Disabled" style="height: 100px" disabled>Área de texto deshabilitada con algo de texto adentro</textarea>
<label for="floatingTextarea2Disabled">Comentarios</label>
</div>
<div class="form-floating">
<select class="form-select" id="floatingSelectDisabled" aria-label="Floating label disabled select example" disabled>
<option selected>Abre este menú de selección</option>
<option value="1">Uno</option>
<option value="2">Dos</option>
<option value="3">Tres</option>
</select>
<label for="floatingSelectDisabled">Funciona con selectores (selects)</label>
</div>Texto sin formato de solo lectura (Readonly plaintext)
Las etiquetas flotantes también admiten .form-control-plaintext, lo que puede resultar útil para pasar de una entrada <input> editable a un valor de texto sin formato sin afectar el diseño de la página.
<div class="form-floating mb-3">
<input type="email" readonly class="form-control-plaintext" id="floatingEmptyPlaintextInput" placeholder="[email protected]">
<label for="floatingEmptyPlaintextInput">Entrada vacía</label>
</div>
<div class="form-floating mb-3">
<input type="email" readonly class="form-control-plaintext" id="floatingPlaintextInput" placeholder="[email protected]" value="[email protected]">
<label for="floatingPlaintextInput">Entrada con valor</label>
</div>Grupos de entrada (Input groups)
Las etiquetas flotantes también admiten .input-group.
<div class="input-group mb-3">
<span class="input-group-text">@</span>
<div class="form-floating">
<input type="text" class="form-control" id="floatingInputGroup1" placeholder="Username">
<label for="floatingInputGroup1">Nombre de usuario</label>
</div>
</div>Al usar .input-group y .form-floating junto con la validación del formulario, el mensaje -feedback debe colocarse fuera de .form-floating, pero dentro de .input-group. Esto significa que la respuesta de error o éxito deberá mostrarse usando javascript.
<div class="input-group has-validation">
<span class="input-group-text">@</span>
<div class="form-floating is-invalid">
<input type="text" class="form-control is-invalid" id="floatingInputGroup2" placeholder="Username" required>
<label for="floatingInputGroup2">Nombre de usuario</label>
</div>
<div class="invalid-feedback">
Por favor elige un nombre de usuario.
</div>
</div>Diseño (Layout)
Cuando trabajes con the Bootstrap grid system, be sure to place form elements within column classes.
<div class="row g-2">
<div class="col-md">
<div class="form-floating">
<input type="email" class="form-control" id="floatingInputGrid" placeholder="[email protected]" value="[email protected]">
<label for="floatingInputGrid">Dirección de correo electrónico</label>
</div>
</div>
<div class="col-md">
<div class="form-floating">
<select class="form-select" id="floatingSelectGrid">
<option selected>Abre este menú de selección</option>
<option value="1">Uno</option>
<option value="2">Dos</option>
<option value="3">Tres</option>
</select>
<label for="floatingSelectGrid">Funciona con selectores (selects)</label>
</div>
</div>
</div>CSS
Variables Sass
$form-floating-height: add(3.5rem, $input-height-border);
$form-floating-line-height: 1.25;
$form-floating-padding-x: $input-padding-x;
$form-floating-padding-y: 1rem;
$form-floating-input-padding-t: 1.625rem;
$form-floating-input-padding-b: .625rem;
$form-floating-label-height: 1.5em;
$form-floating-label-opacity: .65;
$form-floating-label-transform: scale(.85) translateY(-.5rem) translateX(.15rem);
$form-floating-label-disabled-color: $gray-600;
$form-floating-transition: opacity .1s ease-in-out, transform .1s ease-in-out;