Floating labels

Wrap inputs, selects, and textareas with floating label capture and Bootstrap-compatible placeholders.

Example

Floating labels require a placeholder on text inputs so Bootstrap can detect the empty state. Capture the input and label inside bs-floating-label.

aspnet 

<bs-floating-label bottom-margin="Default3">
    <bs-input input-type="Email" placeholder-text="name@example.com" />
    <bs-label>Email address</bs-label>
</bs-floating-label>
<bs-floating-label>
    <bs-input input-type="Password" placeholder-text="Password" />
    <bs-label>Password</bs-label>
</bs-floating-label>
<bs-floating-label top-margin="Default3">
    <bs-input value="name@example.com" input-type="Email" placeholder-text="name@example.com" />
    <bs-label>Input with value</bs-label>
</bs-floating-label>
<bs-floating-label top-margin="Default3">
    <bs-input validation-state="Invalid" input-type="Email" placeholder-text="name@example.com" />
    <bs-label>Invalid input</bs-label>
</bs-floating-label>

Form control sizing

Floating labels work with supported form control sizes, though this page still uses raw size classes where typed BCL size attributes are not yet available.

aspnet 

<bs-floating-label bottom-margin="Default3">
    <bs-input size="Small" placeholder-text="Small input" />
    <bs-label>Small input</bs-label>
</bs-floating-label>
<bs-floating-label>
    <bs-input size="Large" placeholder-text="Large input" />
    <bs-label>Large input</bs-label>
</bs-floating-label>

Textareas

Textareas need an explicit height when the default height is not enough for the intended content shape.

aspnet 

<bs-floating-label>
    <bs-textarea style="height: 8rem;" placeholder-text="Comments"></bs-textarea>
    <bs-label>Comments</bs-label>
</bs-floating-label>
<bs-floating-label top-margin="Default3">
    <bs-textarea placeholder-text="Leave a comment here"></bs-textarea>
    <bs-label>Default textarea</bs-label>
</bs-floating-label>

Selects

Floating labels also work with select controls. The label remains associated with the select while the menu keeps native browser behavior.

aspnet 

<bs-floating-label>
    <bs-select>
        <bs-option value="">Open this select menu</bs-option>
        <bs-option value="1">One</bs-option>
        <bs-option value="2">Two</bs-option>
    </bs-select>
    <bs-label>Works with selects</bs-label>
</bs-floating-label>

Disabled

Disabled floating controls keep their label position and disabled control semantics.

aspnet 

<bs-floating-label bottom-margin="Default3">
    <bs-input disabled="true" value="name@example.com" placeholder-text="name@example.com" />
    <bs-label>Disabled input</bs-label>
</bs-floating-label>
<bs-floating-label>
    <bs-select disabled="true">
        <bs-option value="">Open this select menu</bs-option>
        <bs-option value="1">One</bs-option>
    </bs-select>
    <bs-label>Disabled select</bs-label>
</bs-floating-label>
<bs-floating-label top-margin="Default3">
    <bs-textarea disabled="true" placeholder-text="Disabled textarea"></bs-textarea>
    <bs-label>Disabled textarea</bs-label>
</bs-floating-label>

Readonly plaintext

Bootstrap floating labels also work with plaintext controls when the input retains a placeholder.

aspnet 

<bs-floating-label>
    <bs-input plaintext="true" value="name@example.com" placeholder-text="name@example.com" readonly="true" />
    <bs-label>Readonly input</bs-label>
</bs-floating-label>

Input groups

Floating labels can be placed inside input groups, including validation examples, when the input and label remain captured together.

@
aspnet 

<bs-input-group bottom-margin="Default3">
    <bs-input-group-text>@@</bs-input-group-text>
    <bs-floating-label>
        <bs-input placeholder-text="Username" />
        <bs-label>Username</bs-label>
    </bs-floating-label>
</bs-input-group>
<bs-form was-validated="true">
    <bs-floating-label>
        <bs-input input-type="Email" placeholder-text="name@example.com" required="true" />
        <bs-label>Email address</bs-label>
        <bs-validation-message>Use a valid email address.</bs-validation-message>
    </bs-floating-label>
</bs-form>

Layout

Use the grid around floating-label controls when forms need responsive multi-column layout.

aspnet 

<bs-row x-gutter="Default2">
    <bs-div span-md="Six">
        <bs-floating-label>
            <bs-input placeholder-text="City" />
            <bs-label>City</bs-label>
        </bs-floating-label>
    </bs-div>
    <bs-div span-md="Six">
        <bs-floating-label>
            <bs-input placeholder-text="State" />
            <bs-label>State</bs-label>
        </bs-floating-label>
    </bs-div>
</bs-row>