Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-22 01:44:25 +04:00
Code Issues Projects Releases Wiki Activity
Files
403b1d913238a86d89c105db13f988f8201c4453
tabler/demo/docs/form-elements.html
codecalm 403b1d9132 version v1.0.0-alpha.3
2020-02-04 09:09:28 +01:00

2184 lines
208 KiB
HTML
Raw Blame History

<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.3
* @link https://github.com/tabler/tabler
* Copyright 2018-2019 The Tabler Authors
* Copyright 2018-2019 codecalm.net Paweł Kuna
* Licensed under MIT (https://tabler.io/license)
-->
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<meta name="msapplication-TileColor" content="#206bc4"/>
<meta name="theme-color" content="#206bc4"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="mobile-web-app-capable" content="yes"/>
<meta name="HandheldFriendly" content="True"/>
<meta name="MobileOptimized" content="320"/>
<meta name="robots" content="noindex,nofollow,noarchive"/>
<link rel="icon" href="../favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
<title>Form Elements - Documentation - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
<!-- Libs CSS -->
<link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1580803658" rel="stylesheet"/>
<link href="../dist/libs/selectize/dist/css/selectize.css?1580803658" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/core/main.min.css?1580803658" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/daygrid/main.min.css?1580803658" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/timegrid/main.min.css?1580803658" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/list/main.min.css?1580803658" rel="stylesheet"/>
<link href="../dist/libs/flatpickr/dist/flatpickr.min.css?1580803658" rel="stylesheet"/>
<link href="../dist/libs/nouislider/distribute/nouislider.min.css?1580803658" rel="stylesheet"/>
<!-- Tabler Core -->
<link href="../dist/css/tabler.min.css?1580803658" rel="stylesheet"/>
<!-- Tabler Plugins -->
<link href="../dist/css/tabler-flags.min.css?1580803658" rel="stylesheet"/>
<link href="../dist/css/tabler-payments.min.css?1580803658" rel="stylesheet"/>
<link href="../dist/css/tabler-buttons.min.css?1580803658" rel="stylesheet"/>
<link href="../dist/css/demo.min.css?1580803658" rel="stylesheet"/>
</head>
<body class="antialiased">
<div class="page">
<nav class="navbar navbar-expand-lg navbar-dark navbar-primary" id="navbar-primary">
<div class="container">
<a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
<img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
<img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
</a>
<div class="navbar-collapse collapse">
<h6 class="navbar-heading">Navigation</h6>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="../index.html" >
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
</span>
<span class="nav-link-title">Home</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../form-elements.html" >
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
</span>
<span class="nav-link-title">Forms</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
aria-expanded="false" >
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
</span>
<span class="nav-link-title">Base</span>
</a>
<ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns dropdown-menu-columns-2">
<li >
<a class="dropdown-item" href="../blank.html" >
Starter page
</a>
</li>
<li >
<a class="dropdown-item" href="../buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="../cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="../charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="../datatables.html" >
Data Tables
</a>
</li>
<li >
<a class="dropdown-item" href="../calendar.html" >
Calendar
</a>
</li>
<li >
<a class="dropdown-item" href="../carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="../lists.html" >
Lists
</a>
</li>
<li >
<a class="dropdown-item" href="../users.html" >
Users
</a>
</li>
<li >
<a class="dropdown-item" href="../gallery.html" >
Gallery
</a>
</li>
<li >
<a class="dropdown-item" href="../profile.html" >
Profile
</a>
</li>
<li >
<a class="dropdown-item" href="../music.html" >
Music
</a>
</li>
<li class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
<a href="../sign-in.html" class="dropdown-item">Sign in</a>
<a href="../sign-up.html" class="dropdown-item">Sign up</a>
<a href="../forgot-password.html" class="dropdown-item">Forgot password</a>
<a href="../terms-of-service.html" class="dropdown-item">Terms of service</a>
</div>
</li>
<li class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
<a href="../400.html" class="dropdown-item">400 page</a>
<a href="../401.html" class="dropdown-item">401 page</a>
<a href="../403.html" class="dropdown-item">403 page</a>
<a href="../404.html" class="dropdown-item">404 page</a>
<a href="../500.html" class="dropdown-item">500 page</a>
<a href="../503.html" class="dropdown-item">503 page</a>
<a href="../maintenance.html" class="dropdown-item">Maintenance page</a>
</div>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="../layouts.html" >
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
</span>
<span class="nav-link-title">Layouts</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
aria-expanded="false" >
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
</span>
<span class="nav-link-title">Extra</span>
</a>
<ul class="dropdown-menu dropdown-menu-arrow">
<li >
<a class="dropdown-item" href="../invoice.html" >
Invoice
</a>
</li>
<li >
<a class="dropdown-item" href="../blog.html" >
Blog cards
</a>
</li>
<li >
<a class="dropdown-item" href="../snippets.html" >
Snippets
</a>
</li>
<li >
<a class="dropdown-item" href="../search-results.html" >
Search results
</a>
</li>
</ul>
</li>
<li class="nav-item active">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
aria-expanded="true" >
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
</span>
<span class="nav-link-title">Docs</span>
</a>
<ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="../docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/countup.html" >
Countup
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/layout.html" >
Layout
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
<li class="nav-item d-none-navbar-vertical" title="Soon" data-toggle="tooltip">
<a href="#" class="nav-link disabled">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
</span>
<span class="nav-link-title">Customize</span>
</a>
</li>
</ul>
<h6 class="navbar-heading mt-4">Tools</h6>
<div class="navbar-side d-none-navbar-vertical-narrow">
<div class="d-none d-xl-block ml-auto">
<form action="." method="get">
<div class="input-icon">
<span class="input-icon-addon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
</span>
<input type="text" class="form-control" placeholder="Search…">
</div>
</form>
</div>
<a href="#" class="btn btn-primary d-none-navbar-horizontal btn-block">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
Customize
</a>
</div>
</div>
</div>
</nav>
<nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
<div class="container">
<a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
<img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
<img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
</a>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
Action
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
Another action
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
Separated link</a>
</div>
</li>
</ul>
</div>
</nav>
<div class="content">
<main class="container">
<!-- Page title -->
<div class="page-header">
<div class="row align-items-center">
<div class="col-auto">
<h2 class="page-title">
Documentation
</h2>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-lg-3 order-lg-1 mb-4">
<a href="https://github.com/tabler/tabler" class="btn btn-secondary mb-4 btn-block" target="_blank" rel="noreferrer">
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon text-github" fill="currentColor">
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
</svg>
Browse source code
</a>
<div class="list-group list-group-transparent mb-0">
<a href="../docs/index.html" class="list-group-item list-group-item-action">
Introduction
</a>
<a href="../docs/alerts.html" class="list-group-item list-group-item-action">
Alerts
</a>
<a href="../docs/autosize.html" class="list-group-item list-group-item-action">
Autosize
</a>
<a href="../docs/avatars.html" class="list-group-item list-group-item-action">
Avatars
</a>
<a href="../docs/badges.html" class="list-group-item list-group-item-action">
Badges
</a>
<a href="../docs/breadcrumb.html" class="list-group-item list-group-item-action">
Breadcrumb
</a>
<a href="../docs/buttons.html" class="list-group-item list-group-item-action">
Buttons
</a>
<a href="../docs/cards.html" class="list-group-item list-group-item-action">
Cards
</a>
<a href="../docs/carousel.html" class="list-group-item list-group-item-action">
Carousel
</a>
<a href="../docs/colors.html" class="list-group-item list-group-item-action">
Colors
</a>
<a href="../docs/countup.html" class="list-group-item list-group-item-action">
Countup
</a>
<a href="../docs/cursors.html" class="list-group-item list-group-item-action">
Cursors
</a>
<a href="../docs/charts.html" class="list-group-item list-group-item-action">
Charts
</a>
<a href="../docs/divider.html" class="list-group-item list-group-item-action">
Divider
</a>
<a href="../docs/empty.html" class="list-group-item list-group-item-action">
Empty states
</a>
<a href="../docs/flags.html" class="list-group-item list-group-item-action">
Flags
</a>
<a href="../docs/form-elements.html" class="list-group-item list-group-item-action active">
Form elements
</a>
<a href="../docs/form-helpers.html" class="list-group-item list-group-item-action">
Form helpers
</a>
<a href="../docs/input-mask.html" class="list-group-item list-group-item-action">
Form input mask
</a>
<a href="../docs/layout.html" class="list-group-item list-group-item-action">
Layout
</a>
<a href="../docs/progress.html" class="list-group-item list-group-item-action">
Progress
</a>
<a href="../docs/payments.html" class="list-group-item list-group-item-action">
Payments
</a>
<a href="../docs/range-slider.html" class="list-group-item list-group-item-action">
Range slider
</a>
<a href="../docs/ribbons.html" class="list-group-item list-group-item-action">
Ribbons
<span class="badge bg-green ml-auto">New</span>
</a>
<a href="../docs/spinners.html" class="list-group-item list-group-item-action">
Spinners
</a>
<a href="../docs/steps.html" class="list-group-item list-group-item-action">
Steps
</a>
<a href="../docs/tables.html" class="list-group-item list-group-item-action">
Tables
</a>
<a href="../docs/tabs.html" class="list-group-item list-group-item-action">
Tabs
</a>
<a href="../docs/timelines.html" class="list-group-item list-group-item-action">
Timelines
</a>
<a href="../docs/toasts.html" class="list-group-item list-group-item-action">
Toasts
</a>
<a href="../docs/tooltips.html" class="list-group-item list-group-item-action">
Tooltips
</a>
<a href="../docs/typography.html" class="list-group-item list-group-item-action">
Typography
</a>
</div>
</div>
<div class="col-lg-9">
<div class="card">
<div class="card-body p-md-6 p-xl-7">
<div class="markdown">
<p class="mb-4 float-right">
<a href="https://getbootstrap.com/docs/4.4/components/forms/" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon pr-1 text-blue"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
Bootstrap documentation
</a>
</p>
<h2 class="h1 mt-0 mb-3">Form Elements
</h2>
<h3 id="classic-input">Classic Input</h3>
<div class="example">
<div class="mb-2">
<label class="form-label">Static</label>
<div class="form-control-plaintext">Username</div>
</div>
<div class="mb-2">
<label class="form-label">Text</label>
<input type="text" class="form-control" name="example-text-input" placeholder="Text.." />
</div>
<div class="mb-2">
<label class="form-label">Disabled</label>
<input type="text" class="form-control" name="example-disabled-input" placeholder="Disabled.." value="Well, she turned me into a newt." disabled="" />
</div>
<div class="mb-2">
<label class="form-label">Readonly</label>
<input type="text" class="form-control" name="example-disabled-input" placeholder="Disabled.." value="Well, how'd you become king, then?" readonly="" />
</div>
</div>
<div class="example-code language-html" data-lang="html">
<pre class="highlight"><code><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-2"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Static<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-control-plaintext"</span><span class="nt">&gt;</span>Username<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-2"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Text<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">name=</span><span class="s">"example-text-input"</span> <span class="na">placeholder=</span><span class="s">"Text.."</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-2"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Disabled<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">name=</span><span class="s">"example-disabled-input"</span> <span class="na">placeholder=</span><span class="s">"Disabled.."</span>
<span class="na">value=</span><span class="s">"Well, she turned me into a newt."</span> <span class="na">disabled</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-2"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Readonly<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">name=</span><span class="s">"example-disabled-input"</span> <span class="na">placeholder=</span><span class="s">"Disabled.."</span>
<span class="na">value=</span><span class="s">"Well, how'd you become king, then?"</span> <span class="na">readonly</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
<h3 id="password-and-validation">Password and validation</h3>
<div class="example">
<div class="mb-2">
<label class="form-label">Password</label>
<input type="password" class="form-control" name="example-password-input" placeholder="Password.." />
</div>
<div class="mb-2">
<label class="form-label">Valid State</label>
<input type="text" class="form-control is-valid" name="example-text-input-valid" placeholder="Valid State.." />
<input type="text" class="form-control mt-3 state-valid" value="Valid state" />
</div>
<div class="mb-2">
<label class="form-label">Invalid State</label>
<input type="text" class="form-control is-invalid" name="example-text-input-invalid" placeholder="Invalid State.." />
<div class="invalid-feedback">Invalid feedback</div>
<input type="text" class="form-control mt-3 state-invalid" value="Invalid state" />
</div>
</div>
<div class="example-code language-html" data-lang="html">
<pre class="highlight"><code><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-2"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Password<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"password"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">name=</span><span class="s">"example-password-input"</span> <span class="na">placeholder=</span><span class="s">"Password.."</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-2"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Valid State<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control is-valid"</span> <span class="na">name=</span><span class="s">"example-text-input-valid"</span>
<span class="na">placeholder=</span><span class="s">"Valid State.."</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control mt-3 state-valid"</span> <span class="na">value=</span><span class="s">"Valid state"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-2"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Invalid State<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control is-invalid"</span> <span class="na">name=</span><span class="s">"example-text-input-invalid"</span>
<span class="na">placeholder=</span><span class="s">"Invalid State.."</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"invalid-feedback"</span><span class="nt">&gt;</span>Invalid feedback<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control mt-3 state-invalid"</span> <span class="na">value=</span><span class="s">"Invalid state"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
<h3 id="input-size">Input size</h3>
<div class="mb-3">
<label class="form-label">Input sizing</label>
<input class="form-control form-control-lg mb-2" type="text" placeholder=".form-control-lg" />
<input class="form-control mb-2" type="text" placeholder="Default input" />
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" />
</div>
<h3 id="select">Select</h3>
<div class="example">
<div class="mb-3">
<div class="form-label">Select</div>
<select class="form-select">
<option value="1">Germany</option>
<option value="2">USA</option>
<option value="3">Poland</option>
</select>
</div>
</div>
<div class="example-code language-html" data-lang="html">
<pre class="highlight"><code><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Select<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;select</span> <span class="na">class=</span><span class="s">"form-select"</span><span class="nt">&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1"</span><span class="nt">&gt;</span>Germany<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"2"</span><span class="nt">&gt;</span>USA<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"3"</span><span class="nt">&gt;</span>Poland<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;/select&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
<h3 id="textarea">Textarea</h3>
<div class="example">
<div class="mb-2">
<label class="form-label">Textarea <span class="form-label-description">56/100</span></label>
<textarea class="form-control" name="example-textarea-input" rows="6" placeholder="Content..">Oh! Come and see the violence inherent in the system! Help, help, I'm being repressed! We shall say 'Ni' again to you, if you do not appease us. I'm not a witch. I'm not a witch. Camelot!</textarea>
</div>
</div>
<div class="example-code language-html" data-lang="html">
<pre class="highlight"><code><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-2"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Textarea <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-label-description"</span><span class="nt">&gt;</span>56/100<span class="nt">&lt;/span&gt;&lt;/label&gt;</span>
<span class="nt">&lt;textarea</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">name=</span><span class="s">"example-textarea-input"</span> <span class="na">rows=</span><span class="s">"6"</span> <span class="na">placeholder=</span><span class="s">"Content.."</span><span class="nt">&gt;</span>Oh! Come and see the violence inherent in the system! Help, help, I'm being repressed! We shall say 'Ni' again to you, if you do not appease us. I'm not a witch. I'm not a witch. Camelot!<span class="nt">&lt;/textarea&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
<h3 id="image-check">Image check</h3>
<div class="example">
<div class="mb-3">
<label class="form-label">Image Check</label>
<div class="row row-sm">
<div class="col-6 col-sm-4">
<label class="form-imagecheck mb-2">
<input name="form-imagecheck" type="checkbox" value="1" class="form-imagecheck-input" />
<span class="form-imagecheck-figure">
<img src="../static/photos/1b73704b282a8ec6.jpg" alt="Breakfast served with tea, bread and eggs" class="form-imagecheck-image" />
</span>
</label>
</div>
<div class="col-6 col-sm-4">
<label class="form-imagecheck mb-2">
<input name="form-imagecheck" type="checkbox" value="2" class="form-imagecheck-input" checked="" />
<span class="form-imagecheck-figure">
<img src="../static/photos/3d2998219313cd37.jpg" alt="Book, fairy lights" class="form-imagecheck-image" />
</span>
</label>
</div>
<div class="col-6 col-sm-4">
<label class="form-imagecheck mb-2">
<input name="form-imagecheck" type="checkbox" value="3" class="form-imagecheck-input" />
<span class="form-imagecheck-figure">
<img src="../static/photos/6ab3200b14549f8a.jpg" alt="Healthy Dinner" class="form-imagecheck-image" />
</span>
</label>
</div>
<div class="col-6 col-sm-4">
<label class="form-imagecheck mb-2">
<input name="form-imagecheck" type="checkbox" value="4" class="form-imagecheck-input" checked="" />
<span class="form-imagecheck-figure">
<img src="../static/photos/6d35d9a2bd6c63c2.jpg" alt="Aperol Spritz is a cocktail consisting of prosecco, aperitif and soda water" class="form-imagecheck-image" />
</span>
</label>
</div>
<div class="col-6 col-sm-4">
<label class="form-imagecheck mb-2">
<input name="form-imagecheck" type="checkbox" value="5" class="form-imagecheck-input" />
<span class="form-imagecheck-figure">
<img src="../static/photos/8a26974ee6444acd.jpg" alt="Beautiful blonde woman on a wooden pier by the lake" class="form-imagecheck-image" />
</span>
</label>
</div>
<div class="col-6 col-sm-4">
<label class="form-imagecheck mb-2">
<input name="form-imagecheck" type="checkbox" value="6" class="form-imagecheck-input" />
<span class="form-imagecheck-figure">
<img src="../static/photos/8c13ad59f739558c.jpg" alt="Still life of mandarin oranges with leaves" class="form-imagecheck-image" />
</span>
</label>
</div>
<div class="col-6 col-sm-4">
<label class="form-imagecheck mb-2">
<input name="form-imagecheck" type="checkbox" value="7" class="form-imagecheck-input" checked="" />
<span class="form-imagecheck-figure">
<img src="../static/photos/8fdeb4785d2b82ef.jpg" alt="Blonde woman having a healthy snack at the wooden pier" class="form-imagecheck-image" />
</span>
</label>
</div>
<div class="col-6 col-sm-4">
<label class="form-imagecheck mb-2">
<input name="form-imagecheck" type="checkbox" value="8" class="form-imagecheck-input" />
<span class="form-imagecheck-figure">
<img src="../static/photos/9f36332564ca271d.jpg" alt="Woman working on a laptop while enjoying a breakfast coffee and chocolate in bed" class="form-imagecheck-image" />
</span>
</label>
</div>
<div class="col-6 col-sm-4">
<label class="form-imagecheck mb-2">
<input name="form-imagecheck" type="checkbox" value="9" class="form-imagecheck-input" />
<span class="form-imagecheck-figure">
<img src="../static/photos/35b88fc04a518c1b.jpg" alt="Overhead view of macarons on a marble slab" class="form-imagecheck-image" />
</span>
</label>
</div>
</div>
</div>
</div>
<div class="example-code language-html" data-lang="html">
<pre class="highlight"><code><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Image Check<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row row-sm"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-6 col-sm-4"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-imagecheck mb-2"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"form-imagecheck"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"1"</span> <span class="na">class=</span><span class="s">"form-imagecheck-input"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-imagecheck-figure"</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"./static/photos/1b73704b282a8ec6.jpg"</span> <span class="na">alt=</span><span class="s">"Breakfast served with tea, bread and eggs"</span> <span class="na">class=</span><span class="s">"form-imagecheck-image"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-6 col-sm-4"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-imagecheck mb-2"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"form-imagecheck"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"2"</span> <span class="na">class=</span><span class="s">"form-imagecheck-input"</span> <span class="na">checked</span><span class="nt">/&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-imagecheck-figure"</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"./static/photos/3d2998219313cd37.jpg"</span> <span class="na">alt=</span><span class="s">"Book, fairy lights"</span> <span class="na">class=</span><span class="s">"form-imagecheck-image"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-6 col-sm-4"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-imagecheck mb-2"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"form-imagecheck"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"3"</span> <span class="na">class=</span><span class="s">"form-imagecheck-input"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-imagecheck-figure"</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"./static/photos/6ab3200b14549f8a.jpg"</span> <span class="na">alt=</span><span class="s">"Healthy Dinner"</span> <span class="na">class=</span><span class="s">"form-imagecheck-image"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-6 col-sm-4"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-imagecheck mb-2"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"form-imagecheck"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"4"</span> <span class="na">class=</span><span class="s">"form-imagecheck-input"</span> <span class="na">checked</span><span class="nt">/&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-imagecheck-figure"</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"./static/photos/6d35d9a2bd6c63c2.jpg"</span> <span class="na">alt=</span><span class="s">"Aperol Spritz is a cocktail consisting of prosecco, aperitif and soda water"</span> <span class="na">class=</span><span class="s">"form-imagecheck-image"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-6 col-sm-4"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-imagecheck mb-2"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"form-imagecheck"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"5"</span> <span class="na">class=</span><span class="s">"form-imagecheck-input"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-imagecheck-figure"</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"./static/photos/8a26974ee6444acd.jpg"</span> <span class="na">alt=</span><span class="s">"Beautiful blonde woman on a wooden pier by the lake"</span> <span class="na">class=</span><span class="s">"form-imagecheck-image"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-6 col-sm-4"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-imagecheck mb-2"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"form-imagecheck"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"6"</span> <span class="na">class=</span><span class="s">"form-imagecheck-input"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-imagecheck-figure"</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"./static/photos/8c13ad59f739558c.jpg"</span> <span class="na">alt=</span><span class="s">"Still life of mandarin oranges with leaves"</span> <span class="na">class=</span><span class="s">"form-imagecheck-image"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-6 col-sm-4"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-imagecheck mb-2"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"form-imagecheck"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"7"</span> <span class="na">class=</span><span class="s">"form-imagecheck-input"</span> <span class="na">checked</span><span class="nt">/&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-imagecheck-figure"</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"./static/photos/8fdeb4785d2b82ef.jpg"</span> <span class="na">alt=</span><span class="s">"Blonde woman having a healthy snack at the wooden pier"</span> <span class="na">class=</span><span class="s">"form-imagecheck-image"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-6 col-sm-4"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-imagecheck mb-2"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"form-imagecheck"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"8"</span> <span class="na">class=</span><span class="s">"form-imagecheck-input"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-imagecheck-figure"</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"./static/photos/9f36332564ca271d.jpg"</span> <span class="na">alt=</span><span class="s">"Woman working on a laptop while enjoying a breakfast coffee and chocolate in bed"</span> <span class="na">class=</span><span class="s">"form-imagecheck-image"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-6 col-sm-4"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-imagecheck mb-2"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"form-imagecheck"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"9"</span> <span class="na">class=</span><span class="s">"form-imagecheck-input"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-imagecheck-figure"</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"./static/photos/35b88fc04a518c1b.jpg"</span> <span class="na">alt=</span><span class="s">"Overhead view of macarons on a marble slab"</span> <span class="na">class=</span><span class="s">"form-imagecheck-image"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
<h3 id="input-color">Input color</h3>
<div class="example">
<div class="mb-3">
<label class="form-label">Color Input</label>
<div class="row row-sm">
<div class="col-auto">
<label class="form-colorinput">
<input name="color" type="checkbox" value="dark" class="form-colorinput-input" />
<span class="form-colorinput-color bg-dark"></span>
</label>
</div>
<div class="col-auto">
<label class="form-colorinput form-colorinput-light">
<input name="color" type="checkbox" value="white" class="form-colorinput-input" checked="" />
<span class="form-colorinput-color bg-white"></span>
</label>
</div>
<div class="col-auto">
<label class="form-colorinput">
<input name="color" type="checkbox" value="blue" class="form-colorinput-input" checked="" />
<span class="form-colorinput-color bg-blue"></span>
</label>
</div>
<div class="col-auto">
<label class="form-colorinput">
<input name="color" type="checkbox" value="azure" class="form-colorinput-input" checked="" />
<span class="form-colorinput-color bg-azure"></span>
</label>
</div>
<div class="col-auto">
<label class="form-colorinput">
<input name="color" type="checkbox" value="indigo" class="form-colorinput-input" />
<span class="form-colorinput-color bg-indigo"></span>
</label>
</div>
<div class="col-auto">
<label class="form-colorinput">
<input name="color" type="checkbox" value="purple" class="form-colorinput-input" />
<span class="form-colorinput-color bg-purple"></span>
</label>
</div>
<div class="col-auto">
<label class="form-colorinput">
<input name="color" type="checkbox" value="pink" class="form-colorinput-input" />
<span class="form-colorinput-color bg-pink"></span>
</label>
</div>
<div class="col-auto">
<label class="form-colorinput">
<input name="color" type="checkbox" value="red" class="form-colorinput-input" />
<span class="form-colorinput-color bg-red"></span>
</label>
</div>
<div class="col-auto">
<label class="form-colorinput">
<input name="color" type="checkbox" value="orange" class="form-colorinput-input" />
<span class="form-colorinput-color bg-orange"></span>
</label>
</div>
<div class="col-auto">
<label class="form-colorinput">
<input name="color" type="checkbox" value="yellow" class="form-colorinput-input" />
<span class="form-colorinput-color bg-yellow"></span>
</label>
</div>
<div class="col-auto">
<label class="form-colorinput">
<input name="color" type="checkbox" value="lime" class="form-colorinput-input" />
<span class="form-colorinput-color bg-lime"></span>
</label>
</div>
</div>
</div>
</div>
<div class="example-code language-html" data-lang="html">
<pre class="highlight"><code><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Color Input<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row row-sm"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"dark"</span> <span class="na">class=</span><span class="s">"form-colorinput-input"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-colorinput-color bg-dark"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput form-colorinput-light"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"white"</span> <span class="na">class=</span><span class="s">"form-colorinput-input"</span> <span class="na">checked</span><span class="nt">/&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-colorinput-color bg-white"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"blue"</span> <span class="na">class=</span><span class="s">"form-colorinput-input"</span> <span class="na">checked</span><span class="nt">/&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-colorinput-color bg-blue"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"azure"</span> <span class="na">class=</span><span class="s">"form-colorinput-input"</span> <span class="na">checked</span><span class="nt">/&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-colorinput-color bg-azure"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"indigo"</span> <span class="na">class=</span><span class="s">"form-colorinput-input"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-colorinput-color bg-indigo"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"purple"</span> <span class="na">class=</span><span class="s">"form-colorinput-input"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-colorinput-color bg-purple"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"pink"</span> <span class="na">class=</span><span class="s">"form-colorinput-input"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-colorinput-color bg-pink"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"red"</span> <span class="na">class=</span><span class="s">"form-colorinput-input"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-colorinput-color bg-red"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"orange"</span> <span class="na">class=</span><span class="s">"form-colorinput-input"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-colorinput-color bg-orange"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"yellow"</span> <span class="na">class=</span><span class="s">"form-colorinput-input"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-colorinput-color bg-yellow"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"lime"</span> <span class="na">class=</span><span class="s">"form-colorinput-input"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-colorinput-color bg-lime"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
<h3 id="input-color-picker">Input color picker</h3>
<div class="example">
<div class="mb-3">
<label class="form-label">Color picker</label>
<input type="color" class="form-control form-control-color" value="#206bc4" title="Choose your color" />
</div>
</div>
<div class="example-code language-html" data-lang="html">
<pre class="highlight"><code><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Color picker<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"color"</span> <span class="na">class=</span><span class="s">"form-control form-control-color"</span> <span class="na">value=</span><span class="s">"#206bc4"</span> <span class="na">title=</span><span class="s">"Choose your color"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
<h3 id="datalists">Datalists</h3>
<div class="example">
<div class="mb-3">
<label class="form-label">Datalist example</label>
<input class="form-control" list="datalistOptions" placeholder="Type to search..." />
<datalist id="datalistOptions">
<option value="Aruba" />
<option value="Afghanistan" />
<option value="Angola" />
<option value="Anguilla" />
<option value="Albania" />
<option value="Andorra" />
<option value="United Arab Emirates" />
<option value="Argentina" />
<option value="Armenia" />
<option value="American Samoa" />
</datalist>
</div>
</div>
<div class="example-code language-html" data-lang="html">
<pre class="highlight"><code><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Datalist example<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">list=</span><span class="s">"datalistOptions"</span> <span class="na">placeholder=</span><span class="s">"Type to search..."</span><span class="nt">/&gt;</span>
<span class="nt">&lt;datalist</span> <span class="na">id=</span><span class="s">"datalistOptions"</span><span class="nt">&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"Aruba"</span><span class="nt">/&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"Afghanistan"</span><span class="nt">/&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"Angola"</span><span class="nt">/&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"Anguilla"</span><span class="nt">/&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"Albania"</span><span class="nt">/&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"Andorra"</span><span class="nt">/&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"United Arab Emirates"</span><span class="nt">/&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"Argentina"</span><span class="nt">/&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"Armenia"</span><span class="nt">/&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"American Samoa"</span><span class="nt">/&gt;</span>
<span class="nt">&lt;/datalist&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
<h3 id="custom-selectboxes">Custom selectboxes</h3>
<div class="example">
<div class="mb-3">
<label class="form-label">Simple selectgroup</label>
<div class="form-selectgroup">
<label class="form-selectgroup-item">
<input type="checkbox" name="name" value="HTML" class="form-selectgroup-input" checked="" />
<span class="form-selectgroup-box">HTML</span>
</label>
<label class="form-selectgroup-item">
<input type="checkbox" name="name" value="CSS" class="form-selectgroup-input" />
<span class="form-selectgroup-box">CSS</span>
</label>
<label class="form-selectgroup-item">
<input type="checkbox" name="name" value="PHP" class="form-selectgroup-input" />
<span class="form-selectgroup-box">PHP</span>
</label>
<label class="form-selectgroup-item">
<input type="checkbox" name="name" value="JavaScript" class="form-selectgroup-input" />
<span class="form-selectgroup-box">JavaScript</span>
</label>
</div>
</div>
<div class="mb-3">
<label class="form-label">Icon input</label>
<div class="form-selectgroup">
<label class="form-selectgroup-item">
<input type="checkbox" name="name" value="sun" class="form-selectgroup-input" checked="" />
<span class="form-selectgroup-box"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
</span>
</label>
<label class="form-selectgroup-item">
<input type="checkbox" name="name" value="moon" class="form-selectgroup-input" />
<span class="form-selectgroup-box"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
</span>
</label>
<label class="form-selectgroup-item">
<input type="checkbox" name="name" value="cloud-rain" class="form-selectgroup-input" />
<span class="form-selectgroup-box"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16" y1="13" x2="16" y2="21"></line><line x1="8" y1="13" x2="8" y2="21"></line><line x1="12" y1="15" x2="12" y2="23"></line><path d="M20 16.58A5 5 0 0 0 18 7h-1.26A8 8 0 1 0 4 15.25"></path></svg>
</span>
</label>
<label class="form-selectgroup-item">
<input type="checkbox" name="name" value="cloud" class="form-selectgroup-input" />
<span class="form-selectgroup-box"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"></path></svg>
</span>
</label>
<label class="form-selectgroup-item">
<input type="checkbox" name="name" value="Other" class="form-selectgroup-input" />
<span class="form-selectgroup-box">Other</span>
</label>
</div>
</div>
<div class="mb-3">
<label class="form-label">Selectgroup with icons and text</label>
<div class="form-selectgroup">
<label class="form-selectgroup-item">
<input type="radio" name="icons" value="home" class="form-selectgroup-input" checked="" />
<span class="form-selectgroup-box"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-1"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
Home</span>
</label>
<label class="form-selectgroup-item">
<input type="radio" name="icons" value="users" class="form-selectgroup-input" />
<span class="form-selectgroup-box"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-1"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
Users</span>
</label>
<label class="form-selectgroup-item">
<input type="radio" name="icons" value="circle" class="form-selectgroup-input" />
<span class="form-selectgroup-box"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-1"><circle cx="12" cy="12" r="10"></circle></svg>
Circle</span>
</label>
<label class="form-selectgroup-item">
<input type="radio" name="icons" value="square" class="form-selectgroup-input" />
<span class="form-selectgroup-box"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-1"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect></svg>
Square</span>
</label>
</div>
</div>
<div class="mb-3">
<label class="form-label">Different style</label>
<div class="form-selectgroup form-selectgroup-pills">
<label class="form-selectgroup-item">
<input type="checkbox" name="name" value="HTML" class="form-selectgroup-input" checked="" />
<span class="form-selectgroup-box">HTML</span>
</label>
<label class="form-selectgroup-item">
<input type="checkbox" name="name" value="CSS" class="form-selectgroup-input" />
<span class="form-selectgroup-box">CSS</span>
</label>
<label class="form-selectgroup-item">
<input type="checkbox" name="name" value="PHP" class="form-selectgroup-input" />
<span class="form-selectgroup-box">PHP</span>
</label>
<label class="form-selectgroup-item">
<input type="checkbox" name="name" value="JavaScript" class="form-selectgroup-input" />
<span class="form-selectgroup-box">JavaScript</span>
</label>
</div>
</div>
</div>
<div class="example-code language-html" data-lang="html">
<pre class="highlight"><code><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Simple selectgroup<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span class="s">"name"</span> <span class="na">value=</span><span class="s">"HTML"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span> <span class="na">checked</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-box"</span><span class="nt">&gt;</span>HTML<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span class="s">"name"</span> <span class="na">value=</span><span class="s">"CSS"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-box"</span><span class="nt">&gt;</span>CSS<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span class="s">"name"</span> <span class="na">value=</span><span class="s">"PHP"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-box"</span><span class="nt">&gt;</span>PHP<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span class="s">"name"</span> <span class="na">value=</span><span class="s">"JavaScript"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-box"</span><span class="nt">&gt;</span>JavaScript<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Icon input<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span class="s">"name"</span> <span class="na">value=</span><span class="s">"sun"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span> <span class="na">checked</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-box"</span><span class="nt">&gt;&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">&gt;&lt;circle</span> <span class="na">cx=</span><span class="s">"12"</span> <span class="na">cy=</span><span class="s">"12"</span> <span class="na">r=</span><span class="s">"5"</span><span class="nt">&gt;&lt;/circle&gt;&lt;line</span> <span class="na">x1=</span><span class="s">"12"</span> <span class="na">y1=</span><span class="s">"1"</span> <span class="na">x2=</span><span class="s">"12"</span> <span class="na">y2=</span><span class="s">"3"</span><span class="nt">&gt;&lt;/line&gt;&lt;line</span> <span class="na">x1=</span><span class="s">"12"</span> <span class="na">y1=</span><span class="s">"21"</span> <span class="na">x2=</span><span class="s">"12"</span> <span class="na">y2=</span><span class="s">"23"</span><span class="nt">&gt;&lt;/line&gt;&lt;line</span> <span class="na">x1=</span><span class="s">"4.22"</span> <span class="na">y1=</span><span class="s">"4.22"</span> <span class="na">x2=</span><span class="s">"5.64"</span> <span class="na">y2=</span><span class="s">"5.64"</span><span class="nt">&gt;&lt;/line&gt;&lt;line</span> <span class="na">x1=</span><span class="s">"18.36"</span> <span class="na">y1=</span><span class="s">"18.36"</span> <span class="na">x2=</span><span class="s">"19.78"</span> <span class="na">y2=</span><span class="s">"19.78"</span><span class="nt">&gt;&lt;/line&gt;&lt;line</span> <span class="na">x1=</span><span class="s">"1"</span> <span class="na">y1=</span><span class="s">"12"</span> <span class="na">x2=</span><span class="s">"3"</span> <span class="na">y2=</span><span class="s">"12"</span><span class="nt">&gt;&lt;/line&gt;&lt;line</span> <span class="na">x1=</span><span class="s">"21"</span> <span class="na">y1=</span><span class="s">"12"</span> <span class="na">x2=</span><span class="s">"23"</span> <span class="na">y2=</span><span class="s">"12"</span><span class="nt">&gt;&lt;/line&gt;&lt;line</span> <span class="na">x1=</span><span class="s">"4.22"</span> <span class="na">y1=</span><span class="s">"19.78"</span> <span class="na">x2=</span><span class="s">"5.64"</span> <span class="na">y2=</span><span class="s">"18.36"</span><span class="nt">&gt;&lt;/line&gt;&lt;line</span> <span class="na">x1=</span><span class="s">"18.36"</span> <span class="na">y1=</span><span class="s">"5.64"</span> <span class="na">x2=</span><span class="s">"19.78"</span> <span class="na">y2=</span><span class="s">"4.22"</span><span class="nt">&gt;&lt;/line&gt;&lt;/svg&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span class="s">"name"</span> <span class="na">value=</span><span class="s">"moon"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-box"</span><span class="nt">&gt;&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"</span><span class="nt">&gt;&lt;/path&gt;&lt;/svg&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span class="s">"name"</span> <span class="na">value=</span><span class="s">"cloud-rain"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-box"</span><span class="nt">&gt;&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">&gt;&lt;line</span> <span class="na">x1=</span><span class="s">"16"</span> <span class="na">y1=</span><span class="s">"13"</span> <span class="na">x2=</span><span class="s">"16"</span> <span class="na">y2=</span><span class="s">"21"</span><span class="nt">&gt;&lt;/line&gt;&lt;line</span> <span class="na">x1=</span><span class="s">"8"</span> <span class="na">y1=</span><span class="s">"13"</span> <span class="na">x2=</span><span class="s">"8"</span> <span class="na">y2=</span><span class="s">"21"</span><span class="nt">&gt;&lt;/line&gt;&lt;line</span> <span class="na">x1=</span><span class="s">"12"</span> <span class="na">y1=</span><span class="s">"15"</span> <span class="na">x2=</span><span class="s">"12"</span> <span class="na">y2=</span><span class="s">"23"</span><span class="nt">&gt;&lt;/line&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M20 16.58A5 5 0 0 0 18 7h-1.26A8 8 0 1 0 4 15.25"</span><span class="nt">&gt;&lt;/path&gt;&lt;/svg&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span class="s">"name"</span> <span class="na">value=</span><span class="s">"cloud"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-box"</span><span class="nt">&gt;&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"</span><span class="nt">&gt;&lt;/path&gt;&lt;/svg&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span class="s">"name"</span> <span class="na">value=</span><span class="s">"Other"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-box"</span><span class="nt">&gt;</span>Other<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Selectgroup with icons and text<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"icons"</span> <span class="na">value=</span><span class="s">"home"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span> <span class="na">checked</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-box"</span><span class="nt">&gt;&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">class=</span><span class="s">"icon mr-1"</span><span class="nt">&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"</span><span class="nt">&gt;&lt;/path&gt;&lt;polyline</span> <span class="na">points=</span><span class="s">"9 22 9 12 15 12 15 22"</span><span class="nt">&gt;&lt;/polyline&gt;&lt;/svg&gt;</span>
Home<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"icons"</span> <span class="na">value=</span><span class="s">"users"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-box"</span><span class="nt">&gt;&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">class=</span><span class="s">"icon mr-1"</span><span class="nt">&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"</span><span class="nt">&gt;&lt;/path&gt;&lt;circle</span> <span class="na">cx=</span><span class="s">"9"</span> <span class="na">cy=</span><span class="s">"7"</span> <span class="na">r=</span><span class="s">"4"</span><span class="nt">&gt;&lt;/circle&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M23 21v-2a4 4 0 0 0-3-3.87"</span><span class="nt">&gt;&lt;/path&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M16 3.13a4 4 0 0 1 0 7.75"</span><span class="nt">&gt;&lt;/path&gt;&lt;/svg&gt;</span>
Users<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"icons"</span> <span class="na">value=</span><span class="s">"circle"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-box"</span><span class="nt">&gt;&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">class=</span><span class="s">"icon mr-1"</span><span class="nt">&gt;&lt;circle</span> <span class="na">cx=</span><span class="s">"12"</span> <span class="na">cy=</span><span class="s">"12"</span> <span class="na">r=</span><span class="s">"10"</span><span class="nt">&gt;&lt;/circle&gt;&lt;/svg&gt;</span>
Circle<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"icons"</span> <span class="na">value=</span><span class="s">"square"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-box"</span><span class="nt">&gt;&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">class=</span><span class="s">"icon mr-1"</span><span class="nt">&gt;&lt;rect</span> <span class="na">x=</span><span class="s">"3"</span> <span class="na">y=</span><span class="s">"3"</span> <span class="na">width=</span><span class="s">"18"</span> <span class="na">height=</span><span class="s">"18"</span> <span class="na">rx=</span><span class="s">"2"</span> <span class="na">ry=</span><span class="s">"2"</span><span class="nt">&gt;&lt;/rect&gt;&lt;/svg&gt;</span>
Square<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Different style<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup form-selectgroup-pills"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span class="s">"name"</span> <span class="na">value=</span><span class="s">"HTML"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span> <span class="na">checked</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-box"</span><span class="nt">&gt;</span>HTML<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span class="s">"name"</span> <span class="na">value=</span><span class="s">"CSS"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-box"</span><span class="nt">&gt;</span>CSS<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span class="s">"name"</span> <span class="na">value=</span><span class="s">"PHP"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-box"</span><span class="nt">&gt;</span>PHP<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span class="s">"name"</span> <span class="na">value=</span><span class="s">"JavaScript"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-box"</span><span class="nt">&gt;</span>JavaScript<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
<h3 id="toggle-switches">Toggle switches</h3>
<div class="example">
<div class="mb-3">
<div class="form-label">Toggle switches</div>
<label class="form-check form-switch">
<input class="form-check-input" type="checkbox" checked="" />
<span class="form-check-label">Option 1</span>
</label>
<label class="form-check form-switch">
<input class="form-check-input" type="checkbox" />
<span class="form-check-label">Option 2</span>
</label>
<label class="form-check form-switch">
<input class="form-check-input" type="checkbox" />
<span class="form-check-label">Option 3</span>
</label>
</div>
<div class="mb-3">
<div class="form-label">Single switch</div>
<label class="form-check form-switch">
<input class="form-check-input" type="checkbox" />
<span class="form-check-label">I agree with terms and conditions</span>
</label>
</div>
</div>
<div class="example-code language-html" data-lang="html">
<pre class="highlight"><code><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Toggle switches<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-check form-switch"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">checked</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span class="nt">&gt;</span>Option 1<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-check form-switch"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"checkbox"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span class="nt">&gt;</span>Option 2<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-check form-switch"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"checkbox"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span class="nt">&gt;</span>Option 3<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Single switch<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-check form-switch"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"checkbox"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span class="nt">&gt;</span>I agree with terms and conditions<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
<h3 id="radios">Radios</h3>
<div class="example">
<div class="mb-3">
<div class="form-label">Radios</div>
<div>
<label class="form-check">
<input class="form-check-input" type="radio" checked="" />
<span class="form-check-label">Option 1</span>
</label>
<label class="form-check">
<input class="form-check-input" type="radio" />
<span class="form-check-label">Option 2</span>
</label>
<label class="form-check">
<input class="form-check-input" type="radio" disabled="" />
<span class="form-check-label">Option 3</span>
</label>
<label class="form-check">
<input class="form-check-input" type="radio" checked="" disabled="" />
<span class="form-check-label">Option 4</span>
</label>
</div>
</div>
<div class="mb-3">
<div class="form-label">Inline Radios</div>
<div>
<label class="form-check form-check-inline">
<input class="form-check-input" type="radio" checked="" />
<span class="form-check-label">Option 1</span>
</label>
<label class="form-check form-check-inline">
<input class="form-check-input" type="radio" />
<span class="form-check-label">Option 2</span>
</label>
<label class="form-check form-check-inline">
<input class="form-check-input" type="radio" disabled="" />
<span class="form-check-label">Option 3</span>
</label>
</div>
</div>
</div>
<div class="example-code language-html" data-lang="html">
<pre class="highlight"><code><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Radios<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">checked</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span class="nt">&gt;</span>Option 1<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"radio"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span class="nt">&gt;</span>Option 2<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">disabled</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span class="nt">&gt;</span>Option 3<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">checked</span> <span class="na">disabled</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span class="nt">&gt;</span>Option 4<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Inline Radios<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-check form-check-inline"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">checked</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span class="nt">&gt;</span>Option 1<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-check form-check-inline"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"radio"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span class="nt">&gt;</span>Option 2<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-check form-check-inline"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">disabled</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span class="nt">&gt;</span>Option 3<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
<h3 id="checkboxes">Checkboxes</h3>
<div class="example">
<div class="mb-3">
<div class="form-label">Checkboxes</div>
<div>
<label class="form-check">
<input class="form-check-input" type="checkbox" />
<span class="form-check-label">Checkbox input</span>
</label>
<label class="form-check">
<input class="form-check-input" type="checkbox" disabled="" />
<span class="form-check-label">Disabled checkbox input</span>
</label>
<label class="form-check">
<input class="form-check-input" type="checkbox" checked="" />
<span class="form-check-label">Checked checkbox input</span>
</label>
</div>
</div>
<div class="mb-3">
<div class="form-label">Inline Checkboxes</div>
<div>
<label class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" />
<span class="form-check-label">Option 1</span>
</label>
<label class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" disabled="" />
<span class="form-check-label">Option 2</span>
</label>
<label class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" checked="" />
<span class="form-check-label">Option 3</span>
</label>
</div>
</div>
</div>
<div class="example-code language-html" data-lang="html">
<pre class="highlight"><code><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Checkboxes<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"checkbox"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span class="nt">&gt;</span>Checkbox input<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">disabled</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span class="nt">&gt;</span>Disabled checkbox input<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">checked</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span class="nt">&gt;</span>Checked checkbox input<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Inline Checkboxes<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-check form-check-inline"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"checkbox"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span class="nt">&gt;</span>Option 1<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-check form-check-inline"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">disabled</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span class="nt">&gt;</span>Option 2<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-check form-check-inline"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">checked</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span class="nt">&gt;</span>Option 3<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
<h3 id="range-input">Range input</h3>
<div class="example">
<div class="mb-3">
<label class="form-label">Range input</label>
<input type="range" class="form-range mb-2" value="40" min="0" max="100" step="10" />
<div class="form-range mb-2" id="range-simple"></div>
<div class="form-range mb-2" id="range-connect"></div>
<div class="form-range mb-2 text-green" id="range-color"></div>
</div>
</div>
<div class="example-code language-html" data-lang="html">
<pre class="highlight"><code><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Range input<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"range"</span> <span class="na">class=</span><span class="s">"form-range mb-2"</span> <span class="na">value=</span><span class="s">"40"</span> <span class="na">min=</span><span class="s">"0"</span> <span class="na">max=</span><span class="s">"100"</span> <span class="na">step=</span><span class="s">"10"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-range mb-2"</span> <span class="na">id=</span><span class="s">"range-simple"</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-range mb-2"</span> <span class="na">id=</span><span class="s">"range-connect"</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-range mb-2 text-green"</span> <span class="na">id=</span><span class="s">"range-color"</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
<h3 id="sample-form">Sample form</h3>
<div class="example">
<fieldset class="form-fieldset">
<div class="mb-3">
<label class="form-label">Full name<span class="form-required">*</span></label>
<input type="text" class="form-control" autocomplete="off" />
</div>
<div class="mb-3">
<label class="form-label">Company<span class="form-required">*</span></label>
<input type="text" class="form-control" autocomplete="off" />
</div>
<div class="mb-3">
<label class="form-label">Email<span class="form-required">*</span></label>
<input type="email" class="form-control" autocomplete="off" />
</div>
<div class="">
<label class="form-label">Phone number</label>
<input type="tel" class="form-control" autocomplete="off" />
</div>
</fieldset>
</div>
<div class="example-code language-html" data-lang="html">
<pre class="highlight"><code><span class="nt">&lt;fieldset</span> <span class="na">class=</span><span class="s">"form-fieldset"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Full name<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-required"</span><span class="nt">&gt;</span>*<span class="nt">&lt;/span&gt;&lt;/label&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">autocomplete=</span><span class="s">"off"</span><span class="nt">/&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Company<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-required"</span><span class="nt">&gt;</span>*<span class="nt">&lt;/span&gt;&lt;/label&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">autocomplete=</span><span class="s">"off"</span><span class="nt">/&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Email<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-required"</span><span class="nt">&gt;</span>*<span class="nt">&lt;/span&gt;&lt;/label&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"email"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">autocomplete=</span><span class="s">"off"</span><span class="nt">/&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Phone number<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"tel"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">autocomplete=</span><span class="s">"off"</span><span class="nt">/&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/fieldset&gt;</span></code></pre>
</div>
<h3 id="input-group">Input group</h3>
<div class="example">
<div class="mb-2">
<label class="form-label">Input group</label>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for…" />
<span class="input-group-append">
<button class="btn btn-primary" type="button">Go!</button>
</span>
</div>
</div>
<div class="mb-2">
<label class="form-label">Input group buttons</label>
<div class="input-group">
<input type="text" class="form-control" />
<div class="input-group-append">
<button type="button" class="btn btn-primary">Action</button>
<button data-toggle="dropdown" type="button" class="btn btn-primary dropdown-toggle"></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">
News
</a>
<a class="dropdown-item" href="#">
Messages
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
Edit Profile
</a>
</div>
</div>
</div>
</div>
</div>
<div class="example-code language-html" data-lang="html">
<pre class="highlight"><code><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-2"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Input group<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Search for…"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-group-append"</span><span class="nt">&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">type=</span><span class="s">"button"</span><span class="nt">&gt;</span>Go!<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-2"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Input group buttons<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group-append"</span><span class="nt">&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">&gt;</span>Action<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">type=</span><span class="s">"button"</span>
<span class="na">class=</span><span class="s">"btn btn-primary dropdown-toggle"</span><span class="nt">&gt;&lt;/button&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown-menu dropdown-menu-right"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>
News
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>
Messages
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown-divider"</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>
Edit Profile
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
<h3 id="input-with-icon">Input with icon</h3>
<div class="example">
<div class="mb-3">
<label class="form-label">Icon input</label>
<div class="input-icon mb-3">
<input type="text" class="form-control" placeholder="Search…" />
<span class="input-icon-addon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
</span>
</div>
<div class="input-icon mb-3">
<span class="input-icon-addon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
</span>
<input type="text" class="form-control" placeholder="Username" />
</div>
</div>
<div class="mb-3">
<label class="form-label">Loader input</label>
<div class="input-icon mb-3">
<input type="text" class="form-control" placeholder="Loading…" />
<span class="input-icon-addon">
<div class="spinner-border spinner-border-sm text-muted" role="status"></div>
</span>
</div>
<div class="input-icon mb-3">
<span class="input-icon-addon">
<div class="spinner-border spinner-border-sm text-muted" role="status"></div>
</span>
<input type="text" class="form-control" placeholder="Loading…" />
</div>
</div>
</div>
<div class="example-code language-html" data-lang="html">
<pre class="highlight"><code><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Icon input<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-icon mb-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Search…"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-icon-addon"</span><span class="nt">&gt;</span>
<span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">&gt;&lt;circle</span> <span class="na">cx=</span><span class="s">"11"</span> <span class="na">cy=</span><span class="s">"11"</span> <span class="na">r=</span><span class="s">"8"</span><span class="nt">&gt;&lt;/circle&gt;&lt;line</span> <span class="na">x1=</span><span class="s">"21"</span> <span class="na">y1=</span><span class="s">"21"</span> <span class="na">x2=</span><span class="s">"16.65"</span> <span class="na">y2=</span><span class="s">"16.65"</span><span class="nt">&gt;&lt;/line&gt;&lt;/svg&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-icon mb-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-icon-addon"</span><span class="nt">&gt;</span>
<span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"</span><span class="nt">&gt;&lt;/path&gt;&lt;circle</span> <span class="na">cx=</span><span class="s">"12"</span> <span class="na">cy=</span><span class="s">"7"</span> <span class="na">r=</span><span class="s">"4"</span><span class="nt">&gt;&lt;/circle&gt;&lt;/svg&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Username"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Loader input<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-icon mb-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Loading…"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-icon-addon"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"spinner-border spinner-border-sm text-muted"</span> <span class="na">role=</span><span class="s">"status"</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-icon mb-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-icon-addon"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"spinner-border spinner-border-sm text-muted"</span> <span class="na">role=</span><span class="s">"status"</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Loading…"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
<h3 id="separated-inputs">Separated inputs</h3>
<div class="example">
<div class="mb-3">
<label class="form-label">Separated inputs</label>
<div class="row row-sm">
<div class="col">
<input type="text" class="form-control" placeholder="Search for…" />
</div>
<div class="col-auto">
<a href="#" class="btn btn-secondary btn-icon" aria-label="Button">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
</a>
</div>
</div>
</div>
</div>
<div class="example-code language-html" data-lang="html">
<pre class="highlight"><code><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Separated inputs<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row row-sm"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Search for…"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-icon"</span> <span class="na">aria-label=</span><span class="s">"Button"</span><span class="nt">&gt;</span>
<span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">&gt;&lt;circle</span> <span class="na">cx=</span><span class="s">"11"</span> <span class="na">cy=</span><span class="s">"11"</span> <span class="na">r=</span><span class="s">"8"</span><span class="nt">&gt;&lt;/circle&gt;&lt;line</span> <span class="na">x1=</span><span class="s">"21"</span> <span class="na">y1=</span><span class="s">"21"</span> <span class="na">x2=</span><span class="s">"16.65"</span> <span class="na">y2=</span><span class="s">"16.65"</span><span class="nt">&gt;&lt;/line&gt;&lt;/svg&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
<h3 id="custom-input-examples">Custom Input examples</h3>
<div class="example">
<div class="mb-2">
<label class="form-label">Username</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
@
</span>
</div>
<input type="text" class="form-control" placeholder="username" />
</div>
</div>
<div class="mb-2">
<label class="form-label">Subdomain</label>
<div class="input-group">
<input type="text" class="form-control" placeholder="subdomain" />
<div class="input-group-append">
<span class="input-group-text">
.tabler.io
</span>
</div>
</div>
</div>
<div class="mb-2">
<label class="form-label">Your vanity URL</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
https://tabler.io/users/
</span>
</div>
<input type="text" class="form-control" />
</div>
</div>
<div class="mb-2">
<label class="form-label">Price</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
$
</span>
</div>
<input type="text" class="form-control" />
<div class="input-group-append">
<span class="input-group-text">
.00
</span>
</div>
</div>
</div>
</div>
<div class="example-code language-html" data-lang="html">
<pre class="highlight"><code><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-2"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Username<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span class="nt">&gt;</span>
@
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"username"</span> <span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-2"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Subdomain<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"subdomain"</span> <span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group-append"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span class="nt">&gt;</span>
.tabler.io
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-2"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Your vanity URL<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span class="nt">&gt;</span>
https://tabler.io/users/
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-2"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Price<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span class="nt">&gt;</span>
$
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group-append"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span class="nt">&gt;</span>
.00
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
<h3 id="date-component">Date component</h3>
<div class="example">
<div class="mb-2">
<label class="form-label">Date of birth</label>
<div class="row row-sm">
<div class="col-5">
<select name="user[month]" class="form-select">
<option value="">Month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option selected="selected" value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
</div>
<div class="col-3">
<select name="user[day]" class="form-select">
<option value="">Day</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20" selected="">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</div>
<div class="col-4">
<select name="user[year]" class="form-select">
<option value="">Year</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989" selected="">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1979">1979</option>
<option value="1978">1978</option>
<option value="1977">1977</option>
<option value="1976">1976</option>
<option value="1975">1975</option>
<option value="1974">1974</option>
<option value="1973">1973</option>
<option value="1972">1972</option>
<option value="1971">1971</option>
<option value="1970">1970</option>
<option value="1969">1969</option>
<option value="1968">1968</option>
<option value="1967">1967</option>
<option value="1966">1966</option>
<option value="1965">1965</option>
<option value="1964">1964</option>
<option value="1963">1963</option>
<option value="1962">1962</option>
<option value="1961">1961</option>
<option value="1960">1960</option>
<option value="1959">1959</option>
<option value="1958">1958</option>
<option value="1957">1957</option>
<option value="1956">1956</option>
<option value="1955">1955</option>
<option value="1954">1954</option>
<option value="1953">1953</option>
<option value="1952">1952</option>
<option value="1951">1951</option>
<option value="1950">1950</option>
<option value="1949">1949</option>
<option value="1948">1948</option>
<option value="1947">1947</option>
<option value="1946">1946</option>
<option value="1945">1945</option>
<option value="1944">1944</option>
<option value="1943">1943</option>
<option value="1942">1942</option>
<option value="1941">1941</option>
<option value="1940">1940</option>
<option value="1939">1939</option>
<option value="1938">1938</option>
<option value="1937">1937</option>
<option value="1936">1936</option>
<option value="1935">1935</option>
<option value="1934">1934</option>
<option value="1933">1933</option>
<option value="1932">1932</option>
<option value="1931">1931</option>
<option value="1930">1930</option>
<option value="1929">1929</option>
<option value="1928">1928</option>
<option value="1927">1927</option>
<option value="1926">1926</option>
<option value="1925">1925</option>
<option value="1924">1924</option>
<option value="1923">1923</option>
<option value="1922">1922</option>
<option value="1921">1921</option>
<option value="1920">1920</option>
<option value="1919">1919</option>
<option value="1918">1918</option>
<option value="1917">1917</option>
<option value="1916">1916</option>
<option value="1915">1915</option>
<option value="1914">1914</option>
<option value="1913">1913</option>
<option value="1912">1912</option>
<option value="1911">1911</option>
<option value="1910">1910</option>
<option value="1909">1909</option>
<option value="1908">1908</option>
<option value="1907">1907</option>
<option value="1906">1906</option>
<option value="1905">1905</option>
<option value="1904">1904</option>
<option value="1903">1903</option>
<option value="1902">1902</option>
<option value="1901">1901</option>
<option value="1900">1900</option>
<option value="1899">1899</option>
<option value="1898">1898</option>
<option value="1897">1897</option>
</select>
</div>
</div>
</div>
</div>
<div class="example-code language-html" data-lang="html">
<pre class="highlight"><code><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-2"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Date of birth<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row row-sm"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-5"</span><span class="nt">&gt;</span>
<span class="nt">&lt;select</span> <span class="na">name=</span><span class="s">"user[month]"</span> <span class="na">class=</span><span class="s">"form-select"</span><span class="nt">&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">""</span><span class="nt">&gt;</span>Month<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1"</span><span class="nt">&gt;</span>January<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"2"</span><span class="nt">&gt;</span>February<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"3"</span><span class="nt">&gt;</span>March<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"4"</span><span class="nt">&gt;</span>April<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"5"</span><span class="nt">&gt;</span>May<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">selected=</span><span class="s">"selected"</span> <span class="na">value=</span><span class="s">"6"</span><span class="nt">&gt;</span>June<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"7"</span><span class="nt">&gt;</span>July<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"8"</span><span class="nt">&gt;</span>August<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"9"</span><span class="nt">&gt;</span>September<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"10"</span><span class="nt">&gt;</span>October<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"11"</span><span class="nt">&gt;</span>November<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"12"</span><span class="nt">&gt;</span>December<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;/select&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;select</span> <span class="na">name=</span><span class="s">"user[day]"</span> <span class="na">class=</span><span class="s">"form-select"</span><span class="nt">&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">""</span><span class="nt">&gt;</span>Day<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1"</span><span class="nt">&gt;</span>1<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"2"</span><span class="nt">&gt;</span>2<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"3"</span><span class="nt">&gt;</span>3<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"4"</span><span class="nt">&gt;</span>4<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"5"</span><span class="nt">&gt;</span>5<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"6"</span><span class="nt">&gt;</span>6<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"7"</span><span class="nt">&gt;</span>7<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"8"</span><span class="nt">&gt;</span>8<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"9"</span><span class="nt">&gt;</span>9<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"10"</span><span class="nt">&gt;</span>10<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"11"</span><span class="nt">&gt;</span>11<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"12"</span><span class="nt">&gt;</span>12<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"13"</span><span class="nt">&gt;</span>13<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"14"</span><span class="nt">&gt;</span>14<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"15"</span><span class="nt">&gt;</span>15<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"16"</span><span class="nt">&gt;</span>16<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"17"</span><span class="nt">&gt;</span>17<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"18"</span><span class="nt">&gt;</span>18<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"19"</span><span class="nt">&gt;</span>19<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"20"</span> <span class="na">selected</span><span class="nt">&gt;</span>20<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"21"</span><span class="nt">&gt;</span>21<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"22"</span><span class="nt">&gt;</span>22<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"23"</span><span class="nt">&gt;</span>23<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"24"</span><span class="nt">&gt;</span>24<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"25"</span><span class="nt">&gt;</span>25<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"26"</span><span class="nt">&gt;</span>26<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"27"</span><span class="nt">&gt;</span>27<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"28"</span><span class="nt">&gt;</span>28<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"29"</span><span class="nt">&gt;</span>29<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"30"</span><span class="nt">&gt;</span>30<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"31"</span><span class="nt">&gt;</span>31<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;/select&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-4"</span><span class="nt">&gt;</span>
<span class="nt">&lt;select</span> <span class="na">name=</span><span class="s">"user[year]"</span> <span class="na">class=</span><span class="s">"form-select"</span><span class="nt">&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">""</span><span class="nt">&gt;</span>Year<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"2014"</span><span class="nt">&gt;</span>2014<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"2013"</span><span class="nt">&gt;</span>2013<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"2012"</span><span class="nt">&gt;</span>2012<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"2011"</span><span class="nt">&gt;</span>2011<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"2010"</span><span class="nt">&gt;</span>2010<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"2009"</span><span class="nt">&gt;</span>2009<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"2008"</span><span class="nt">&gt;</span>2008<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"2007"</span><span class="nt">&gt;</span>2007<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"2006"</span><span class="nt">&gt;</span>2006<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"2005"</span><span class="nt">&gt;</span>2005<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"2004"</span><span class="nt">&gt;</span>2004<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"2003"</span><span class="nt">&gt;</span>2003<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"2002"</span><span class="nt">&gt;</span>2002<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"2001"</span><span class="nt">&gt;</span>2001<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"2000"</span><span class="nt">&gt;</span>2000<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1999"</span><span class="nt">&gt;</span>1999<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1998"</span><span class="nt">&gt;</span>1998<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1997"</span><span class="nt">&gt;</span>1997<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1996"</span><span class="nt">&gt;</span>1996<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1995"</span><span class="nt">&gt;</span>1995<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1994"</span><span class="nt">&gt;</span>1994<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1993"</span><span class="nt">&gt;</span>1993<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1992"</span><span class="nt">&gt;</span>1992<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1991"</span><span class="nt">&gt;</span>1991<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1990"</span><span class="nt">&gt;</span>1990<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1989"</span> <span class="na">selected</span><span class="nt">&gt;</span>1989<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1988"</span><span class="nt">&gt;</span>1988<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1987"</span><span class="nt">&gt;</span>1987<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1986"</span><span class="nt">&gt;</span>1986<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1985"</span><span class="nt">&gt;</span>1985<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1984"</span><span class="nt">&gt;</span>1984<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1983"</span><span class="nt">&gt;</span>1983<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1982"</span><span class="nt">&gt;</span>1982<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1981"</span><span class="nt">&gt;</span>1981<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1980"</span><span class="nt">&gt;</span>1980<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1979"</span><span class="nt">&gt;</span>1979<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1978"</span><span class="nt">&gt;</span>1978<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1977"</span><span class="nt">&gt;</span>1977<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1976"</span><span class="nt">&gt;</span>1976<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1975"</span><span class="nt">&gt;</span>1975<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1974"</span><span class="nt">&gt;</span>1974<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1973"</span><span class="nt">&gt;</span>1973<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1972"</span><span class="nt">&gt;</span>1972<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1971"</span><span class="nt">&gt;</span>1971<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1970"</span><span class="nt">&gt;</span>1970<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1969"</span><span class="nt">&gt;</span>1969<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1968"</span><span class="nt">&gt;</span>1968<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1967"</span><span class="nt">&gt;</span>1967<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1966"</span><span class="nt">&gt;</span>1966<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1965"</span><span class="nt">&gt;</span>1965<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1964"</span><span class="nt">&gt;</span>1964<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1963"</span><span class="nt">&gt;</span>1963<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1962"</span><span class="nt">&gt;</span>1962<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1961"</span><span class="nt">&gt;</span>1961<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1960"</span><span class="nt">&gt;</span>1960<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1959"</span><span class="nt">&gt;</span>1959<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1958"</span><span class="nt">&gt;</span>1958<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1957"</span><span class="nt">&gt;</span>1957<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1956"</span><span class="nt">&gt;</span>1956<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1955"</span><span class="nt">&gt;</span>1955<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1954"</span><span class="nt">&gt;</span>1954<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1953"</span><span class="nt">&gt;</span>1953<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1952"</span><span class="nt">&gt;</span>1952<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1951"</span><span class="nt">&gt;</span>1951<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1950"</span><span class="nt">&gt;</span>1950<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1949"</span><span class="nt">&gt;</span>1949<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1948"</span><span class="nt">&gt;</span>1948<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1947"</span><span class="nt">&gt;</span>1947<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1946"</span><span class="nt">&gt;</span>1946<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1945"</span><span class="nt">&gt;</span>1945<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1944"</span><span class="nt">&gt;</span>1944<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1943"</span><span class="nt">&gt;</span>1943<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1942"</span><span class="nt">&gt;</span>1942<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1941"</span><span class="nt">&gt;</span>1941<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1940"</span><span class="nt">&gt;</span>1940<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1939"</span><span class="nt">&gt;</span>1939<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1938"</span><span class="nt">&gt;</span>1938<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1937"</span><span class="nt">&gt;</span>1937<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1936"</span><span class="nt">&gt;</span>1936<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1935"</span><span class="nt">&gt;</span>1935<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1934"</span><span class="nt">&gt;</span>1934<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1933"</span><span class="nt">&gt;</span>1933<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1932"</span><span class="nt">&gt;</span>1932<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1931"</span><span class="nt">&gt;</span>1931<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1930"</span><span class="nt">&gt;</span>1930<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1929"</span><span class="nt">&gt;</span>1929<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1928"</span><span class="nt">&gt;</span>1928<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1927"</span><span class="nt">&gt;</span>1927<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1926"</span><span class="nt">&gt;</span>1926<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1925"</span><span class="nt">&gt;</span>1925<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1924"</span><span class="nt">&gt;</span>1924<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1923"</span><span class="nt">&gt;</span>1923<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1922"</span><span class="nt">&gt;</span>1922<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1921"</span><span class="nt">&gt;</span>1921<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1920"</span><span class="nt">&gt;</span>1920<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1919"</span><span class="nt">&gt;</span>1919<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1918"</span><span class="nt">&gt;</span>1918<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1917"</span><span class="nt">&gt;</span>1917<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1916"</span><span class="nt">&gt;</span>1916<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1915"</span><span class="nt">&gt;</span>1915<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1914"</span><span class="nt">&gt;</span>1914<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1913"</span><span class="nt">&gt;</span>1913<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1912"</span><span class="nt">&gt;</span>1912<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1911"</span><span class="nt">&gt;</span>1911<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1910"</span><span class="nt">&gt;</span>1910<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1909"</span><span class="nt">&gt;</span>1909<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1908"</span><span class="nt">&gt;</span>1908<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1907"</span><span class="nt">&gt;</span>1907<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1906"</span><span class="nt">&gt;</span>1906<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1905"</span><span class="nt">&gt;</span>1905<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1904"</span><span class="nt">&gt;</span>1904<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1903"</span><span class="nt">&gt;</span>1903<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1902"</span><span class="nt">&gt;</span>1902<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1901"</span><span class="nt">&gt;</span>1901<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1900"</span><span class="nt">&gt;</span>1900<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1899"</span><span class="nt">&gt;</span>1899<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1898"</span><span class="nt">&gt;</span>1898<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1897"</span><span class="nt">&gt;</span>1897<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;/select&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
<h3 id="input-with-button">Input with button</h3>
<div class="example">
<div class="mb-2">
<label class="form-label">Button input</label>
<div class="input-group">
<div class="input-group-prepend">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<input type="text" class="form-control" aria-label="Text input with dropdown button" />
</div>
</div>
</div>
<div class="example-code language-html" data-lang="html">
<pre class="highlight"><code><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-2"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Button input<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary dropdown-toggle"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span>
<span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">&gt;</span>
Action
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Action<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Another action<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Something else here<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;div</span> <span class="na">role=</span><span class="s">"separator"</span> <span class="na">class=</span><span class="s">"dropdown-divider"</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Separated link<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">aria-label=</span><span class="s">"Text input with dropdown button"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
<!-- Libs JS -->
<script src="../dist/libs/jquery/dist/jquery.slim.min.js?1580803658"></script>
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js?1580803658"></script>
<script src="../dist/js/tabler-range-sliders.min.js?1580803658"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink