Skip to main content Skip to docs navigation
En GitHub

Etiquetas flotantes

Crea etiquetas de formulario hermosamente simples que floten sobre tus campos de entrada.

En esta página

Ejemplo

Envuelve un par de elementos <input class="form-control"> y <label> en .form-floating para habilitar las etiquetas flotantes con los campos de formulario de texto de Bootstrap. Se requiere un placeholder en cada <input> ya que nuestro método de etiquetas flotantes solo utiliza CSS con el pseudoelemento :placeholder-shown. También ten en cuenta que <input> debe ir primero para que podamos utilizar un selector de hermanos (por ejemplo, ~). 

<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
  <label for="floatingInput">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, el <label> se ajustará 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">Input con value</label>
</form>

Los estilos de validación de formularios también funcionan como se espera.

<form class="form-floating">
  <input type="email" class="form-control is-invalid" id="floatingInputInvalid" placeholder="[email protected]" value="[email protected]">
  <label for="floatingInputInvalid">Entrada inválida</label>
</form>

Textareas

Por defecto, <textarea>s con .form-control tendrán la misma altura que <input>s. 

<div class="form-floating">
  <textarea class="form-control" placeholder="Leave a comment here" 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 un height explícita (ya sea en línea o a través de CSS personalizado). 

<div class="form-floating">
  <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 100px"></textarea>
  <label for="floatingTextarea2">Comentarios</label>
</div>

Selects

Aparte de .form-control, las etiquetas flotantes solo están disponibles en .form-selects. Funcionan de la misma manera, pero a diferencia de los <input>s, siempre mostrarán su <label> en su estado flotante. Las selecciones con size y multiple no son compatibles. 

<div class="form-floating">
  <select class="form-select" id="floatingSelect" aria-label="Floating label select example">
    <option selected>Abre este menú</option>
    <option value="1">Uno</option>
    <option value="2">Dos</option>
    <option value="3">Tres</option>
  </select>
  <label for="floatingSelect">Funciona con selects</label>
</div>

Layout

Cuando trabajes con el sistema de cuadrícula de Bootstrap, asegúrate de colocar elementos de formulario dentro de las clases de columna.

<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">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ú</option>
        <option value="1">Uno</option>
        <option value="2">Dos</option>
        <option value="3">Tres</option>
      </select>
      <label for="floatingSelectGrid">Funciona con selects</label>
    </div>
  </div>
</div>

Sass

Variables

$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-opacity:     .65;
$form-floating-label-transform:   scale(.85) translateY(-.5rem) translateX(.15rem);
$form-floating-transition:        opacity .1s ease-in-out, transform .1s ease-in-out;