Skip to content

FloatingLabelInput shows placeholder when it should not #1787

@j4mb0ti

Description

@j4mb0ti

Describe the bug

When trying to update to the latest version, I noticed that FloatingLabelInput does no longer render correctly. I have set up a fresh svelte kit app and followed the instructions to install flowbite-svelte, but the issue persists.

Looks like the label is rendered over the actual field when it is not selected. When selecting, the label moves correctly to the top.

Image

Reproduction

minimal +page.svelte

<script lang="ts">
    import { FloatingLabelInput } from 'flowbite-svelte';
</script>

<FloatingLabelInput type="text" 
                    id="test"
                    placeholder="Testing input">
    InputLabel
</FloatingLabelInput>

Version and System Info

System:
    OS: macOS 15.7.1
    CPU: (12) arm64 Apple M2 Pro
    Memory: 535.38 MB / 32.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 24.9.0 - /opt/homebrew/bin/node
    Yarn: 1.22.22 - /usr/local/bin/yarn
    npm: 11.6.0 - /opt/homebrew/bin/npm
    pnpm: 10.1.0 - /usr/local/bin/pnpm
  Browsers:
    Chrome: 141.0.7390.66
    Firefox: 143.0.4
    Safari: 26.0.1
  npmPackages:
    @sveltejs/kit: ^2.43.2 => 2.46.4 
    flowbite-svelte: ^1.17.4 => 1.17.4 
    svelte: ^5.39.5 => 5.39.11 
    vite: ^7.1.7 => 7.1.9

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions