Floating labels

Create beautifully simple form labels that float over your input fields.

Create amazing Typeform-like forms and pages just by writing Markdown!

Example #

Wrap a pair of <input class="form-control"> and <label> elements in .form-floating to enable floating labels with our textual form fields. A placeholder is required on each <input> as our method of CSS-only floating labels uses the :placeholder-shown pseudo-element. Also note that the <input> must come first so we can utilize a sibling selector (e.g., ~).

HTML
<div class="form-floating mb-3">
  <input type="email" class="form-control" id="example-input-1" placeholder="name@example.com">
  <label for="example-input-1">Email address</label>
</div>
<div class="form-floating">
  <input type="password" class="form-control" id="example-input-2" placeholder="Password">
  <label for="example-input-2">Password</label>
</div>

When there's a value already defined, <label> elements will automatically adjust to their floated position.

HTML
<div class="form-floating">
  <input type="email" class="form-control" id="example-input-3" placeholder="name@example.com" value="steve@apple.com">
  <label for="example-input-3">Email address</label>
</div>

Form validation styles also work as expected.

HTML
<div class="form-floating">
  <input type="email" class="form-control is-invalid" id="example-input-4" placeholder="name@example.com" value="steve@apple">
  <label for="example-input-4">Email address</label>
</div>

Textareas #

By default, <textarea> elements with .form-control will be the same height as <input> elements. To set a custom height on your <textarea>, do not use the rows attribute. Instead, set an explicit height (either inline or via custom CSS).

HTML
<div class="form-floating mb-3">
  <textarea class="form-control" placeholder="Leave a comment here" id="example-textarea-1"></textarea>
  <label for="example-textarea-1">Comments</label>
</div>
<div class="form-floating">
  <textarea class="form-control" placeholder="Short description" id="example-textarea-2" style="height: 80px;">A short description</textarea>
  <label for="example-textarea-2">Description</label>
</div>

Selects #

Other than .form-control, floating labels are only available on .form-select components. They work in the same way, but unlike <input> tags, they'll always show the <label> in its floated state. Selects with size and multiple are not supported.

HTML
<div class="form-floating">
  <select class="form-select" id="example-select-1" aria-label="Area of specialization">
    <option selected>Select an option</option>
    <option value="frontend">Front-end</option>
    <option value="backend">Back-end</option>
    <option value="fullstack">Full-stack</option>
  </select>
  <label for="example-select-1">Area of specialization</label>
</div>

Disabled #

Add the disabled boolean attribute on an input, a textarea or a select to give it a grayed out appearance, remove pointer events, and prevent focusing.

HTML
<div class="form-floating mb-3">
  <input type="email" class="form-control" id="example-input-5" placeholder="name@example.com" disabled>
  <label for="example-input-5">Email address</label>
</div>
<div class="form-floating mb-3">
  <textarea class="form-control" placeholder="Leave a comment here" id="example-textarea-3" disabled></textarea>
  <label for="example-textarea-3">Comments</label>
</div>
<div class="form-floating">
  <select class="form-select" id="example-select-2" aria-label="Area of specialization" disabled>
    <option selected>Select an option</option>
    <option value="frontend">Front-end</option>
    <option value="backend">Back-end</option>
    <option value="fullstack">Full-stack</option>
  </select>
  <label for="example-select-2">Area of specialization</label>
</div>

Read-only plain text #

Floating labels also support .form-control-plaintext, which can be helpful for toggling from an editable <input> to a plaintext value without affecting the page layout.

HTML
<div class="form-floating">
  <input type="email" readonly class="form-control-plaintext" id="example-input-6" placeholder="name@example.com" value="steve@apple.com">
  <label for="example-input-6">Email address</label>
</div>

Input groups #

Floating labels also support .input-group.

@
HTML
<div class="input-group">
  <span class="input-group-text">@</span>
  <div class="form-floating">
    <input type="text" class="form-control" id="example-input-7" placeholder="Username">
    <label for="example-input-7">Username</label>
  </div>
</div>

When using .input-group and .form-floating along with form validation, the .{valid|invalid}-feedback should be placed outside of the .form-floating, but inside of the .input-group. This means that the feedback will need to be shown using javascript.

@
Please choose a username.
HTML
<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="example-input-8" placeholder="Username" required>
    <label for="example-input-8">Username</label>
  </div>
  <div class="invalid-feedback">
    Please choose a username.
  </div>
</div>

Layout #

When working with the grid system, be sure to place form elements within column classes.

HTML
<div class="row g-3">
  <div class="col-sm">
    <div class="form-floating">
      <input type="email" class="form-control" id="example-input-9" placeholder="name@example.com" value="steve@apple.com">
      <label for="example-input-9">Email address</label>
    </div>
  </div>
  <div class="col-sm">
    <div class="form-floating">
      <select class="form-select" id="example-select-3" aria-label="Area of specialization">
        <option selected>Select an option</option>
        <option value="frontend">Front-end</option>
        <option value="backend">Back-end</option>
        <option value="fullstack">Full-stack</option>
      </select>
      <label for="example-select-3">Area of specialization</label>
    </div>
  </div>
</div>
Up next
Form layout

Help us grow

Our main goal is to make Halfmoon the go-to framework for building websites, dashboards and tools. If you believe in our mission, consider becoming a sponsor and help us grow.

You can email us directly if you have any queries. We are always happy to answer.

Subscribe for updates

We will notify you when the framework gets a substantial update. No spam ever.

Follow us on Twitter so that you can stay updated that way.