Text Input

A floating text input is a modern UI pattern where the label starts inside the input field and moves up when the user types. This enhances readability and user experience.


Floating Text Input

<div class="floating-form-group">
    <div class="floating-form position--relative">
        <input type="text" placeholder="Floating Input" class="form--text--input" aria-label="Floating Input">
        <label class="floating--label position--absolute" aria-label="Floating Label">Floating Label</label>
    </div>
</div>

Disabled Floating Text Input

<div class="floating-form-group">
    <div class="floating-form position--relative">
        <input type="text" placeholder="Disabled Floating Input" class="form--text--input form--text--input--disabled"
            aria-label="Disabled Floating Input" disabled>
        <label class="floating--label position--absolute" aria-label="Floating Label">Floating Label</label>
    </div>
</div>

Floating Text Input With Icon

<div class="floating-form-group">
    <div class="floating-form position--relative with-icon">
        <input type="text" placeholder="Floating Input" class="form--text--input" aria-label="Floating Input">
        <label class="floating--label position--absolute" aria-label="Floating Label">Floating Label</label>
        <span class="blueprint-icon icon-locked input-icon icon-2x"></span>
    </div>
</div>

Disabled Floating Text Input With Icon

<div class="floating-form-group">
    <div class="floating-form position--relative with-icon">
        <input type="password" placeholder="********" class="form--text--input form--text--input--disabled"
            aria-label="PasswordTextInput" disabled>
        <label class="floating--label position--absolute" aria-label="Floating Label">Floating Label</label>
        <span class="blueprint-icon icon-locked input-icon icon-2x disabled"></span>
    </div>
</div>

Floating Text Input Validation

Required 
<div class="floating-form-group">
    <div class="floating-form position--relative form--text--input__invalid">
        <input type="password" placeholder="Enter Password" class="form--text--input" aria-label="PasswordTextInput">
        <label class="floating--label position--absolute" aria-label="Password">Password</label>
    </div>
    <span class="form--text--input__required"><span class="blueprint-icon icon-warning error-icon"></span>Required</span>
</div>

Floating Text Input With Icon Validation

Required 
<div class="floating-form-group">
    <div class="floating-form position--relative form--text--input__invalid">
        <input type="password" placeholder="Enter Password" class="form--text--input" aria-label="PasswordTextInput">
        <label class="floating--label position--absolute" aria-label="Password">Password
        </label>
    </div>
    <span class="form--text--input__required"><span class="blueprint-icon icon-warning error-icon"></span>Required</span>
</div>