<!DOCTYPE html>
<!--
* CoreUI - Free Bootstrap Admin Template
* @version v5.2.0
* @link https://coreui.io/product/free-bootstrap-admin-template/
* Copyright (c) 2025 creativeLabs Łukasz Holeczek
* Licensed under MIT (https://github.com/coreui/coreui-free-bootstrap-admin-template/blob/main/LICENSE)
-->
<html lang="en">
<head>
<base href="./../">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta name="description" content="CoreUI - Open Source Bootstrap Admin Template">
<meta name="author" content="Łukasz Holeczek">
<meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,jQuery,CSS,HTML,RWD,Dashboard">
<title>CoreUI Free Bootstrap Admin Template</title>
<link rel="apple-touch-icon" sizes="57x57" href="assets/favicon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="assets/favicon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="assets/favicon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="assets/favicon/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="assets/favicon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="assets/favicon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="assets/favicon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="assets/favicon/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="assets/favicon/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="assets/favicon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicon/favicon-16x16.png">
<link rel="manifest" href="assets/favicon/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="assets/favicon/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<!-- Vendors styles-->
<link rel="stylesheet" href="node_modules/simplebar/dist/simplebar.css">
<link rel="stylesheet" href="css/vendors/simplebar.css">
<!-- Main styles for this application-->
<link href="css/style.css" rel="stylesheet">
<!-- We use those styles to show code examples, you should remove them in your application.-->
<link href="css/examples.css" rel="stylesheet">
<script src="js/config.js"></script>
<script src="js/color-modes.js"></script>
<link rel="canonical" href="https://coreui.io/docs/forms/floating-labels/">
</head>
<body>
<div class="sidebar sidebar-dark sidebar-fixed border-end" id="sidebar">
<div class="sidebar-header border-bottom">
<div class="sidebar-brand">
<svg class="sidebar-brand-full" width="88" height="32" alt="CoreUI Logo">
<use xlink:href="assets/brand/coreui.svg#full"></use>
</svg>
<svg class="sidebar-brand-narrow" width="32" height="32" alt="CoreUI Logo">
<use xlink:href="assets/brand/coreui.svg#signet"></use>
</svg>
</div>
<button class="btn-close d-lg-none" type="button" data-coreui-theme="dark" aria-label="Close" onclick="coreui.Sidebar.getInstance(document.querySelector("#sidebar")).toggle()"></button>
</div>
<ul class="sidebar-nav" data-coreui="navigation" data-simplebar>
<li class="nav-item"><a class="nav-link" href="index.html">
<svg class="nav-icon">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-speedometer"></use>
</svg> Dashboard<span class="badge badge-sm bg-info ms-auto">NEW</span></a></li>
<li class="nav-title">Theme</li>
<li class="nav-item"><a class="nav-link" href="colors.html">
<svg class="nav-icon">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-drop"></use>
</svg> Colors</a></li>
<li class="nav-item"><a class="nav-link" href="typography.html">
<svg class="nav-icon">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-pencil"></use>
</svg> Typography</a></li>
<li class="nav-title">Components</li>
<li class="nav-group"><a class="nav-link nav-group-toggle" href="#">
<svg class="nav-icon">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-puzzle"></use>
</svg> Base</a>
<ul class="nav-group-items compact">
<li class="nav-item"><a class="nav-link" href="base/accordion.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Accordion</a></li>
<li class="nav-item"><a class="nav-link" href="base/breadcrumb.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Breadcrumb</a></li>
<li class="nav-item"><a class="nav-link" href="https://coreui.io/bootstrap/docs/components/calendar/" target="_blank"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Calendar
<svg class="icon icon-sm ms-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-external-link"></use>
</svg><span class="badge badge-sm bg-danger ms-auto">PRO</span></a></li>
<li class="nav-item"><a class="nav-link" href="base/cards.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Cards</a></li>
<li class="nav-item"><a class="nav-link" href="base/carousel.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Carousel</a></li>
<li class="nav-item"><a class="nav-link" href="base/collapse.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Collapse</a></li>
<li class="nav-item"><a class="nav-link" href="base/list-group.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> List group</a></li>
<li class="nav-item"><a class="nav-link" href="base/navs-tabs.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Navs & Tabs</a></li>
<li class="nav-item"><a class="nav-link" href="base/pagination.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Pagination</a></li>
<li class="nav-item"><a class="nav-link" href="base/placeholders.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Placeholders</a></li>
<li class="nav-item"><a class="nav-link" href="base/popovers.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Popovers</a></li>
<li class="nav-item"><a class="nav-link" href="base/progress.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Progress</a></li>
<li class="nav-item"><a class="nav-link" href="base/spinners.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Spinners</a></li>
<li class="nav-item"><a class="nav-link" href="base/tables.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Tables</a></li>
<li class="nav-item"><a class="nav-link" href="base/tooltips.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Tooltips</a></li>
</ul>
</li>
<li class="nav-group"><a class="nav-link nav-group-toggle" href="#">
<svg class="nav-icon">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-cursor"></use>
</svg> Buttons</a>
<ul class="nav-group-items compact">
<li class="nav-item"><a class="nav-link" href="buttons/buttons.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Buttons</a></li>
<li class="nav-item"><a class="nav-link" href="buttons/button-group.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Buttons Group</a></li>
<li class="nav-item"><a class="nav-link" href="buttons/dropdowns.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Dropdowns</a></li>
<li class="nav-item"><a class="nav-link" href="https://coreui.io/bootstrap/docs/components/loading-buttons/" target="_blank"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Loading Buttons
<svg class="icon icon-sm ms-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-external-link"></use>
</svg><span class="badge badge-sm bg-danger ms-auto">PRO</span></a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="charts.html">
<svg class="nav-icon">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-chart-pie"></use>
</svg> Charts</a></li>
<li class="nav-group"><a class="nav-link nav-group-toggle" href="#">
<svg class="nav-icon">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-notes"></use>
</svg> Forms</a>
<ul class="nav-group-items compact">
<li class="nav-item"><a class="nav-link" href="forms/form-control.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Form Control</a></li>
<li class="nav-item"><a class="nav-link" href="forms/select.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Select</a></li>
<li class="nav-item"><a class="nav-link" href="https://coreui.io/bootstrap/docs/forms/multi-select/" target="_blank"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Multi Select
<svg class="icon icon-sm ms-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-external-link"></use>
</svg><span class="badge badge-sm bg-danger ms-auto">PRO</span></a></li>
<li class="nav-item"><a class="nav-link" href="forms/checks-radios.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Checks and radios</a></li>
<li class="nav-item"><a class="nav-link" href="forms/range.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Range</a></li>
<li class="nav-item"><a class="nav-link" href="https://coreui.io/bootstrap/docs/forms/range-slider/" target="_blank"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Range Slider
<svg class="icon icon-sm ms-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-external-link"></use>
</svg><span class="badge badge-sm bg-danger ms-auto">PRO</span></a></li>
<li class="nav-item"><a class="nav-link" href="forms/input-group.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Input group</a></li>
<li class="nav-item"><a class="nav-link" href="forms/floating-labels.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Floating labels</a></li>
<li class="nav-item"><a class="nav-link" href="https://coreui.io/bootstrap/docs/forms/date-picker/" target="_blank"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Date Picker
<svg class="icon icon-sm ms-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-external-link"></use>
</svg><span class="badge badge-sm bg-danger ms-auto">PRO</span></a></li>
<li class="nav-item"><a class="nav-link" href="https://coreui.io/bootstrap/docs/forms/date-range-picker/" target="_blank"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Date Range Picker<span class="badge badge-sm bg-danger ms-auto">PRO</span></a></li>
<li class="nav-item"><a class="nav-link" href="https://coreui.io/bootstrap/docs/forms/rating/" target="_blank"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Rating
<svg class="icon icon-sm ms-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-external-link"></use>
</svg><span class="badge badge-sm bg-danger ms-auto">PRO</span></a></li>
<li class="nav-item"><a class="nav-link" href="https://coreui.io/bootstrap/docs/forms/time-picker/" target="_blank"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Time Picker
<svg class="icon icon-sm ms-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-external-link"></use>
</svg><span class="badge badge-sm bg-danger ms-auto">PRO</span></a></li>
<li class="nav-item"><a class="nav-link" href="forms/layout.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Layout</a></li>
<li class="nav-item"><a class="nav-link" href="forms/validation.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Validation</a></li>
</ul>
</li>
<li class="nav-group"><a class="nav-link nav-group-toggle" href="#">
<svg class="nav-icon">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-star"></use>
</svg> Icons</a>
<ul class="nav-group-items compact">
<li class="nav-item"><a class="nav-link" href="icons/coreui-icons-free.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> CoreUI Icons<span class="badge badge-sm bg-success ms-auto">Free</span></a></li>
<li class="nav-item"><a class="nav-link" href="icons/coreui-icons-brand.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> CoreUI Icons - Brand</a></li>
<li class="nav-item"><a class="nav-link" href="icons/coreui-icons-flag.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> CoreUI Icons - Flag</a></li>
</ul>
</li>
<li class="nav-group"><a class="nav-link nav-group-toggle" href="#">
<svg class="nav-icon">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-bell"></use>
</svg> Notifications</a>
<ul class="nav-group-items compact">
<li class="nav-item"><a class="nav-link" href="notifications/alerts.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Alerts</a></li>
<li class="nav-item"><a class="nav-link" href="notifications/badge.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Badge</a></li>
<li class="nav-item"><a class="nav-link" href="notifications/modals.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Modals</a></li>
<li class="nav-item"><a class="nav-link" href="notifications/toasts.html"><span class="nav-icon"><span class="nav-icon-bullet"></span></span> Toasts</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="widgets.html">
<svg class="nav-icon">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-calculator"></use>
</svg> Widgets<span class="badge badge-sm bg-info ms-auto">NEW</span></a></li>
<li class="nav-divider"></li>
<li class="nav-title">Extras</li>
<li class="nav-group"><a class="nav-link nav-group-toggle" href="#">
<svg class="nav-icon">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-star"></use>
</svg> Pages</a>
<ul class="nav-group-items compact">
<li class="nav-item"><a class="nav-link" href="login.html" target="_top">
<svg class="nav-icon">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-account-logout"></use>
</svg> Login</a></li>
<li class="nav-item"><a class="nav-link" href="register.html" target="_top">
<svg class="nav-icon">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-account-logout"></use>
</svg> Register</a></li>
<li class="nav-item"><a class="nav-link" href="404.html" target="_top">
<svg class="nav-icon">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-bug"></use>
</svg> Error 404</a></li>
<li class="nav-item"><a class="nav-link" href="500.html" target="_top">
<svg class="nav-icon">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-bug"></use>
</svg> Error 500</a></li>
</ul>
</li>
<li class="nav-item mt-auto"><a class="nav-link" href="https://coreui.io/docs/templates/installation/" target="_blank">
<svg class="nav-icon">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-description"></use>
</svg> Docs</a></li>
<li class="nav-item"><a class="nav-link text-primary fw-semibold" href="https://coreui.io/product/bootstrap-dashboard-template/" target="_top">
<svg class="nav-icon text-primary">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-layers"></use>
</svg> Try CoreUI PRO</a></li>
</ul>
<div class="sidebar-footer border-top d-none d-md-flex">
<button class="sidebar-toggler" type="button" data-coreui-toggle="unfoldable"></button>
</div>
</div>
<div class="wrapper d-flex flex-column min-vh-100">
<header class="header header-sticky p-0 mb-4">
<div class="container-fluid border-bottom px-4">
<button class="header-toggler" type="button" onclick="coreui.Sidebar.getInstance(document.querySelector('#sidebar')).toggle()" style="margin-inline-start: -14px;">
<svg class="icon icon-lg">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-menu"></use>
</svg>
</button>
<ul class="header-nav d-none d-lg-flex">
<li class="nav-item"><a class="nav-link" href="#">Dashboard</a></li>
<li class="nav-item"><a class="nav-link" href="#">Users</a></li>
<li class="nav-item"><a class="nav-link" href="#">Settings</a></li>
</ul>
<ul class="header-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#">
<svg class="icon icon-lg">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-bell"></use>
</svg></a></li>
<li class="nav-item"><a class="nav-link" href="#">
<svg class="icon icon-lg">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-list-rich"></use>
</svg></a></li>
<li class="nav-item"><a class="nav-link" href="#">
<svg class="icon icon-lg">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-envelope-open"></use>
</svg></a></li>
</ul>
<ul class="header-nav">
<li class="nav-item py-1">
<div class="vr h-100 mx-2 text-body text-opacity-75"></div>
</li>
<li class="nav-item dropdown">
<button class="btn btn-link nav-link py-2 px-2 d-flex align-items-center" type="button" aria-expanded="false" data-coreui-toggle="dropdown">
<svg class="icon icon-lg theme-icon-active">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-contrast"></use>
</svg>
</button>
<ul class="dropdown-menu dropdown-menu-end" style="--cui-dropdown-min-width: 8rem;">
<li>
<button class="dropdown-item d-flex align-items-center" type="button" data-coreui-theme-value="light">
<svg class="icon icon-lg me-3">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-sun"></use>
</svg>Light
</button>
</li>
<li>
<button class="dropdown-item d-flex align-items-center" type="button" data-coreui-theme-value="dark">
<svg class="icon icon-lg me-3">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-moon"></use>
</svg>Dark
</button>
</li>
<li>
<button class="dropdown-item d-flex align-items-center active" type="button" data-coreui-theme-value="auto">
<svg class="icon icon-lg me-3">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-contrast"></use>
</svg>Auto
</button>
</li>
</ul>
</li>
<li class="nav-item py-1">
<div class="vr h-100 mx-2 text-body text-opacity-75"></div>
</li>
<li class="nav-item dropdown"><a class="nav-link py-0 pe-0" data-coreui-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
<div class="avatar avatar-md"><img class="avatar-img" src="assets/img/avatars/8.jpg" alt="user@email.com"></div></a>
<div class="dropdown-menu dropdown-menu-end pt-0">
<div class="dropdown-header bg-body-tertiary text-body-secondary fw-semibold rounded-top mb-2">Account</div><a class="dropdown-item" href="#">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-bell"></use>
</svg> Updates<span class="badge badge-sm bg-info ms-2">42</span></a><a class="dropdown-item" href="#">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-envelope-open"></use>
</svg> Messages<span class="badge badge-sm bg-success ms-2">42</span></a><a class="dropdown-item" href="#">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-task"></use>
</svg> Tasks<span class="badge badge-sm bg-danger ms-2">42</span></a><a class="dropdown-item" href="#">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-comment-square"></use>
</svg> Comments<span class="badge badge-sm bg-warning ms-2">42</span></a>
<div class="dropdown-header bg-body-tertiary text-body-secondary fw-semibold my-2">
<div class="fw-semibold">Settings</div>
</div><a class="dropdown-item" href="#">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-user"></use>
</svg> Profile</a><a class="dropdown-item" href="#">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-settings"></use>
</svg> Settings</a><a class="dropdown-item" href="#">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-credit-card"></use>
</svg> Payments<span class="badge badge-sm bg-secondary ms-2">42</span></a><a class="dropdown-item" href="#">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-file"></use>
</svg> Projects<span class="badge badge-sm bg-primary ms-2">42</span></a>
<div class="dropdown-divider"></div><a class="dropdown-item" href="#">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-lock-locked"></use>
</svg> Lock Account</a><a class="dropdown-item" href="#">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-account-logout"></use>
</svg> Logout</a>
</div>
</li>
</ul>
</div>
<div class="container-fluid px-4">
<nav aria-label="breadcrumb">
<ol class="breadcrumb my-0">
<li class="breadcrumb-item"><a href="#">Home</a>
</li>
<li class="breadcrumb-item"><span>Components</span>
</li>
<li class="breadcrumb-item"><span>Forms</span>
</li>
<li class="breadcrumb-item active"><span>Floating labels</span>
</li>
</ol>
</nav>
</div>
</header>
<div class="body flex-grow-1">
<div class="container-lg px-4">
<div class="bg-primary bg-opacity-10 border border-2 border-primary rounded mb-4">
<div class="row d-flex align-items-center p-3 px-xl-4 flex-xl-nowrap">
<div class="col-xl-auto col-12 d-none d-xl-block p-0"><img class="img-fluid" src="assets/img/components.webp" width="160px" height="160px" alt="CoreUI PRO hexagon"></div>
<div class="col-md col-12 px-lg-4">
Our Admin Panel isn’t just a mix of third-party components. It’s <strong>the only open-source Bootstrap dashboard built on a professional, enterprise-grade UI Components Library</strong>.
This component is part of this library, and we present only the basic usage of it here. To explore extended examples, detailed API documentation, and customization options, refer to our docs.
</div>
<div class="col-md-auto col-12 mt-3 mt-lg-0"><a class="btn btn-primary text-nowrap text-white" href="https://coreui.io/docs/forms/floating-labels/" target="_blank" rel="noopener noreferrer">Explore Documentation</a></div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card mb-4">
<div class="card-header"><strong>Floating labels</strong><span class="small ms-1">Basic example</span></div>
<div class="card-body">
<p class="text-body-secondary small">Wrap a pair of <code><input class="form-control"></code> and <code><label></code> elements in <code>.form-floating</code> to enable floating labels with Bootstrap’s textual form fields. A <code>placeholder</code> is required on each <code><input></code> as our method of CSS-only floating labels uses the <code>:placeholder-shown</code> pseudo-element. Also note that the <code><input></code> must come first so we can utilize a sibling selector (e.g., <code>~</code>).</p>
<div class="example">
<ul class="nav nav-underline-border" role="tablist">
<li class="nav-item"><a class="nav-link active" data-coreui-toggle="tab" href="#preview-1000" role="tab">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-media-play"></use>
</svg>Preview</a></li>
<li class="nav-item"><a class="nav-link" href="https://coreui.io/docs/forms/floating-labels/#example" target="_blank">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-code"></use>
</svg>Code</a></li>
</ul>
<div class="tab-content rounded-bottom">
<div class="tab-pane p-3 active preview" role="tabpanel" id="preview-1000">
<div class="form-floating mb-3">
<input class="form-control" id="floatingInput" type="email" placeholder="name@example.com">
<label for="floatingInput">Email address</label>
</div>
<div class="form-floating">
<input class="form-control" id="floatingPassword" type="password" placeholder="Password">
<label for="floatingPassword">Password</label>
</div>
</div>
</div>
</div>
<p class="text-body-secondary small">When there’s a <code>value</code> already defined, <code><label></code>s will automatically adjust to their floated position.</p>
<div class="example">
<ul class="nav nav-underline-border" role="tablist">
<li class="nav-item"><a class="nav-link active" data-coreui-toggle="tab" href="#preview-1001" role="tab">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-media-play"></use>
</svg>Preview</a></li>
<li class="nav-item"><a class="nav-link" href="https://coreui.io/docs/forms/floating-labels/#example" target="_blank">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-code"></use>
</svg>Code</a></li>
</ul>
<div class="tab-content rounded-bottom">
<div class="tab-pane p-3 active preview" role="tabpanel" id="preview-1001">
<form class="form-floating">
<input class="form-control" id="floatingInputValue" type="email" placeholder="name@example.com" value="test@example.com">
<label for="floatingInputValue">Input with value</label>
</form>
</div>
</div>
</div>
<p class="text-body-secondary small">Form validation styles also work as expected.</p>
<div class="example">
<ul class="nav nav-underline-border" role="tablist">
<li class="nav-item"><a class="nav-link active" data-coreui-toggle="tab" href="#preview-1002" role="tab">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-media-play"></use>
</svg>Preview</a></li>
<li class="nav-item"><a class="nav-link" href="https://coreui.io/docs/forms/floating-labels/#example" target="_blank">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-code"></use>
</svg>Code</a></li>
</ul>
<div class="tab-content rounded-bottom">
<div class="tab-pane p-3 active preview" role="tabpanel" id="preview-1002">
<form class="form-floating">
<input class="form-control is-invalid" id="floatingInputInvalid" type="email" placeholder="name@example.com" value="test@example.com">
<label for="floatingInputInvalid">Invalid input</label>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="card mb-4">
<div class="card-header"><strong>Floating labels</strong><span class="small ms-1">Textareas</span></div>
<div class="card-body">
<p class="text-body-secondary small">By default, <code><textarea></code>s with <code>.form-control</code> will be the same height as <code><input></code>s.</p>
<div class="example">
<ul class="nav nav-underline-border" role="tablist">
<li class="nav-item"><a class="nav-link active" data-coreui-toggle="tab" href="#preview-1003" role="tab">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-media-play"></use>
</svg>Preview</a></li>
<li class="nav-item"><a class="nav-link" href="https://coreui.io/docs/forms/floating-labels/#textareas" target="_blank">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-code"></use>
</svg>Code</a></li>
</ul>
<div class="tab-content rounded-bottom">
<div class="tab-pane p-3 active preview" role="tabpanel" id="preview-1003">
<div class="form-floating">
<textarea class="form-control" id="floatingTextarea" placeholder="Leave a comment here"></textarea>
<label for="floatingTextarea">Comments</label>
</div>
</div>
</div>
</div>
<p class="text-body-secondary small">To set a custom height on your <code><textarea></code>, do not use the <code>rows</code> attribute. Instead, set an explicit <code>height</code> (either inline or via custom CSS).</p>
<div class="example">
<ul class="nav nav-underline-border" role="tablist">
<li class="nav-item"><a class="nav-link active" data-coreui-toggle="tab" href="#preview-1004" role="tab">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-media-play"></use>
</svg>Preview</a></li>
<li class="nav-item"><a class="nav-link" href="https://coreui.io/docs/forms/floating-labels/#textareas" target="_blank">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-code"></use>
</svg>Code</a></li>
</ul>
<div class="tab-content rounded-bottom">
<div class="tab-pane p-3 active preview" role="tabpanel" id="preview-1004">
<div class="form-floating">
<textarea class="form-control" id="floatingTextarea2" placeholder="Leave a comment here" style="height: 100px"></textarea>
<label for="floatingTextarea2">Comments</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="card mb-4">
<div class="card-header"><strong>Floating labels</strong><span class="small ms-1">Selects</span></div>
<div class="card-body">
<p class="text-body-secondary small">Other than <code>.form-control</code>, floating labels are only available on <code>.form-select</code>s. They work in the same way, but unlike <code><input></code>s, they’ll always show the <code><label></code> in its floated state.<strong>Selects with <code>size</code> and <code>multiple</code> are not supported.</strong></p>
<div class="example">
<ul class="nav nav-underline-border" role="tablist">
<li class="nav-item"><a class="nav-link active" data-coreui-toggle="tab" href="#preview-1005" role="tab">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-media-play"></use>
</svg>Preview</a></li>
<li class="nav-item"><a class="nav-link" href="https://coreui.io/docs/forms/floating-labels/#selects" target="_blank">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-code"></use>
</svg>Code</a></li>
</ul>
<div class="tab-content rounded-bottom">
<div class="tab-pane p-3 active preview" role="tabpanel" id="preview-1005">
<div class="form-floating">
<select class="form-select" id="floatingSelect" aria-label="Floating label select example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label for="floatingSelect">Works with selects</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="card mb-4">
<div class="card-header"><strong>Floating labels</strong><span class="small ms-1">Layout</span></div>
<div class="card-body">
<p class="text-body-secondary small">When working with the CoreUI for Bootstrap grid system, be sure to place form elements within column classes.</p>
<div class="example">
<ul class="nav nav-underline-border" role="tablist">
<li class="nav-item"><a class="nav-link active" data-coreui-toggle="tab" href="#preview-1006" role="tab">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-media-play"></use>
</svg>Preview</a></li>
<li class="nav-item"><a class="nav-link" href="https://coreui.io/docs/forms/floating-labels/#layout" target="_blank">
<svg class="icon me-2">
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-code"></use>
</svg>Code</a></li>
</ul>
<div class="tab-content rounded-bottom">
<div class="tab-pane p-3 active preview" role="tabpanel" id="preview-1006">
<div class="row g-2">
<div class="col-md">
<div class="form-floating">
<input class="form-control" id="floatingInputGrid" type="email" placeholder="name@example.com" value="mdo@example.com">
<label for="floatingInputGrid">Email address</label>
</div>
</div>
<div class="col-md">
<div class="form-floating">
<select class="form-select" id="floatingSelectGrid" aria-label="Floating label select example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label for="floatingSelectGrid">Works with selects</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer px-4">
<div><a href="https://coreui.io">CoreUI </a><a href="https://coreui.io/product/free-bootstrap-admin-template/">Bootstrap Admin Template</a> © 2025 creativeLabs.</div>
<div class="ms-auto">Powered by <a href="https://coreui.io/docs/">CoreUI UI Components</a></div>
</footer>
</div>
<!-- CoreUI and necessary plugins-->
<script src="node_modules/@coreui/coreui/dist/js/coreui.bundle.min.js"></script>
<script src="node_modules/simplebar/dist/simplebar.min.js"></script>
<script>
const header = document.querySelector('header.header');
document.addEventListener('scroll', () => {
if (header) {
header.classList.toggle('shadow-sm', document.documentElement.scrollTop > 0);
}
});
</script>
<script>
</script>
</body>
</html>
