Root Zanli
Home
Console
Upload
information
Create File
Create Folder
About
Tools
:
/
home
/
o5t6x7pgljbm
/
public_html
/
intuitionexchange.com
/
components
/
Filename :
forms.html
back
Copy
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Silicon UI Kit | Forms</title> <!-- SEO Meta Tags --> <meta name="description" content="Silicon - Multipurpose Technology Bootstrap Template"> <meta name="keywords" content="bootstrap, business, creative agency, mobile app showcase, saas, fintech, finance, online courses, software, medical, conference landing, services, e-commerce, shopping cart, multipurpose, shop, ui kit, marketing, seo, landing, blog, portfolio, html5, css3, javascript, gallery, slider, touch, creative"> <meta name="author" content="Createx Studio"> <!-- Viewport --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Favicon and Touch Icons --> <link rel="apple-touch-icon" sizes="180x180" href="../assets/favicon/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="../assets/favicon/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="../assets/favicon/favicon-16x16.png"> <link rel="manifest" href="../assets/favicon/site.webmanifest"> <link rel="mask-icon" href="../assets/favicon/safari-pinned-tab.svg" color="#6366f1"> <link rel="shortcut icon" href="../assets/favicon/favicon.ico"> <meta name="msapplication-TileColor" content="#080032"> <meta name="msapplication-config" content="../assets/favicon/browserconfig.xml"> <meta name="theme-color" content="#ffffff"> <!-- Vendor Styles --> <link rel="stylesheet" media="screen" href="../assets/vendor/boxicons/css/boxicons.min.css"/> <link rel="stylesheet" media="screen" href="../assets/vendor/swiper/swiper-bundle.min.css"/> <link rel="stylesheet" media="screen" href="../assets/vendor/nouislider/dist/nouislider.min.css"/> <link rel="stylesheet" media="screen" href="../assets/vendor/prismjs/themes/prism.css"/> <link rel="stylesheet" media="screen" href="../assets/vendor/prismjs/plugins/toolbar/prism-toolbar.css"/> <link rel="stylesheet" media="screen" href="../assets/vendor/prismjs/plugins/line-numbers/prism-line-numbers.css"/> <!-- Main Theme Styles + Bootstrap --> <link rel="stylesheet" media="screen" href="../assets/css/theme.min.css"> <!-- Theme mode --> <script> let mode = window.localStorage.getItem('mode'), root = document.getElementsByTagName('html')[0]; if (mode !== null && mode === 'dark') { root.classList.add('dark-mode'); } else { root.classList.remove('dark-mode'); } </script> </head> <!-- Body --> <body data-bs-spy="scroll" data-bs-target="#jumpToNav" tabindex="0"> <!-- Navbar --> <header class="header navbar navbar-expand bg-light border-bottom border-light shadow fixed-top" data-scroll-header> <div class="container-fluid pe-lg-4"> <div class="d-flex align-items-center"> <a href="typography.html" class="navbar-brand flex-shrink-0 py-1 py-lg-2"> <img src="../assets/img/logo.svg" width="47" alt="Silicon"> Silicon </a> <span class="badge bg-warning">UI Kit</span> </div> <div class="d-flex align-items-center w-100"> <ul class="navbar-nav d-none d-lg-flex" style="padding-left: 11.75rem;"> <li class="nav-item"> <a href="../index.html" class="nav-link"> <i class="bx bx-desktop opacity-70 fs-lg me-1"></i> Live preview </a> </li> <li class="nav-item"> <a href="../docs/getting-started.html" class="nav-link"> <i class="bx bx-file opacity-70 fs-lg me-1"></i> Documentation </a> </li> </ul> <button type="button" class="navbar-toggler d-block d-lg-none ms-auto me-4" data-bs-toggle="offcanvas" data-bs-target="#componentsNav" aria-controls="componentsNav" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="form-check form-switch mode-switch pe-lg-1 ms-lg-auto" data-bs-toggle="mode"> <input type="checkbox" class="form-check-input" id="theme-mode"> <label class="form-check-label d-none d-sm-block d-lg-none d-xl-block" for="theme-mode">Light</label> <label class="form-check-label d-none d-sm-block d-lg-none d-xl-block" for="theme-mode">Dark</label> </div> <a href="https://themes.getbootstrap.com/product/silicon-business-technology-template-ui-kit/" class="btn btn-primary btn-sm fs-sm rounded ms-4 d-none d-lg-inline-flex" target="_blank" rel="noopener"> <i class="bx bx-cart fs-5 lh-1 me-1"></i> Buy now </a> </div> </div> </header> <!-- Main sidebar navigation --> <aside class="dark-mode"> <div id="componentsNav" class="offcanvas-lg offcanvas-start d-flex flex-column position-fixed top-0 start-0 vh-100 bg-dark border-end-lg" style="width: 21rem; z-index: 1045;"> <div class="offcanvas-header d-none d-lg-flex justify-content-start"> <a href="typography.html" class="navbar-brand text-dark d-none d-lg-flex py-0"> <img src="../assets/img/logo.svg" width="47" alt="Silicon"> Silicon </a> <span class="badge bg-warning d-none d-lg-inline-block">UI Kit</span> </div> <div class="offcanvas-header d-block d-lg-none border-bottom"> <div class="d-flex align-items-center justify-content-between mb-3"> <h5 class="d-lg-none mb-0">Menu</h5> <button type="button" class="btn-close d-lg-none" data-bs-dismiss="offcanvas" data-bs-target="#componentsNav"></button> </div> <div class="list-group list-group-flush mx-n4"> <a href="../index.html" class="list-group-item list-group-item-action d-flex align-items-center border-0 py-2 px-4"> <i class="bx bx-desktop fs-lg opacity-80 me-2"></i> Preview </a> <a href="../docs/getting-started.html" class="list-group-item list-group-item-action d-flex align-items-center border-0 py-2 px-4"> <i class="bx bx-file fs-lg opacity-80 me-2"></i> Documentation </a> </div> </div> <div class="offcanvas-body swiper scrollbar-hover overflow-hidden w-100 p-4" data-swiper-options='{ "direction": "vertical", "slidesPerView": "auto", "freeMode": true, "scrollbar": { "el": ".swiper-scrollbar" }, "mousewheel": true }'> <div class="swiper-wrapper"> <div class="swiper-slide h-auto"> <h3 class="fs-lg">Content</h3> <div class="list-group list-group-flush border-bottom pb-3 mb-4 mx-n4"> <a href="typography.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Typography</a> <a href="https://boxicons.com/" class="list-group-item list-group-item-action border-0 py-2 px-4" target="_blank" rel="noopener">Icon font</a> <a href="code.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Code</a> <a href="images.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Images & figures</a> <a href="tables.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Tables</a> </div> <h3 class="fs-lg">Components</h3> <div class="list-group list-group-flush border-bottom pb-3 mb-4 mx-n4"> <a href="accordion.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Accordion</a> <a href="alerts.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Alerts</a> <a href="audio-player.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Audio player</a> <a href="badges.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Badges</a> <a href="blog-components.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Blog components</a> <a href="breadcrumb.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Breadcrumb</a> <a href="buttons.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Buttons</a> <a href="button-group.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Button group</a> <a href="cards.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Cards</a> <a href="carousel.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Carousel (Slider)</a> <a href="collapse.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Collapse</a> <a href="dropdowns.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Dropdowns</a> <a href="forms.html" class="list-group-item list-group-item-action border-0 py-2 px-4 active">Forms</a> <a href="gallery.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Gallery (Lightbox)</a> <a href="image-comparison-slider.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Image comparison slider</a> <a href="input-group.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Input group</a> <a href="list-group.html" class="list-group-item list-group-item-action border-0 py-2 px-4">List group</a> <a href="modal.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Modal</a> <a href="navbar.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Navbar</a> <a href="offcanvas.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Offcanvas</a> <a href="pagination.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Pagination</a> <a href="parallax.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Parallax</a> <a href="pills.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Pills</a> <a href="placeholders.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Placeholders</a> <a href="popovers.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Popovers</a> <a href="portfolio-components.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Portfolio components</a> <a href="pricing.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Pricing</a> <a href="progress-bars.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Progress bars</a> <a href="social-buttons.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Social buttons</a> <a href="spinners.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Spinners</a> <a href="steps.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Steps</a> <a href="tabs.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Tabs</a> <a href="team.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Team</a> <a href="testimonials.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Testimonials / reviews</a> <a href="toasts.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Toasts</a> <a href="tooltips.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Tooltips</a> <a href="video-popup.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Video popup</a> </div> <h3 class="fs-lg">Utilities</h3> <div class="list-group list-group-flush mx-n4 pb-2"> <a href="https://getbootstrap.com/docs/5.2/utilities/background/" class="list-group-item list-group-item-action border-0 py-2 px-4" target="_blank" rel="noopener">Bootstrap</a> <a href="utilities.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Silicon</a> </div> </div> </div> <div class="swiper-scrollbar end-0"></div> </div> <div class="offcanvas-header border-top"> <a href="https://themes.getbootstrap.com/product/silicon-business-technology-template-ui-kit/" class="btn btn-primary w-100" target="_blank" rel="noopener"> <i class="bx bx-cart fs-4 lh-1 me-1"></i> Buy now </a> </div> </div> </aside> <!-- Page container --> <main class="docs-container pt-5"> <div class="container-fluid px-xxl-5 px-lg-4 pt-4 pt-lg-5 pb-2 pb-lg-4"> <!-- Page title --> <div class="d-sm-flex align-items-end justify-content-between ps-lg-2 ps-xxl-0 mt-2 mt-lg-0 pt-4 mb-n3"> <div class="me-4"> <h1 class="pb-1">Forms</h1> <p class="text-muted fs-lg mb-2">Form control styles, layout options, and custom components.</p> </div> <a href="https://getbootstrap.com/docs/5.2/forms/overview/" class="btn btn-link px-0" target="_blank" rel="noopener"> Bootstrap docs <i class="bx bx-link-external fs-lg ms-2"></i> </a> </div> <!-- Info alert --> <div class="alert alert-info mt-5 mb-n1 mb-lg-0" role="alert"> <div class="d-flex"> <i class="bx bx-info-circle lead me-2 me-sm-3"></i> <div class="text-break"> <p class="mb-3"><strong>Range slider</strong> depends on <strong>noUISlider plugin</strong>. Make sure to link to <strong>noUISlider css and js</strong> files in your document: <strong>assets/vendor/nouislider/dist/nouislider.min.css</strong> and <strong>assets/vendor/nouislider/dist/nouislider.min.js</strong>. Use this page as a reference.</p> <p class="mb-0">To enable input text content formatting please make sure to link to <strong>Cleave.js</strong> plugin in your document: <strong>assets/vendor/cleave.js/dist/cleave.min.js</strong>. Use this page as a reference.</p> </div> </div> </div> <!-- Supported input types --> <section id="forms-types" class="border-bottom py-5 ps-lg-2 ps-xxl-0"> <h2 class="h4">Supported input types</h2> <div class="d-table"> <ul class="nav nav-tabs-alt" role="tablist"> <li class="nav-item"> <a class="nav-link active" href="#preview1" data-bs-toggle="tab" role="tab" aria-controls="preview1" aria-selected="true"> <i class="bx bx-show-alt fs-base opacity-70 me-2"></i> Preview </a> </li> <li class="nav-item"> <a class="nav-link" href="#html1" data-bs-toggle="tab" role="tab" aria-controls="html1" aria-selected="false"> <i class="bx bx-code-alt fs-base opacity-70 me-2"></i> HTML </a> </li> </ul> </div> <div class="tab-content pt-1"> <div class="tab-pane fade show active" id="preview1" role="tabpanel"> <div class="mb-4 row align-items-center"> <label class="col-md-2 col-form-label fs-sm" for="text-input">Text</label> <div class="col-md-10"> <input class="form-control" type="text" id="text-input" value="Artisanal kale"> </div> </div> <div class="mb-4 row align-items-center"> <label class="col-md-2 col-form-label fs-sm" for="search-input">Search</label> <div class="col-md-10"> <input class="form-control" type="search" id="search-input" value="How do I shoot web"> </div> </div> <div class="mb-4 row align-items-center"> <label class="col-md-2 col-form-label fs-sm" for="email-input">Email</label> <div class="col-md-10"> <input class="form-control" type="email" id="email-input" value="email@example.com"> </div> </div> <div class="mb-4 row align-items-center"> <label class="col-md-2 col-form-label fs-sm" for="url-input">URL</label> <div class="col-md-10"> <input class="form-control" type="url" id="url-input" value="https://getbootstrap.com"> </div> </div> <div class="mb-4 row align-items-center"> <label class="col-md-2 col-form-label fs-sm" for="tel-input">Phone</label> <div class="col-md-10"> <input class="form-control" type="tel" id="tel-input" value="1-(770)-334-2518"> </div> </div> <div class="mb-4 row align-items-center"> <label class="col-md-2 col-form-label fs-sm" for="pass-input">Password</label> <div class="col-md-10"> <input class="form-control" type="password" id="pass-input" value="mypasswordexample"> </div> </div> <div class="mb-4 row"> <label class="col-md-2 col-form-label fs-sm" for="textarea-input">Textarea</label> <div class="col-md-10"> <textarea class="form-control" id="textarea-input" rows="5">Hello World!</textarea> </div> </div> <div class="mb-4 row align-items-center"> <label class="col-md-2 col-form-label fs-sm" for="select-input">Select</label> <div class="col-md-10"> <select class="form-select" id="select-input"> <option>Choose option...</option> <option>Option item 1</option> <option>Option item 2</option> <option>Option item 3</option> </select> </div> </div> <div class="mb-4 row align-items-center"> <label class="col-md-2 col-form-label fs-sm" for="multiselect-input">Multiselect</label> <div class="col-md-10"> <select class="form-select" id="multiselect-input" size="3" multiple> <option>Option item 1</option> <option>Option item 2</option> <option>Option item 3</option> <option>Option item 4</option> <option>Option item 5</option> <option>Option item 6</option> </select> </div> </div> <div class="mb-4 row align-items-center"> <label class="col-md-2 col-form-label fs-sm" for="file-input">File</label> <div class="col-md-10"> <input class="form-control" type="file" id="file-input"> </div> </div> <div class="mb-4 row align-items-center"> <label class="col-md-2 col-form-label fs-sm" for="number-input">Number</label> <div class="col-md-10"> <input class="form-control" type="number" id="number-input" value="37"> </div> </div> <div class="mb-4 row align-items-center"> <label class="col-md-2 col-form-label fs-sm" for="datalist-input">Datalist</label> <div class="col-md-10"> <input class="form-control" list="datalist-options" id="datalist-input" placeholder="Type to search..."> <datalist id="datalist-options"> <option value="San Francisco"></option> <option value="New York"></option> <option value="Seattle"></option> <option value="Los Angeles"></option> <option value="Chicago"></option> </datalist> </div> </div> <div class="mb-4 row align-items-center"> <label class="col-md-2 col-form-label fs-sm" for="range-input">Range</label> <div class="col-md-10"> <input class="form-range" type="range" id="range-input"> </div> </div> <div class="row align-items-center"> <label class="col-md-2 col-form-label fs-sm" for="color-input">Color</label> <div class="col-md-10"> <input class="form-control form-control-color" type="color" id="color-input" value="#d946ef"> </div> </div> </div> <div class="tab-pane fade" id="html1" role="tabpanel"> <pre class="line-numbers"><code class="lang-html"><!-- Text input --> <div class="mb-4"> <label for="text-input" class="form-label">Text</label> <input class="form-control" type="text" id="text-input" value="Artisanal kale"> </div> <!-- Search input --> <div class="mb-4"> <label for="search-input" class="form-label">Search</label> <input class="form-control" type="search" id="search-input" value="How do I shoot web"> </div> <!-- Email input --> <div class="mb-4"> <label for="email-input" class="form-label">Email</label> <input class="form-control" type="email" id="email-input" value="email@example.com"> </div> <!-- URL Input --> <div class="mb-4"> <label for="url-input" class="form-label">URL</label> <input class="form-control" type="url" id="url-input" value="https://getbootstrap.com"> </div> <!-- Phone Input --> <div class="mb-4"> <label for="tel-input" class="form-label">Phone</label> <input class="form-control" type="tel" id="tel-input" value="1-(770)-334-2518"> </div> <!-- Password Input --> <div class="mb-4"> <label for="pass-input" class="form-label">Password</label> <input class="form-control" type="password" id="pass-input" value="mypasswordexample"> </div> <!-- Textarea --> <div class="mb-4"> <label for="textarea-input" class="form-label">Textarea</label> <textarea class="form-control" id="textarea-input" rows="5">Hello World!</textarea> </div> <!-- Select --> <div class="mb-4"> <label for="select-input" class="form-label">Select</label> <select class="form-select" id="select-input"> <option>Choose option...</option> <option>Option item 1</option> <option>Option item 2</option> <option>Option item 3</option> </select> </div> <!-- Multiselect --> <div class="mb-4"> <label for="multiselect-input" class="form-label">Multiselect</label> <select class="form-select" id="multiselect-input" size="3" multiple> <option>Option item 1</option> <option>Option item 2</option> <option>Option item 3</option> <option>Option item 4</option> <option>Option item 5</option> <option>Option item 6</option> </select> </div> <!-- File input --> <div class="mb-4"> <label for="file-input" class="form-label">File</label> <input class="form-control" type="file" id="file-input"> </div> <!-- Number input --> <div class="mb-4"> <label for="number-input" class="form-label">Number</label> <input class="form-control" type="number" id="number-input" value="37"> </div> <!-- Datalist --> <div class="mb-4"> <label for="datalist-input" class="form-label">Datalist</label> <input class="form-control" list="datalist-options" id="datalist-input" placeholder="Type to search..."> <datalist id="datalist-options"> <option value="San Francisco"> <option value="New York"> <option value="Seattle"> <option value="Los Angeles"> <option value="Chicago"> </datalist> </div> <!-- Range input --> <div class="mb-4"> <label for="range-input" class="form-label">Range</label> <input class="form-control" type="range" id="range-input"> </div> <!-- Color input --> <div class="mb-4"> <label for="color-input" class="form-label">Color</label> <input class="form-control form-control-color" type="color" id="color-input" value="#d946ef"> </div></code></pre> </div> </div> </section> <!-- Floating labels --> <section id="forms-floating-labels" class="border-bottom py-5 ps-lg-2 ps-xxl-0"> <h2 class="h4">Floating labels</h2> <div class="d-table"> <ul class="nav nav-tabs-alt" role="tablist"> <li class="nav-item"> <a class="nav-link active" href="#preview2" data-bs-toggle="tab" role="tab" aria-controls="preview2" aria-selected="true"> <i class="bx bx-show-alt fs-base opacity-70 me-2"></i> Preview </a> </li> <li class="nav-item"> <a class="nav-link" href="#html2" data-bs-toggle="tab" role="tab" aria-controls="html2" aria-selected="false"> <i class="bx bx-code-alt fs-base opacity-70 me-2"></i> HTML </a> </li> </ul> </div> <div class="tab-content pt-1"> <div class="tab-pane fade show active" id="preview2" role="tabpanel"> <div class="form-floating mb-4"> <input class="form-control" type="text" id="fl-text" placeholder="Your name"> <label for="fl-text">Your name</label> </div> <div class="form-floating mb-4"> <select class="form-select" id="fl-select"> <option selected>Argentina</option> <option>Belgium</option> <option>France</option> <option>Germany</option> <option>Japan</option> <option>Spain</option> <option>USA</option> </select> <label for="fl-select">Your country</label> </div> <div class="form-floating"> <textarea class="form-control" id="fl-textarea" style="height: 8rem;" placeholder="Your message"></textarea> <label for="fl-textarea">Your message</label> </div> </div> <div class="tab-pane fade" id="html2" role="tabpanel"> <pre class="line-numbers"><code class="lang-html"><!-- Floating label: Text input --> <div class="form-floating mb-4"> <input class="form-control" type="text" id="fl-text" placeholder="Your name"> <label for="fl-text">Your name</label> </div> <!-- Floating label: Select --> <div class="form-floating mb-4"> <select class="form-select" id="fl-select"> <option selected>Argentina</option> <option>Belgium</option> <option>France</option> <option>Germany</option> <option>Japan</option> <option>Spain</option> <option>USA</option> </select> <label for="fl-select">Your country</label> </div> <!-- Floating label: Textarea --> <div class="form-floating"> <textarea class="form-control" id="fl-textarea" style="height: 8rem;" placeholder="Your message"></textarea> <label for="fl-textarea">Your message</label> </div></code></pre> </div> </div> </section> <!-- Password visibility toggle --> <section id="forms-password-toggle" class="border-bottom py-5 ps-lg-2 ps-xxl-0"> <h2 class="h4">Password visibility toggle</h2> <div class="d-table"> <ul class="nav nav-tabs-alt" role="tablist"> <li class="nav-item"> <a class="nav-link active" href="#preview3" data-bs-toggle="tab" role="tab" aria-controls="preview3" aria-selected="true"> <i class="bx bx-show-alt fs-base opacity-70 me-2"></i> Preview </a> </li> <li class="nav-item"> <a class="nav-link" href="#html3" data-bs-toggle="tab" role="tab" aria-controls="html3" aria-selected="false"> <i class="bx bx-code-alt fs-base opacity-70 me-2"></i> HTML </a> </li> </ul> </div> <div class="tab-content pt-1"> <div class="tab-pane fade show active" id="preview3" role="tabpanel"> <div style="max-width: 25rem;"> <label class="form-label" for="pass-visibility">Password</label> <div class="password-toggle"> <input class="form-control" type="password" id="pass-visibility" value="hidden@password"> <label class="password-toggle-btn" aria-label="Show/hide password"> <input class="password-toggle-check" type="checkbox"><span class="password-toggle-indicator"></span> </label> </div> </div> </div> <div class="tab-pane fade" id="html3" role="tabpanel"> <pre class="line-numbers"><code class="lang-html"><!-- Password visibility toggle --> <div class="password-toggle"> <input class="form-control" type="password" value="hidden@password"> <label class="password-toggle-btn" aria-label="Show/hide password"> <input class="password-toggle-check" type="checkbox"> <span class="password-toggle-indicator"></span> </label> </div></code></pre> </div> </div> </section> <!-- Checkboxes --> <section id="forms-checkboxes" class="border-bottom py-5 ps-lg-2 ps-xxl-0"> <h2 class="h4">Checkboxes</h2> <div class="d-table"> <ul class="nav nav-tabs-alt" role="tablist"> <li class="nav-item"> <a class="nav-link active" href="#preview4" data-bs-toggle="tab" role="tab" aria-controls="preview4" aria-selected="true"> <i class="bx bx-show-alt fs-base opacity-70 me-2"></i> Preview </a> </li> <li class="nav-item"> <a class="nav-link" href="#html4" data-bs-toggle="tab" role="tab" aria-controls="html4" aria-selected="false"> <i class="bx bx-code-alt fs-base opacity-70 me-2"></i> HTML </a> </li> </ul> </div> <div class="tab-content pt-1"> <div class="tab-pane fade show active" id="preview4" role="tabpanel"> <div class="form-check mb-1"> <input class="form-check-input" type="checkbox" id="ex-check-1"> <label class="form-check-label" for="ex-check-1">Check this checkbox</label> </div> <div class="form-check mb-1"> <input class="form-check-input" type="checkbox" id="ex-check-2" checked> <label class="form-check-label" for="ex-check-2">Uncheck this checkbox</label> </div> <div class="form-check mb-1"> <input class="form-check-input" type="checkbox" id="ex-check-3" disabled> <label class="form-check-label" for="ex-check-3">Disabled checkbox</label> </div> <div class="pt-3"> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="ex-check-4"> <label class="form-check-label" for="ex-check-4">Check this checkbox</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="ex-check-5" checked> <label class="form-check-label" for="ex-check-5">Uncheck this checkbox</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="ex-check-6" disabled> <label class="form-check-label" for="ex-check-6">Disabled checkbox</label> </div> </div> </div> <div class="tab-pane fade" id="html4" role="tabpanel"> <pre class="line-numbers"><code class="lang-html"><!-- Stacked checkboxes --> <div class="form-check"> <input class="form-check-input" type="checkbox" id="ex-check-1"> <label class="form-check-label" for="ex-check-1">Check this checkbox</label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" id="ex-check-2" checked> <label class="form-check-label" for="ex-check-2">Uncheck this checkbox</label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" id="ex-check-3" disabled> <label class="form-check-label" for="ex-check-3">Disabled checkbox</label> </div> <!-- Inline checkboxes --> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="ex-check-4"> <label class="form-check-label" for="ex-check-4">Check this checkbox</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="ex-check-5" checked> <label class="form-check-label" for="ex-check-5">Uncheck this checkbox</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="ex-check-6" disabled> <label class="form-check-label" for="ex-check-6">Disabled checkbox</label> </div></code></pre> </div> </div> </section> <!-- Radios --> <section id="forms-radios" class="border-bottom py-5 ps-lg-2 ps-xxl-0"> <h2 class="h4">Radios</h2> <div class="d-table"> <ul class="nav nav-tabs-alt" role="tablist"> <li class="nav-item"> <a class="nav-link active" href="#preview5" data-bs-toggle="tab" role="tab" aria-controls="preview5" aria-selected="true"> <i class="bx bx-show-alt fs-base opacity-70 me-2"></i> Preview </a> </li> <li class="nav-item"> <a class="nav-link" href="#html5" data-bs-toggle="tab" role="tab" aria-controls="html5" aria-selected="false"> <i class="bx bx-code-alt fs-base opacity-70 me-2"></i> HTML </a> </li> </ul> </div> <div class="tab-content pt-1"> <div class="tab-pane fade show active" id="preview5" role="tabpanel"> <div class="form-check mb-1"> <input class="form-check-input" type="radio" id="ex-radio-1" name="radio"> <label class="form-check-label" for="ex-radio-1">Toggle this radio</label> </div> <div class="form-check mb-1"> <input class="form-check-input" type="radio" id="ex-radio-2" name="radio" checked> <label class="form-check-label" for="ex-radio-2">Toggle this radio</label> </div> <div class="form-check mb-1"> <input class="form-check-input" type="radio" id="ex-radio-3" name="radio" disabled> <label class="form-check-label" for="ex-radio-3">Disabled radio</label> </div> <div class="pt-3"> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" id="ex-radio-4" name="radio2"> <label class="form-check-label" for="ex-radio-4">Toggle this radio</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" id="ex-radio-5" name="radio2" checked> <label class="form-check-label" for="ex-radio-5">Toggle this radio</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" id="ex-radio-6" name="radio2" disabled> <label class="form-check-label" for="ex-radio-6">Disabled radio</label> </div> </div> </div> <div class="tab-pane fade" id="html5" role="tabpanel"> <pre class="line-numbers"><code class="lang-html"><!-- Stacked radio buttons --> <div class="form-check"> <input class="form-check-input" type="radio" id="ex-radio-1" name="radio"> <label class="form-check-label" for="ex-radio-1">Toggle this radio</label> </div> <div class="form-check"> <input class="form-check-input" type="radio" id="ex-radio-2" name="radio" checked> <label class="form-check-label" for="ex-radio-2">Toggle this radio</label> </div> <div class="form-check"> <input class="form-check-input" type="radio" id="ex-radio-3" name="radio" disabled> <label class="form-check-label" for="ex-radio-3">Disabled radio</label> </div> <!-- Inline radio buttons --> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" id="ex-radio-4" name="radio2"> <label class="form-check-label" for="ex-radio-4">Toggle this radio</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" id="ex-radio-5" name="radio2" checked> <label class="form-check-label" for="ex-radio-5">Toggle this radio</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" id="ex-radio-6" name="radio2" disabled> <label class="form-check-label" for="ex-radio-6">Disabled radio</label> </div></code></pre> </div> </div> </section> <!-- Switches --> <section id="forms-switches" class="border-bottom py-5 ps-lg-2 ps-xxl-0"> <h2 class="h4">Switches</h2> <div class="d-table"> <ul class="nav nav-tabs-alt" role="tablist"> <li class="nav-item"> <a class="nav-link active" href="#preview6" data-bs-toggle="tab" role="tab" aria-controls="preview6" aria-selected="true"> <i class="bx bx-show-alt fs-base opacity-70 me-2"></i> Preview </a> </li> <li class="nav-item"> <a class="nav-link" href="#html6" data-bs-toggle="tab" role="tab" aria-controls="html6" aria-selected="false"> <i class="bx bx-code-alt fs-base opacity-70 me-2"></i> HTML </a> </li> </ul> </div> <div class="tab-content pt-1"> <div class="tab-pane fade show active" id="preview6" role="tabpanel"> <div class="form-check form-switch mb-3"> <input class="form-check-input" type="checkbox" id="customSwitch1"> <label class="form-check-label" for="customSwitch1">Toggle this switch element</label> </div> <div class="form-check form-switch mb-3"> <input class="form-check-input" type="checkbox" id="customSwitch2" checked> <label class="form-check-label" for="customSwitch2">Toggle this switch element</label> </div> <div class="form-check form-switch"> <input class="form-check-input" type="checkbox" id="customSwitch3" disabled> <label class="form-check-label" for="customSwitch3">Disabled switch element</label> </div> </div> <div class="tab-pane fade" id="html6" role="tabpanel"> <pre class="line-numbers"><code class="lang-html"><!-- Switch --> <div class="form-check form-switch"> <input type="checkbox" class="form-check-input" id="customSwitch1"> <label class="form-check-label" for="customSwitch1">Toggle this switch element</label> </div> <!-- Checked switch --> <div class="form-check form-switch"> <input type="checkbox" class="form-check-input" id="customSwitch2" checked> <label class="form-check-label" for="customSwitch2">Toggle this switch element</label> </div> <!-- Disabled switch --> <div class="form-check form-switch"> <input type="checkbox" class="form-check-input" id="customSwitch3" disabled> <label class="form-check-label" for="customSwitch3">Disabled switch element</label> </div></code></pre> </div> </div> </section> <!-- Theme mode switch --> <section id="forms-theme-mode-switch" class="border-bottom py-5 ps-lg-2 ps-xxl-0"> <h2 class="h4">Theme mode switch</h2> <div class="d-table"> <ul class="nav nav-tabs-alt" role="tablist"> <li class="nav-item"> <a class="nav-link active" href="#preview7" data-bs-toggle="tab" role="tab" aria-controls="preview7" aria-selected="true"> <i class="bx bx-show-alt fs-base opacity-70 me-2"></i> Preview </a> </li> <li class="nav-item"> <a class="nav-link" href="#html7" data-bs-toggle="tab" role="tab" aria-controls="html7" aria-selected="false"> <i class="bx bx-code-alt fs-base opacity-70 me-2"></i> HTML </a> </li> </ul> </div> <div class="tab-content pt-1"> <div class="tab-pane fade show active" id="preview7" role="tabpanel"> <div class="form-check form-switch mode-switch mt-1"> <input type="checkbox" class="form-check-input" id="theme-mode-1"> <label class="form-check-label d-none d-sm-block d-lg-none d-xl-block" for="theme-mode-1">Light</label> <label class="form-check-label d-none d-sm-block d-lg-none d-xl-block" for="theme-mode-1">Dark</label> </div> </div> <div class="tab-pane fade" id="html7" role="tabpanel"> <pre class="line-numbers"><code class="lang-html"><!-- Theme mode switch. Can be used oly once on the page! --> <div class="form-check form-switch mode-switch" data-bs-toggle="mode"> <input type="checkbox" class="form-check-input" id="theme-mode"> <label class="form-check-label d-none d-sm-block d-lg-none d-xl-block" for="theme-mode">Light</label> <label class="form-check-label d-none d-sm-block d-lg-none d-xl-block" for="theme-mode">Dark</label> </div></code></pre> </div> </div> </section> <!-- Range slider (noUISlider) --> <section id="forms-range-slider" class="border-bottom py-5 ps-lg-2 ps-xxl-0"> <h2 class="h4">Range slider (noUISlider)</h2> <div class="d-table"> <ul class="nav nav-tabs-alt" role="tablist"> <li class="nav-item"> <a class="nav-link active" href="#preview8" data-bs-toggle="tab" role="tab" aria-controls="preview8" aria-selected="true"> <i class="bx bx-show-alt fs-base opacity-70 me-2"></i> Preview </a> </li> <li class="nav-item"> <a class="nav-link" href="#html8" data-bs-toggle="tab" role="tab" aria-controls="html8" aria-selected="false"> <i class="bx bx-code-alt fs-base opacity-70 me-2"></i> HTML </a> </li> </ul> </div> <div class="tab-content pt-1"> <div class="tab-pane fade show active" id="preview8" role="tabpanel"> <h6 class="fs-sm">Two handles + inputs</h6> <div class="range-slider mb-4 pb-3" data-start-min="280" data-start-max="720" data-min="0" data-max="1000" data-step="1" style="max-width: 20rem;"> <div class="range-slider-ui"></div> <div class="d-flex align-items-center"> <div class="w-50"> <div class="input-group"> <span class="input-group-text px-2"> <i class="bx bx-dollar mx-1"></i> </span> <input class="form-control form-control-sm range-slider-value-min" type="number"> </div> </div> <div class="mx-1 px-2 fs-xs">—</div> <div class="w-50"> <div class="input-group"> <span class="input-group-text px-2"> <i class="bx bx-dollar mx-1"></i> </span> <input class="form-control form-control-sm range-slider-value-max" type="number"> </div> </div> </div> </div> <h6 class="fs-sm">With value scale (pips)</h6> <div class="range-slider mb-4 pb-3" data-start-min="250" data-start-max="680" data-min="0" data-max="1000" data-step="1" data-pips="true" style="max-width: 20rem;"> <div class="range-slider-ui"></div> <div class="d-flex align-items-center"> <div class="w-50"> <div class="input-group"> <span class="input-group-text px-2"> <i class="bx bx-dollar mx-1"></i> </span> <input class="form-control form-control-sm range-slider-value-min" type="number"> </div> </div> <div class="mx-1 px-2 fs-xs">—</div> <div class="w-50"> <div class="input-group"> <span class="input-group-text px-2"> <i class="bx bx-dollar mx-1"></i> </span> <input class="form-control form-control-sm range-slider-value-max" type="number"> </div> </div> </div> </div> <h6 class="fs-sm">One handle + no inputs</h6> <div class="range-slider" data-start-min="450" data-min="0" data-max="1000" data-step="1" style="max-width: 20rem;"> <div class="range-slider-ui"></div> <input class="form-control range-slider-value-min" type="hidden"> </div> </div> <div class="tab-pane fade" id="html8" role="tabpanel"> <pre class="line-numbers"><code class="lang-html"><!-- Range slider: Two handles + inputs --> <div class="range-slider" data-start-min="280" data-start-max="720" data-min="0" data-max="1000" data-step="1"> <div class="range-slider-ui"></div> <div class="d-flex align-items-center"> <div class="w-50"> <div class="input-group"> <span class="input-group-text px-2"> <i class="bx bx-dollar mx-1"></i> </span> <input class="form-control form-control-sm range-slider-value-min" type="number"> </div> </div> <div class="mx-1 px-2 fs-xs">—</div> <div class="w-50"> <div class="input-group"> <span class="input-group-text px-2"> <i class="bx bx-dollar mx-1"></i> </span> <input class="form-control form-control-sm range-slider-value-max" type="number"> </div> </div> </div> </div> <!-- Range slider: With value scale (pips) --> <div class="range-slider" data-start-min="250" data-start-max="680" data-min="0" data-max="1000" data-step="1" data-pips="true"> <div class="range-slider-ui"></div> <div class="d-flex align-items-center"> <div class="w-50"> <div class="input-group"> <span class="input-group-text px-2"> <i class="bx bx-dollar mx-1"></i> </span> <input class="form-control form-control-sm range-slider-value-min" type="number"> </div> </div> <div class="mx-1 px-2 fs-xs">—</div> <div class="w-50"> <div class="input-group"> <span class="input-group-text px-2"> <i class="bx bx-dollar mx-1"></i> </span> <input class="form-control form-control-sm range-slider-value-max" type="number"> </div> </div> </div> </div> <!-- Range slider: One handle + no inputs --> <div class="range-slider" data-start-min="450" data-min="0" data-max="1000" data-step="1"> <div class="range-slider-ui"></div> <input class="form-control range-slider-value-min" type="hidden"> </div> </code></pre> </div> </div> </section> <!-- Sizing --> <section id="forms-sizing" class="border-bottom py-5 ps-lg-2 ps-xxl-0"> <h2 class="h4">Sizing</h2> <div class="d-table"> <ul class="nav nav-tabs-alt" role="tablist"> <li class="nav-item"> <a class="nav-link active" href="#preview9" data-bs-toggle="tab" role="tab" aria-controls="preview9" aria-selected="true"> <i class="bx bx-show-alt fs-base opacity-70 me-2"></i> Preview </a> </li> <li class="nav-item"> <a class="nav-link" href="#html9" data-bs-toggle="tab" role="tab" aria-controls="html9" aria-selected="false"> <i class="bx bx-code-alt fs-base opacity-70 me-2"></i> HTML </a> </li> </ul> </div> <div class="tab-content pt-1"> <div class="tab-pane fade show active" id="preview9" role="tabpanel"> <div class="d-sm-flex"> <div class="w-100 me-4"> <div class="mb-3"> <label class="form-label fs-base" for="input-lg">Large input</label> <input class="form-control form-control-lg" id="input-lg" type="text" placeholder="Large input placeholder"> </div> <div class="mb-3"> <label class="form-label" for="input-normal">Normal input</label> <input class="form-control" id="input-normal" type="text" placeholder="Normal input placeholder"> </div> <div class="mb-3 mb-sm-0"> <label class="form-label fs-xs" for="input-sm">Small input</label> <input class="form-control form-control-sm" id="input-sm" type="text" placeholder="Small input placeholder"> </div> </div> <div class="w-100"> <div class="mb-3"> <label class="form-label fs-base" for="select-lg">Large select</label> <select class="form-select form-select-lg" id="select-lg"> <option>Large select option</option> <option>Option item 1</option> <option>Option item 2</option> <option>Option item 3</option> </select> </div> <div class="mb-3"> <label class="form-label" for="select-normal">Normal select</label> <select class="form-select" id="select-normal"> <option>Normal select option</option> <option>Option item 1</option> <option>Option item 2</option> <option>Option item 3</option> </select> </div> <div class="mb-3 mb-sm-0"> <label class="form-label fs-xs" for="select-sm">Small select</label> <select class="form-select form-select-sm" id="select-sm"> <option>Small select option</option> <option>Option item 1</option> <option>Option item 2</option> <option>Option item 3</option> </select> </div> </div> </div> </div> <div class="tab-pane fade" id="html9" role="tabpanel"> <pre class="line-numbers"><code class="lang-html"><!-- Large input --> <div class="mb-3"> <label class="form-label fs-base" for="input-lg">Large input</label> <input class="form-control form-control-lg" id="input-lg" type="text" placeholder="Large input placeholder"> </div> <!-- Normal input --> <div class="mb-3"> <label for="input-normal" class="form-label">Normal input</label> <input class="form-control" id="input-normal" type="text" placeholder="Normal input placeholder"> </div> <!-- Small input --> <div class="mb-3"> <label class="form-label fs-xs" for="input-sm">Small input</label> <input class="form-control form-control-sm" id="input-sm" type="text" placeholder="Small input placeholder"> </div> <!-- Large select --> <div class="mb-3"> <label class="form-label fs-base" for="select-lg">Large select</label> <select class="form-select form-select-lg" id="select-lg"> <option>Large select option</option> <option>Option item 1</option> <option>Option item 2</option> <option>Option item 3</option> </select> </div> <!-- Normal select --> <div class="mb-3"> <label class="form-label" for="select-normal">Normal select</label> <select class="form-select" id="select-normal"> <option>Normal select option</option> <option>Option item 1</option> <option>Option item 2</option> <option>Option item 3</option> </select> </div> <!-- Small select --> <div class="mb-3"> <label class="form-label fs-xs" for="select-sm">Small select</label> <select class="form-select form-select-sm" id="select-sm"> <option>Small select option</option> <option>Option item 1</option> <option>Option item 2</option> <option>Option item 3</option> </select> </div></code></pre> </div> </div> </section> <!-- Readonly & disabled --> <section id="forms-disabled" class="border-bottom py-5 ps-lg-2 ps-xxl-0"> <h2 class="h4">Readonly & disabled</h2> <div class="d-table"> <ul class="nav nav-tabs-alt" role="tablist"> <li class="nav-item"> <a class="nav-link active" href="#preview10" data-bs-toggle="tab" role="tab" aria-controls="preview10" aria-selected="true"> <i class="bx bx-show-alt fs-base opacity-70 me-2"></i> Preview </a> </li> <li class="nav-item"> <a class="nav-link" href="#html10" data-bs-toggle="tab" role="tab" aria-controls="html10" aria-selected="false"> <i class="bx bx-code-alt fs-base opacity-70 me-2"></i> HTML </a> </li> </ul> </div> <div class="tab-content pt-1"> <div class="tab-pane fade show active" id="preview10" role="tabpanel" style="max-width: 25rem;"> <div class="mb-3"> <input class="form-control" type="text" placeholder="Readonly input here..." readonly> </div> <div class="mb-3"> <input class="form-control" type="text" id="disabled-input" placeholder="Disabled input here..." disabled> </div> <div class="mb-3"> <select class="form-select" id="disabled-select-input" disabled> <option>Disabled select here...</option> <option>Option item 1</option> <option>Option item 2</option> <option>Option item 3</option> </select> </div> </div> <div class="tab-pane fade" id="html10" role="tabpanel"> <pre class="line-numbers"><code class="lang-html"><!-- Readonly input --> <input class="form-control" type="text" placeholder="Readonly input here..." readonly> <!-- Disabled input --> <input class="form-control" type="text" placeholder="Disabled input here..." disabled> <!-- Disabled select --> <select class="form-select" disabled> <option>Disabled select here...</option> <option>Option item 1</option> <option>Option item 2</option> <option>Option item 3</option> </select></code></pre> </div> </div> </section> <!-- Inline form --> <section id="forms-inline" class="border-bottom py-5 ps-lg-2 ps-xxl-0"> <h2 class="h4">Inline form</h2> <div class="d-table"> <ul class="nav nav-tabs-alt" role="tablist"> <li class="nav-item"> <a class="nav-link active" href="#preview11" data-bs-toggle="tab" role="tab" aria-controls="preview11" aria-selected="true"> <i class="bx bx-show-alt fs-base opacity-70 me-2"></i> Preview </a> </li> <li class="nav-item"> <a class="nav-link" href="#html11" data-bs-toggle="tab" role="tab" aria-controls="html11" aria-selected="false"> <i class="bx bx-code-alt fs-base opacity-70 me-2"></i> HTML </a> </li> </ul> </div> <div class="tab-content pt-1"> <div class="tab-pane fade show active" id="preview11" role="tabpanel"> <form class="row row-cols-sm-auto g-3 align-items-center"> <div class="col-12"> <input class="form-control" id="inline-form-input" type="text" placeholder="Full name"> </div> <div class="col-12"> <select class="form-select" id="inline-form-select"> <option selected>Choose...</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> </div> <div class="col-12"> <div class="form-check"> <input class="form-check-input" id="inline-form-check" type="checkbox"> <label class="form-check-label" for="inline-form-check">Remember me</label> </div> </div> <div class="col-12"> <button class="btn btn-primary" type="submit">Submit</button> </div> </form> </div> <div class="tab-pane fade" id="html11" role="tabpanel"> <pre class="line-numbers"><code class="lang-html"><!-- Inline form --> <form class="row row-cols-sm-auto g-3 align-items-center"> <div class="col-12"> <input class="form-control" id="inline-form-input" type="text" placeholder="Username"> </div> <div class="col-12"> <select class="form-select" id="inline-form-select"> <option selected>Choose...</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> </div> <div class="col-12"> <div class="form-check"> <input class="form-check-input" id="inline-form-check" type="checkbox"> <label class="form-check-label" for="inline-form-check">Remember me</label> </div> </div> <div class="col-12"> <button class="btn btn-primary" type="submit">Submit</button> </div> </form></code></pre> </div> </div> </section> <!-- Help text --> <section id="forms-help-text" class="border-bottom py-5 ps-lg-2 ps-xxl-0"> <h2 class="h4">Help text</h2> <div class="d-table"> <ul class="nav nav-tabs-alt" role="tablist"> <li class="nav-item"> <a class="nav-link active" href="#preview12" data-bs-toggle="tab" role="tab" aria-controls="preview12" aria-selected="true"> <i class="bx bx-show-alt fs-base opacity-70 me-2"></i> Preview </a> </li> <li class="nav-item"> <a class="nav-link" href="#html12" data-bs-toggle="tab" role="tab" aria-controls="html12" aria-selected="false"> <i class="bx bx-code-alt fs-base opacity-70 me-2"></i> HTML </a> </li> </ul> </div> <div class="tab-content pt-1"> <div class="tab-pane fade show active" id="preview12" role="tabpanel"> <div style="max-width: 28rem;"> <label class="form-label" for="help-text-input">Password</label> <input class="form-control" type="password" id="help-text-input" placeholder="Your password here"> <div class="form-text">Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.</div> </div> </div> <div class="tab-pane fade" id="html12" role="tabpanel"> <pre class="line-numbers"><code class="lang-html"><!-- Form help text --> <label for="help-text-input" class="form-label">Password</label> <input class="form-control" type="password" id="help-text-input" placeholder="Your password here"> <div class="form-text">Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.</div></code></pre> </div> </div> </section> <!-- Validation: status text --> <section id="forms-validation-text" class="border-bottom py-5 ps-lg-2 ps-xxl-0"> <h2 class="h4">Validation: status text</h2> <div class="d-table"> <ul class="nav nav-tabs-alt" role="tablist"> <li class="nav-item"> <a class="nav-link active" href="#preview13" data-bs-toggle="tab" role="tab" aria-controls="preview13" aria-selected="true"> <i class="bx bx-show-alt fs-base opacity-70 me-2"></i> Preview </a> </li> <li class="nav-item"> <a class="nav-link" href="#html13" data-bs-toggle="tab" role="tab" aria-controls="html13" aria-selected="false"> <i class="bx bx-code-alt fs-base opacity-70 me-2"></i> HTML </a> </li> </ul> </div> <div class="tab-content pt-1"> <div class="tab-pane fade show active" id="preview13" role="tabpanel"> <form class="needs-validation" style="max-width: 55rem;" novalidate> <div class="row"> <div class="col-md-4 mb-3"> <label class="form-label" for="validationCustom01">First name</label> <input class="form-control" type="text" id="validationCustom01" placeholder="First name" value="John" required> <div class="valid-feedback">Looks good!</div> </div> <div class="col-md-4 mb-3"> <label class="form-label" for="validationCustom02">Last name</label> <input class="form-control" type="text" id="validationCustom02" placeholder="Last name" value="Doe" required> <div class="valid-feedback">Looks good!</div> </div> <div class="col-md-4 mb-3"> <label class="form-label" for="validationCustomUsername">Username</label> <input class="form-control" type="text" id="validationCustomUsername" placeholder="Username" required> <div class="invalid-feedback">Please choose a username.</div> <div class="valid-feedback">Looks good!</div> </div> </div> <div class="row"> <div class="col-md-6 mb-3"> <label class="form-label" for="validationCustom03">City</label> <select class="form-select" id="validationCustom03" required> <option value="">Choose city...</option> <option value="Dallas">Dallas</option> <option value="Houston">Houston</option> <option value="Los Angeles">Los Angeles</option> <option value="Miami">Miami</option> <option value="New York">New York</option> </select> <div class="invalid-feedback">Please provide a valid city.</div> <div class="valid-feedback">Looks good!</div> </div> <div class="col-md-3 mb-3"> <label class="form-label" for="validationCustom04">State</label> <select class="form-select" id="validationCustom04" required> <option value="">Choose state...</option> <option value="Arizona">Arizona</option> <option value="Colorado">Colorado</option> <option value="Florida">Florida</option> <option value="Indiana">Indiana</option> <option value="Kentucky">Kentucky</option> <option value="Texas">Texas</option> </select> <div class="invalid-feedback">Please provide a valid state.</div> <div class="valid-feedback">Looks good!</div> </div> <div class="col-md-3 mb-3"> <label class="form-label" for="validationCustom05">Zip</label> <input class="form-control" type="text" id="validationCustom05" placeholder="Zip" required> <div class="invalid-feedback">Please provide a valid zip.</div> <div class="valid-feedback">Looks good!</div> </div> </div> <div class="mb-3 py-2"> <div class="form-check"> <input class="form-check-input" type="checkbox" id="invalidCheck" required> <label class="form-check-label" for="invalidCheck">Agree to terms and conditions</label> <div class="invalid-feedback">You must agree before submitting.</div> </div> </div> <button class="btn btn-primary" type="submit">Submit Form</button> </form> </div> <div class="tab-pane fade" id="html13" role="tabpanel"> <pre class="line-numbers"><code class="lang-html"><!-- Forms validation: status text --> <form class="needs-validation" novalidate> <div class="row"> <div class="col-md-4 mb-3"> <label for="validationCustom01" class="form-label">First name</label> <input class="form-control" type="text" id="validationCustom01" placeholder="First name" value="John" required> <div class="valid-feedback">Looks good!</div> </div> <div class="col-md-4 mb-3"> <label for="validationCustom02" class="form-label">Last name</label> <input class="form-control" type="text" id="validationCustom02" placeholder="Last name" value="Doe" required> <div class="valid-feedback">Looks good!</div> </div> <div class="col-md-4 mb-3"> <label for="validationCustomUsername" class="form-label">Username</label> <input class="form-control" type="text" id="validationCustomUsername" placeholder="Username" required> <div class="invalid-feedback">Please choose a username.</div> <div class="valid-feedback">Looks good!</div> </div> </div> <div class="row"> <div class="col-md-6 mb-3"> <label for="validationCustom03" class="form-label">City</label> <select class="form-select" id="validationCustom03" required> <option value="">Choose city...</option> <option value="Dallas">Dallas</option> <option value="Houston">Houston</option> <option value="Los Angeles">Los Angeles</option> <option value="Miami">Miami</option> <option value="New York">New York</option> </select> <div class="invalid-feedback">Please provide a valid city.</div> <div class="valid-feedback">Looks good!</div> </div> <div class="col-md-3 mb-3"> <label for="validationCustom04" class="form-label">State</label> <select class="form-select" id="validationCustom04" required> <option value="">Choose state...</option> <option value="Arizona">Arizona</option> <option value="Colorado">Colorado</option> <option value="Florida">Florida</option> <option value="Indiana">Indiana</option> <option value="Kentucky">Kentucky</option> <option value="Texas">Texas</option> </select> <div class="invalid-feedback">Please provide a valid state.</div> <div class="valid-feedback">Looks good!</div> </div> <div class="col-md-3 mb-3"> <label for="validationCustom05" class="form-label">Zip</label> <input class="form-control" type="text" id="validationCustom05" placeholder="Zip" required> <div class="invalid-feedback">Please provide a valid zip.</div> <div class="valid-feedback">Looks good!</div> </div> </div> <div class="mb-3"> <div class="form-check"> <input class="form-check-input" type="checkbox" id="invalidCheck" required> <label class="form-check-label" for="invalidCheck">Agree to terms and conditions</label> <div class="invalid-feedback">You must agree before submitting.</div> </div> </div> <button class="btn btn-primary" type="submit">Submit Form</button> </form></code></pre> </div> </div> </section> <!-- Validation: status tooltips --> <section id="forms-validation-tooltips" class="border-bottom py-5 ps-lg-2 ps-xxl-0"> <h2 class="h4">Validation: status tooltips</h2> <div class="d-table"> <ul class="nav nav-tabs-alt" role="tablist"> <li class="nav-item"> <a class="nav-link active" href="#preview14" data-bs-toggle="tab" role="tab" aria-controls="preview14" aria-selected="true"> <i class="bx bx-show-alt fs-base opacity-70 me-2"></i> Preview </a> </li> <li class="nav-item"> <a class="nav-link" href="#html14" data-bs-toggle="tab" role="tab" aria-controls="html14" aria-selected="false"> <i class="bx bx-code-alt fs-base opacity-70 me-2"></i> HTML </a> </li> </ul> </div> <div class="tab-content pt-1"> <div class="tab-pane fade show active" id="preview14" role="tabpanel"> <form class="needs-validation" style="max-width: 55rem;" novalidate> <div class="row"> <div class="col-md-4 mb-3"> <label class="form-label" for="validationTooltip01">First name</label> <input class="form-control" type="text" id="validationTooltip01" placeholder="First name" value="John" required> <div class="valid-tooltip">Looks good!</div> </div> <div class="col-md-4 mb-3"> <label class="form-label" for="validationTooltip02">Last name</label> <input class="form-control" type="text" id="validationTooltip02" placeholder="Last name" value="Doe" required> <div class="valid-tooltip">Looks good!</div> </div> <div class="col-md-4 mb-3"> <label class="form-label" for="validationTooltipUsername">Username</label> <input class="form-control" type="text" id="validationTooltipUsername" placeholder="Username" required> <div class="invalid-tooltip">Please choose a username.</div> <div class="valid-tooltip">Looks good!</div> </div> </div> <div class="row"> <div class="col-md-6 mb-3"> <label class="form-label" for="validationTooltip03">City</label> <select class="form-select" id="validationTooltip03" required> <option value="">Choose city...</option> <option value="Dallas">Dallas</option> <option value="Houston">Houston</option> <option value="Los Angeles">Los Angeles</option> <option value="Miami">Miami</option> <option value="New York">New York</option> </select> <div class="invalid-tooltip">Please provide a valid city.</div> <div class="valid-tooltip">Looks good!</div> </div> <div class="col-md-3 mb-3"> <label class="form-label" for="validationTooltip04">State</label> <select class="form-select" id="validationTooltip04" required> <option value="">Choose state...</option> <option value="Arizona">Arizona</option> <option value="Colorado">Colorado</option> <option value="Florida">Florida</option> <option value="Indiana">Indiana</option> <option value="Kentucky">Kentucky</option> <option value="Texas">Texas</option> </select> <div class="invalid-tooltip">Please provide a valid state.</div> <div class="valid-tooltip">Looks good!</div> </div> <div class="col-md-3 mb-3"> <label class="form-label" for="validationTooltip05">Zip</label> <input class="form-control" type="text" id="validationTooltip05" placeholder="Zip" required> <div class="invalid-tooltip">Please provide a valid zip.</div> <div class="valid-tooltip">Looks good!</div> </div> </div> <div class="mb-3 py-2"> <div class="form-check"> <input class="form-check-input" type="checkbox" id="invalidCheck01" required> <label class="form-check-label" for="invalidCheck01">Agree to terms and conditions</label> <div class="invalid-tooltip">You must agree before submitting.</div> </div> </div> <button class="btn btn-primary" type="submit">Submit Form</button> </form> </div> <div class="tab-pane fade" id="html14" role="tabpanel"> <pre class="line-numbers"><code class="lang-html"><!-- Forms validation: status tooltips --> <form class="needs-validation" novalidate> <div class="row"> <div class="col-md-4 mb-3"> <label for="validationTooltip01" class="form-label">First name</label> <input class="form-control" type="text" id="validationTooltip01" placeholder="First name" value="John" required> <div class="valid-tooltip">Looks good!</div> </div> <div class="col-md-4 mb-3"> <label for="validationTooltip02" class="form-label">Last name</label> <input class="form-control" type="text" id="validationTooltip02" placeholder="Last name" value="Doe" required> <div class="valid-tooltip">Looks good!</div> </div> <div class="col-md-4 mb-3"> <label for="validationTooltipUsername" class="form-label">Username</label> <input class="form-control" type="text" id="validationTooltipUsername" placeholder="Username" required> <div class="invalid-tooltip">Please choose a username.</div> <div class="valid-tooltip">Looks good!</div> </div> </div> <div class="row"> <div class="col-md-6 mb-3"> <label for="validationTooltip03" class="form-label">City</label> <select class="form-select" id="validationTooltip03" required> <option value="">Choose city...</option> <option value="Dallas">Dallas</option> <option value="Houston">Houston</option> <option value="Los Angeles">Los Angeles</option> <option value="Miami">Miami</option> <option value="New York">New York</option> </select> <div class="invalid-tooltip">Please provide a valid city.</div> <div class="valid-tooltip">Looks good!</div> </div> <div class="col-md-3 mb-3"> <label for="validationTooltip04" class="form-label">State</label> <select class="form-select" id="validationTooltip04" required> <option value="">Choose state...</option> <option value="Arizona">Arizona</option> <option value="Colorado">Colorado</option> <option value="Florida">Florida</option> <option value="Indiana">Indiana</option> <option value="Kentucky">Kentucky</option> <option value="Texas">Texas</option> </select> <div class="invalid-tooltip">Please provide a valid state.</div> <div class="valid-tooltip">Looks good!</div> </div> <div class="col-md-3 mb-3"> <label for="validationTooltip05" class="form-label">Zip</label> <input class="form-control" type="text" id="validationTooltip05" placeholder="Zip" required> <div class="invalid-tooltip">Please provide a valid zip.</div> <div class="valid-tooltip">Looks good!</div> </div> </div> <div class="mb-3"> <div class="form-check"> <input class="form-check-input" type="checkbox" id="invalidCheck01" required> <label class="form-check-label" for="invalidCheck01">Agree to terms and conditions</label> <div class="invalid-tooltip">You must agree before submitting.</div> </div> </div> <button class="btn btn-primary" type="submit">Submit Form</button> </form></code></pre> </div> </div> </section> <!-- Input mask (Formatted content) --> <section id="forms-formatted" class="py-5 ps-lg-2 ps-xxl-0"> <h2 class="h4">Input mask (Formatted content)</h2> <div class="d-table"> <ul class="nav nav-tabs-alt" role="tablist"> <li class="nav-item"> <a class="nav-link active" href="#preview15" data-bs-toggle="tab" role="tab" aria-controls="preview15" aria-selected="true"> <i class="bx bx-show-alt fs-base opacity-70 me-2"></i> Preview </a> </li> <li class="nav-item"> <a class="nav-link" href="#html15" data-bs-toggle="tab" role="tab" aria-controls="html15" aria-selected="false"> <i class="bx bx-code-alt fs-base opacity-70 me-2"></i> HTML </a> </li> </ul> </div> <div class="tab-content pt-1"> <div class="tab-pane fade show active" id="preview15" role="tabpanel" style="max-width: 25rem;"> <div class="mb-3"> <label for="cardFormat" class="form-label">Card number</label> <div class="d-flex align-items-center border rounded-3"> <input type="text" class="form-control border-0 bg-transparent shadow-none" id="cardFormat" data-format='{"creditCard": true}' placeholder="Enter credit card number"> <div class="p-3"> <div class="credit-card-icon"></div> </div> </div> <ul class="list-unstyled fs-sm pt-2"> <li class="mb-1"> <span class='fw-semibold'>Amex:</span> starts with 34/37 </li> <li class="mb-1"> <span class='fw-semibold'>VISA:</span> starts with 4 </li> <li class="mb-1"> <span class='fw-semibold'>Diners Club:</span> starts with 300-305/309 </li> <li class="mb-1"> <span class='fw-semibold'>MasterCard:</span> starts with 51-55/22-27 </li> <li class="mb-1"> <span class='fw-semibold'>JCB:</span> starts with 35/2131/1800 </li> <li class="mb-1"> <span class='fw-semibold'>Discover:</span> starts with 6011/65/644-649 </li> </ul> </div> <div class="mb-3"> <label for="phoneFormat" class="form-label">Phone</label> <input type="tel" class="form-control" id="phoneFormat" data-format='{"numericOnly": true, "delimiters": ["+1 ", " ", " "], "blocks": [0, 3, 3, 2]}' placeholder="+1 ___ ___ __"> </div> <div class="mb-3"> <label for="dateFormat" class="form-label">Date</label> <input type="text" class="form-control" id="dateFormat" data-format='{"date": true, "delimiter": "-", "datePattern": ["Y", "m", "d"]}' placeholder="yyyy-mm-dd"> </div> <div class="mb-3"> <label for="dateShortFormat" class="form-label">Date short</label> <input type="text" class="form-control" id="dateShortFormat" data-format='{"date": true, "datePattern": ["m", "y"]}' placeholder="mm/yy"> </div> <div class="mb-3"> <label for="timeFormat" class="form-label">Time</label> <input type="text" class="form-control" id="timeFormat" data-format='{"time": true, "timePattern": ["h", "m"]}' placeholder="hh:mm"> </div> <div class="mb-3"> <label for="customFormat" class="form-label">Custom blocks</label> <input type="text" class="form-control" id="customFormat" data-format='{"blocks": [4, 3, 3, 4, 2], "delimiters": [".", " ", "/", "-"]}' placeholder="blocks:[4, 3, 3, 4, 2], delimiters: ['.', ' ', '/', '-']"> </div> <div class="mb-3"> <label for="prefixFormat" class="form-label">Prefix + uppercase</label> <input type="text" class="form-control" id="prefixFormat" data-format='{"prefix": "PREFIX", "delimiter": "-", "blocks": [6, 4, 5, 3], "uppercase": true}'> </div> </div> <div class="tab-pane fade" id="html15" role="tabpanel"> <pre class="line-numbers"><code class="lang-html"><!-- Format: Credit card number --> <div class="mb-3"> <label for="cardFormat" class="form-label">Card number</label> <div class="d-flex align-items-center border rounded-3"> <input type="text" class="form-control border-0 bg-transparent shadow-none" id="cardFormat" data-format='{"creditCard": true}' placeholder="Enter credit card number"> <div class="p-3"> <div class="credit-card-icon"></div> </div> </div> </div> <!-- Format: Phone --> <div class="mb-3"> <label for="phoneFormat" class="form-label">Phone</label> <input type="tel" class="form-control" id="phoneFormat" data-format='{"numericOnly": true, "delimiters": ["+1 ", " ", " "], "blocks": [0, 3, 3, 2]}' placeholder="+1 ___ ___ __"> </div> <!-- Format: Date long --> <div class="mb-3"> <label for="dateFormat" class="form-label">Date</label> <input type="text" class="form-control" id="dateFormat" data-format='{"date": true, "delimiter": "-", "datePattern": ["Y", "m", "d"]}' placeholder="yyyy-mm-dd"> </div> <!-- Format: Date short --> <div class="mb-3"> <label for="dateShortFormat" class="form-label">Date short</label> <input type="text" class="form-control" id="dateShortFormat" data-format='{"date": true, "datePattern": ["m", "y"]}' placeholder="mm/yy"> </div> <!-- Format: Time --> <div class="mb-3"> <label for="timeFormat" class="form-label">Time</label> <input type="text" class="form-control" id="timeFormat" data-format='{"time": true, "timePattern": ["h", "m"]}' placeholder="hh:mm"> </div> <!-- Format: Custom blocks --> <div class="mb-3"> <label for="customFormat" class="form-label">Custom blocks</label> <input type="text" class="form-control" id="customFormat" data-format='{"blocks": [4, 3, 3, 4, 2], "delimiters": [".", " ", "/", "-"]}' placeholder="blocks:[4, 3, 3, 4, 2], delimiters: ['.', ' ', '/', '-']"> </div> <!-- Format: Prefix + uppercase --> <div class="mb-3"> <label for="prefixFormat" class="form-label">Prefix + uppercase</label> <input type="text" class="form-control" id="prefixFormat" data-format='{"prefix": "PREFIX", "delimiter": "-", "blocks": [6, 4, 5, 3], "uppercase": true}'> </div></code></pre> </div> </div> </section> </div> </main> <!-- Jump to anchor navigation --> <aside id="jumpToNav" class="side-nav side-nav-end d-none d-xxl-block position-fixed top-0 end-0 vh-100 py-5" style="width: 20rem;"> <h3 class="fs-lg mt-5 pt-5">Jump to</h3> <ul class="nav"> <li class="nav-item"> <a href="#forms-types" class="nav-link" data-scroll data-scroll-offset="-6">Supported input types</a> </li> <li class="nav-item"> <a href="#forms-floating-labels" class="nav-link" data-scroll data-scroll-offset="-6">Floating labels</a> </li> <li class="nav-item"> <a href="#forms-password-toggle" class="nav-link" data-scroll data-scroll-offset="-6">Password visibility toggle</a> </li> <li class="nav-item"> <a href="#forms-checkboxes" class="nav-link" data-scroll data-scroll-offset="-6">Checkboxes</a> </li> <li class="nav-item"> <a href="#forms-radios" class="nav-link" data-scroll data-scroll-offset="-6">Radios</a> </li> <li class="nav-item"> <a href="#forms-switches" class="nav-link" data-scroll data-scroll-offset="-6">Switches</a> </li> <li class="nav-item"> <a href="#forms-theme-mode-switch" class="nav-link" data-scroll data-scroll-offset="-6">Theme mode switch</a> </li> <li class="nav-item"> <a href="#forms-range-slider" class="nav-link" data-scroll data-scroll-offset="-6">Range slider</a> </li> <li class="nav-item"> <a href="#forms-sizing" class="nav-link" data-scroll data-scroll-offset="-6">Sizing</a> </li> <li class="nav-item"> <a href="#forms-disabled" class="nav-link" data-scroll data-scroll-offset="-6">Readonly & disabled</a> </li> <li class="nav-item"> <a href="#forms-inline" class="nav-link" data-scroll data-scroll-offset="-6">Inline form</a> </li> <li class="nav-item"> <a href="#forms-help-text" class="nav-link" data-scroll data-scroll-offset="-6">Help text</a> </li> <li class="nav-item"> <a href="#forms-validation-text" class="nav-link" data-scroll data-scroll-offset="-6">Validation: status text</a> </li> <li class="nav-item"> <a href="#forms-validation-tooltips" class="nav-link" data-scroll data-scroll-offset="-6">Validation: status tooltips</a> </li> <li class="nav-item"> <a href="#forms-formatted" class="nav-link" data-scroll data-scroll-offset="-6">Input mask (Formatted content)</a> </li> </ul> </aside> <!-- Back to top button --> <a href="#top" class="btn-scroll-top" data-scroll> <span class="btn-scroll-top-tooltip text-muted fs-sm me-2">Top</span> <i class="btn-scroll-top-icon bx bx-chevron-up"></i> </a> <!-- Vendor Scripts --> <script src="../assets/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script> <script src="../assets/vendor/smooth-scroll/dist/smooth-scroll.polyfills.min.js"></script> <script src="../assets/vendor/swiper/swiper-bundle.min.js"></script> <script src="../assets/vendor/nouislider/dist/nouislider.min.js"></script> <script src="../assets/vendor/cleave.js/dist/cleave.min.js"></script> <script src="../assets/vendor/prismjs/components/prism-core.min.js"></script> <script src="../assets/vendor/prismjs/components/prism-markup.min.js"></script> <script src="../assets/vendor/prismjs/components/prism-clike.min.js"></script> <script src="../assets/vendor/prismjs/plugins/toolbar/prism-toolbar.min.js"></script> <script src="../assets/vendor/prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script> <script src="../assets/vendor/prismjs/plugins/line-numbers/prism-line-numbers.min.js"></script> <!-- Main Theme Script --> <script src="../assets/js/theme.min.js"></script> </body> </html>