<!-- Text Input -->
<div class="mb-3">
    <label for="textInput" class="form-label">Text Input</label>
    <input type="text" class="form-control" id="textInput" placeholder="Enter text here">
    <div class="form-text">This is a basic text input field.</div>
</div>

<!-- Email Input -->
<div class="mb-3">
    <label for="emailInput" class="form-label">Email Address</label>
    <input type="email" class="form-control" id="emailInput" placeholder="name@example.com">
    <div class="form-text">We'll never share your email with anyone else.</div>
</div>

<!-- Password Input with Toggle -->
<div class="mb-3">
    <label for="passwordInput" class="form-label">Password</label>
    <div class="input-group">
        <input type="password" class="form-control" id="passwordInput" placeholder="Enter password">
        <button class="btn btn-outline-secondary" type="button" id="togglePassword">
            <i class="material-symbols-rounded">visibility</i>
        </button>
    </div>
</div>

<!-- Select Dropdown -->
<div class="mb-3">
    <label for="selectInput" class="form-label">Select Dropdown</label>
    <select class="form-select" id="selectInput">
        <option selected>Choose an option...</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
    </select>
</div>

<!-- Multiple Select -->
<div class="mb-3">
    <label for="multiSelectInput" class="form-label">Multiple Select</label>
    <select class="form-select" id="multiSelectInput" multiple size="4">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
    </select>
    <div class="form-text">Hold Ctrl/Cmd to select multiple options.</div>
</div>

<!-- File Upload -->
<div class="mb-3">
    <label for="fileInput" class="form-label">File Upload</label>
    <input class="form-control" type="file" id="fileInput" multiple>
    <div class="form-text">You can select multiple files.</div>
</div>

<!-- Input Group with Prepend -->
<div class="mb-3">
    <label for="prependInput" class="form-label">With Prepend</label>
    <div class="input-group">
        <span class="input-group-text">@</span>
        <input type="text" class="form-control" id="prependInput" placeholder="Username">
    </div>
</div>

<!-- Input Group with Append -->
<div class="mb-3">
    <label for="appendInput" class="form-label">With Append</label>
    <div class="input-group">
        <input type="text" class="form-control" id="appendInput" placeholder="Recipient's username">
        <span class="input-group-text">@example.com</span>
    </div>
</div>

<!-- Input Group with Button -->
<div class="mb-3">
    <label for="buttonInput" class="form-label">With Button</label>
    <div class="input-group">
        <input type="text" class="form-control" id="buttonInput" placeholder="Search...">
        <button class="btn btn-outline-secondary" type="button">
            <i class="material-symbols-rounded">search</i>
        </button>
    </div>
</div>

<!-- Floating Label Input -->
<div class="form-floating mb-3">
    <input type="email" class="form-control" id="floatingEmail" placeholder="name@example.com">
    <label for="floatingEmail">Email address</label>
</div>

<!-- Floating Label Textarea -->
<div class="form-floating mb-3">
    <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea" style="height: 100px"></textarea>
    <label for="floatingTextarea">Comments</label>
</div>

<!-- Floating Label Select -->
<div class="form-floating mb-3">
    <select class="form-select" id="floatingSelect">
        <option selected>Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
    </select>
    <label for="floatingSelect">Works with selects</label>
</div>

<!-- Basic Floating Label with Plugin -->
<div class="floating-label mb-3">
    <input type="email" id="email" class="form-control" placeholder="name@example.com">
    <label for="email">Email</label>
</div>

<!-- Textarea with Floating Label -->
<div class="floating-label mb-3">
    <textarea id="message" class="form-control" placeholder="Your message here..." rows="3"></textarea>
    <label for="message">Message</label>
</div>

<!-- Select with Floating Label -->
<div class="floating-label mb-3">
    <select id="select" class="form-select">
        <option value="">Choose an option...</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
    </select>
    <label for="select">Select Option</label>
</div>

<!-- Number Input with Floating Label -->
<div class="floating-label mb-3">
    <input type="number" id="amount" class="form-control" placeholder="Enter amount">
    <label for="amount">Amount</label>
</div>

Plugin Features:

• check_circleEnhanced animations and transitions
• check_circleWorks with all form elements (input, textarea, select)
• check_circleBetter browser compatibility
• check_circleCustomizable styling options
• check_circleAutomatic initialization

Installation:

npm install @tkrotoff/bootstrap-floating-label

SCSS Import:

@import '~@tkrotoff/bootstrap-floating-label/src/bootstrap-floating-label.scss';