FloatingLabel

The FloatingLabel component creates modern form inputs with animated labels that float above the input when focused or filled. Perfect for clean, space-efficient forms with a contemporary aesthetic.

Goal

Master creating floating label inputs, understand Bootstrap form-floating classes, and build modern, elegant forms that provide excellent user experience.

Bootstrap Reference

Bootstrap 5 Floating Labels Documentation

Quick Start

Live Preview

Email address

from faststrap import FloatingLabel

FloatingLabel(
    "email",
    label="Email address",
    input_type="email"
)

Visual Examples & Use Cases

from faststrap import FloatingLabel, Button, Card

Card(
    H3("Sign In", cls="mb-4"),
    FloatingLabel(
        "email",
        label="Email address",
        input_type="email",
        required=True
    ),
    FloatingLabel(
        "password",
        label="Password",
        input_type="password",
        required=True
    ),
    Button("Sign In", variant="primary", cls="w-100 mt-3"),
    cls="p-4 shadow"
)

2. With Values - Pre-filled Inputs

# Label automatically floats when input has value
FloatingLabel(
    "name",
    label="Your Name",
    value="John Doe"  # ← Label floats automatically
)

3. Different Input Types

# Email
FloatingLabel("email", label="Email address", input_type="email")

# Password
FloatingLabel("password", label="Password", input_type="password")

# Number
FloatingLabel("age", label="Age", input_type="number")

# Date
FloatingLabel("birthdate", label="Birth Date", input_type="date")

# Tel
FloatingLabel("phone", label="Phone Number", input_type="tel")

4. Disabled and Readonly States

# Disabled
FloatingLabel(
    "disabled_field",
    label="Disabled Field",
    value="Cannot edit",
    disabled=True
)

# Readonly
FloatingLabel(
    "readonly_field",
    label="Readonly Field",
    value="Can read only",
    readonly=True
)

Bootstrap CSS Classes Explained

Core Classes

Class	Purpose	Applied To
`.form-floating`	Container - Enables floating label effect	Wrapper `<div>`
`.form-control`	Input styling - Standard form control	`<input>` element
`placeholder` attribute	Required - Triggers float animation	`<input>` element

Critical: The placeholder attribute is required for the floating effect to work, even if you don't want visible placeholder text. Set it to the same value as the label.

Core Faststrap Features

Global Defaults

from faststrap import set_component_defaults, FloatingLabel

# All floating labels required by default
set_component_defaults("FloatingLabel", required=True)

FloatingLabel("email", label="Email")  # ← Automatically required

Common Recipes

Complete Registration Form

from faststrap import FloatingLabel, Button, Card

Card(
    H3("Create Account"),
    FloatingLabel("name", label="Full Name", required=True),
    FloatingLabel("email", label="Email", input_type="email", required=True),
    FloatingLabel("password", label="Password", input_type="password", required=True),
    FloatingLabel("confirm", label="Confirm Password", input_type="password", required=True),
    Button("Register", variant="primary", cls="w-100 mt-3"),
    cls="p-4"
)

Parameter Reference

Parameter	Type	Default	Description
`name`	`str`	Required	Input name attribute
`label`	`str`	Required	Label text (floats on focus/fill)
`input_type`	`str`	`"text"`	HTML input type
`value`	`str`	`""`	Initial value
`placeholder`	`str`	Same as label	Placeholder (required for float effect)
`disabled`	`bool`	`False`	Disable input
`readonly`	`bool`	`False`	Make readonly
`required`	`bool`	`False`	Mark as required
`input_id`	`str \\| None`	Auto-generated	Input ID
`input_cls`	`str`	`""`	Additional input classes
`label_cls`	`str`	`""`	Additional label classes
`**kwargs`	`Any`	-	Additional HTML attributes

`faststrap.components.forms.inputgroup.FloatingLabel(name, *, label, input_type='text', value='', placeholder='', disabled=False, readonly=False, required=False, input_id=None, input_cls='', label_cls='', **kwargs)`

Bootstrap FloatingLabel input component.

An input with an animated floating label that moves when focused.

Parameters:

Name	Type	Description	Default
`name`	`str`	Input name attribute	required
`label`	`str`	Label text (required for floating labels)	required
`input_type`	`Literal['text', 'password', 'email', 'number', 'url', 'tel', 'search', 'date', 'time', 'datetime-local']`	HTML input type	`'text'`
`value`	`str`	Initial value	`''`
`placeholder`	`str`	Placeholder text (usually same as label)	`''`
`disabled`	`bool`	Disable the input	`False`
`readonly`	`bool`	Make input read-only	`False`
`required`	`bool`	Mark as required field	`False`
`input_id`	`str \| None`	ID for the input (auto-generated from name if not provided)	`None`
`input_cls`	`str`	Additional classes for input element	`''`
`label_cls`	`str`	Additional classes for label element	`''`
`**kwargs`	`Any`	Additional HTML attributes	`{}`

Returns:

Type	Description
`Div`	FastHTML Div element with form-floating structure

Example

Basic:

FloatingLabel("email", label="Email address", input_type="email")

With value:

FloatingLabel("name", label="Your name", value="John Doe")

Password:

FloatingLabel("password", label="Password", input_type="password", required=True)

See Also

Bootstrap docs: https://getbootstrap.com/docs/5.3/forms/floating-labels/

Source code in src/faststrap/components/forms/inputgroup.py

@register(category="forms")
def FloatingLabel(
    name: str,
    *,
    label: str,
    input_type: Literal[
        "text",
        "password",
        "email",
        "number",
        "url",
        "tel",
        "search",
        "date",
        "time",
        "datetime-local",
    ] = "text",
    value: str = "",
    placeholder: str = "",
    disabled: bool = False,
    readonly: bool = False,
    required: bool = False,
    input_id: str | None = None,
    input_cls: str = "",
    label_cls: str = "",
    **kwargs: Any,
) -> Div:
    """Bootstrap FloatingLabel input component.

    An input with an animated floating label that moves when focused.

    Args:
        name: Input name attribute
        label: Label text (required for floating labels)
        input_type: HTML input type
        value: Initial value
        placeholder: Placeholder text (usually same as label)
        disabled: Disable the input
        readonly: Make input read-only
        required: Mark as required field
        input_id: ID for the input (auto-generated from name if not provided)
        input_cls: Additional classes for input element
        label_cls: Additional classes for label element
        **kwargs: Additional HTML attributes

    Returns:
        FastHTML Div element with form-floating structure

    Example:
        Basic:
        >>> FloatingLabel("email", label="Email address", input_type="email")

        With value:
        >>> FloatingLabel("name", label="Your name", value="John Doe")

        Password:
        >>> FloatingLabel("password", label="Password", input_type="password", required=True)

    See Also:
        Bootstrap docs: https://getbootstrap.com/docs/5.3/forms/floating-labels/
    """
    fl_id = input_id or f"floating-{name}"

    user_cls = kwargs.pop("cls", "")
    wrapper_cls = merge_classes("form-floating", user_cls)

    # Input classes and attributes
    all_input_cls = merge_classes("form-control", input_cls)

    input_attrs: dict[str, Any] = {
        "type": input_type,
        "cls": all_input_cls,
        "name": name,
        "id": fl_id,
        "placeholder": placeholder or label,  # Placeholder required for floating effect
    }

    if value:
        input_attrs["value"] = value
    if disabled:
        input_attrs["disabled"] = True
    if readonly:
        input_attrs["readonly"] = True
    if required:
        input_attrs["required"] = True

    input_attrs.update(convert_attrs(kwargs))

    # Label
    label_cls_final = merge_classes("", label_cls) if label_cls else None

    label_attrs: dict[str, Any] = {"fr": fl_id}
    if label_cls_final:
        label_attrs["cls"] = label_cls_final

    return Div(
        FTInput(**input_attrs),
        Label(label, **label_attrs),
        cls=wrapper_cls,
    )