Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-23 18:34:25 +04:00
Code Issues Projects Releases Wiki Activity
Files
15a5c941fa295083c86b1cd851a7f07d6c74ea07
tabler/demo/form-elements.html
codecalm 1a49c10adc Release v1.0.0-alpha.6
2020-04-11 22:37:19 +02:00

2198 lines
124 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.5
* @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"/>
<title>Form elements - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<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"/>
<!-- Libs CSS -->
<link href="./dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
<link href="./dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
<link href="./dist/libs/fullcalendar/core/main.min.css" rel="stylesheet"/>
<link href="./dist/libs/fullcalendar/daygrid/main.min.css" rel="stylesheet"/>
<link href="./dist/libs/fullcalendar/timegrid/main.min.css" rel="stylesheet"/>
<link href="./dist/libs/fullcalendar/list/main.min.css" rel="stylesheet"/>
<link href="./dist/libs/flatpickr/dist/flatpickr.min.css" rel="stylesheet"/>
<link href="./dist/libs/nouislider/distribute/nouislider.min.css" rel="stylesheet"/>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
<!-- Tabler Core -->
<link href="./dist/css/tabler.min.css" rel="stylesheet"/>
<!-- Tabler Plugins -->
<link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler-buttons.min.css" rel="stylesheet"/>
<link href="./dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<span class="navbar-toggler-icon"></span>
</button>
<a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pr-0 pr-md-3">
<img src="./static/logo.svg" alt="Tabler" class="navbar-brand-image">
</a>
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item dropdown d-none d-md-flex mr-3">
<a href="#" class="nav-link px-0" data-toggle="dropdown" tabindex="-1">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" />
<path d="M9 17v1a3 3 0 0 0 6 0v-1" />
</svg>
<span class="badge bg-red"></span>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-card">
<div class="card">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
</div>
</div>
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block pl-2">
<div>Paweł Kuna</div>
<div class="mt-1 small text-muted">UI Designer</div>
</div>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<circle cx="12" cy="12" r="3" />
</svg>
Action
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<path d="M9 7 h-3a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-3" />
<path d="M9 15h3l8.5 -8.5a1.5 1.5 0 0 0 -3 -3l-8.5 8.5v3" />
<line x1="16" y1="5" x2="19" y2="8" />
</svg>
Another action
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<line x1="12" y1="5" x2="12" y2="19" />
<line x1="5" y1="12" x2="19" y2="12" />
</svg>
Separated link</a>
</div>
</div>
</div>
</div>
</header>
<div class="navbar-expand-md">
<div class="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
<div class="container-xl">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="./index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<polyline points="5 12 3 12 12 3 21 12 19 12" />
<path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
<path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
</svg>
</span>
<span class="nav-link-title">
Home
</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" />
<line x1="12" y1="12" x2="20" y2="7.5" />
<line x1="12" y1="12" x2="12" y2="21" />
<line x1="12" y1="12" x2="4" y2="7.5" />
<line x1="16" y1="5.25" x2="8" y2="9.75" />
</svg>
</span>
<span class="nav-link-title">
User Interface
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-2">
<li >
<a class="dropdown-item" href="./empty.html" >
Empty page
</a>
</li>
<li >
<a class="dropdown-item" href="./blank.html" >
Blank 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="./dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="./modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="./maps.html" >
Maps
</a>
</li>
<li >
<a class="dropdown-item" href="./maps-vector.html" >
Vector maps
</a>
</li>
<li >
<a class="dropdown-item" href="./navigation.html" >
Navigation
</a>
</li>
<li >
<a class="dropdown-item" href="./charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="./tables.html" >
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 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 active">
<a class="nav-link" href="./form-elements.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<polyline points="9 11 12 14 20 6" />
<path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" />
</svg>
</span>
<span class="nav-link-title">
Form elements
</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
</svg>
</span>
<span class="nav-link-title">
Extra
</span>
</a>
<ul class="dropdown-menu">
<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>
<li >
<a class="dropdown-item" href="./pricing.html" >
Pricing cards
</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>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<rect x="4" y="4" width="6" height="5" rx="2" />
<rect x="4" y="13" width="6" height="7" rx="2" />
<rect x="14" y="4" width="6" height="7" rx="2" />
<rect x="14" y="15" width="6" height="5" rx="2" />
</svg>
</span>
<span class="nav-link-title">
Layout
</span>
</a>
<ul class="dropdown-menu">
<li >
<a class="dropdown-item" href="./layout-horizontal.html" >
Horizontal
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-vertical.html" >
Vertical
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-vertical-right.html" >
Right vertical
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-condensed.html" >
Condensed
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-condensed-dark.html" >
Condensed dark
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-combo.html" >
Combined
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-navbar-dark.html" >
Navbar dark
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-dark.html" >
Dark mode
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-fluid.html" >
Fluid
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-fluid-vertical.html" >
Fluid vertical
</a>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<polyline points="14 3 14 8 19 8" />
<path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" />
<line x1="9" y1="9" x2="10" y2="9" />
<line x1="9" y1="13" x2="15" y2="13" />
<line x1="9" y1="17" x2="15" y2="17" />
</svg>
</span>
<span class="nav-link-title">
Docs
</span>
</a>
<ul class="dropdown-menu 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/dropdowns.html" >
Dropdowns
</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/modals.html" >
Modals
</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>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
<form action="." method="get">
<div class="input-icon">
<span class="input-icon-addon">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<circle cx="10" cy="10" r="7" />
<line x1="21" y1="21" x2="15" y2="15" />
</svg>
</span>
<input type="text" class="form-control" placeholder="Search…">
</div>
</form>
</div>
</div>
</div>
</div>
<div class="content">
<div class="container-xl">
<!-- Page title -->
<div class="page-header">
<div class="row align-items-center">
<div class="col-auto">
<h2 class="page-title">
Form elements
</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<form action="https://httpbin.org/post" method="post" class="card">
<div class="card-header">
<h4 class="card-title">Form elements</h4>
</div>
<div class="card-body">
<div class="row">
<div class="col-xl-4">
<div class="row">
<div class="col-md-6 col-xl-12">
<div class="mb-3">
<label class="form-label">Static</label>
<div class="form-control-plaintext">Input value</div>
</div>
<div class="mb-3">
<label class="form-label">Text</label>
<input type="text" class="form-control" name="example-text-input" placeholder="Input placeholder">
</div>
<div class="mb-3">
<label class="form-label">Password</label>
<input type="text" class="form-control" name="example-password-input" placeholder="Input placeholder">
</div>
<div class="mb-3">
<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-3">
<label class="form-label">Readonly</label>
<input type="text" class="form-control" name="example-disabled-input" placeholder="Readonly..."
value="Well, how'd you become king, then?" readonly>
</div>
<div class="mb-3">
<label class="form-label required">Required</label>
<input type="text" class="form-control" name="example-required-input" placeholder="Required..." >
</div>
<div class="mb-3">
<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 class="mb-3">
<div class="form-label">Select</div>
<select class="form-select" >
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="mb-3">
<div class="form-label">Select multiple</div>
<select class="form-select" multiple>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="mb-3">
<label class="form-label">Input group</label>
<div class="input-group mb-2">
<input type="text" class="form-control" placeholder="Search for…">
<button class="btn btn-secondary" type="button">Go!</button>
</div>
<div class="input-group">
<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>
</div>
<input type="text" class="form-control" aria-label="Text input with dropdown button">
</div>
</div>
<div class="mb-3">
<label class="form-label">Input group buttons</label>
<div class="input-group">
<input type="text" class="form-control">
<button type="button" class="btn btn-secondary">Action</button>
<button data-toggle="dropdown" type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split"></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">
Action
</a>
<a class="dropdown-item" href="#">
Another action
</a>
</div>
</div>
</div>
<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" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<circle cx="10" cy="10" r="7" />
<line x1="21" y1="21" x2="15" y2="15" />
</svg>
</span>
</div>
<div class="input-icon mb-3">
<span class="input-icon-addon">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<circle cx="12" cy="7" r="4" />
<path d="M5.5 21v-2a4 4 0 0 1 4 -4h5a4 4 0 0 1 4 4v2" />
</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 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" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<circle cx="10" cy="10" r="7" />
<line x1="21" y1="21" x2="15" y2="15" />
</svg>
</a>
</div>
</div>
</div>
<div class="mb-3">
<label class="form-label">Input with help icon</label>
<div class="row row-sm">
<div class="col">
<input type="text" class="form-control" placeholder="Search for…">
</div>
<div class="col-auto align-self-center">
<span class="form-help" data-toggle="popover" data-placement="top"
data-content="<p>ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.</p>
<p class='mb-0'><a href='#'>USP ZIP codes lookup tools</a></p>
"
data-html="true">?</span>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-xl-12">
<div class="mb-3">
<label class="form-label">Form control rounded</label>
<input type="text" class="form-control form-control-rounded mb-2" name="Form control rounded" placeholder="Text..">
<div class="input-icon">
<input type="text" class="form-control form-control-rounded" placeholder="Search…">
<span class="input-icon-addon">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<circle cx="10" cy="10" r="7" />
<line x1="21" y1="21" x2="15" y2="15" />
</svg>
</span>
</div>
</div>
<div class="mb-3">
<label class="form-label">Form control flush</label>
<input type="text" class="form-control form-control-flush" name="Form control flush" placeholder="Text..">
</div>
<div class="mb-3">
<label class="form-label">Input group</label>
<div class="input-group mb-2">
<span class="input-group-text">
@
</span>
<input type="text" class="form-control" placeholder="username" >
</div>
<div class="input-group mb-2">
<input type="text" class="form-control" placeholder="subdomain" >
<span class="input-group-text">
.tabler.io
</span>
</div>
<div class="input-group">
<span class="input-group-text">
https://
</span>
<input type="text" class="form-control" placeholder="subdomain" >
<span class="input-group-text">
.tabler.io
</span>
</div>
</div>
<div class="mb-3">
<label class="form-label">Input with checkbox or radios</label>
<div class="input-group mb-2">
<span class="input-group-text">
<input class="form-check-input m-0" type="checkbox" checked>
</span>
<input type="text" class="form-control" >
</div>
<div class="input-group">
<input type="text" class="form-control" >
<span class="input-group-text">
<input class="form-check-input m-0" type="radio" checked>
</span>
</div>
</div>
<div class="mb-3">
<label class="form-label">Input with prepended text</label>
<div class="input-group input-group-flat">
<span class="input-group-text">
https://tabler.io/users/
</span>
<input type="text" class="form-control pl-0" value="yourfancyusername">
</div>
</div>
<div class="mb-3">
<label class="form-label">Input with appended text</label>
<div class="input-group input-group-flat">
<input type="text" class="form-control text-right pr-0" value="yourfancydomain">
<span class="input-group-text">
.tabler.io
</span>
</div>
</div>
<div class="mb-3">
<label class="form-label">Input with appended link</label>
<div class="input-group input-group-flat">
<input type="password" class="form-control" value="ultrastrongpassword">
<span class="input-group-text">
<a href="#" class="input-group-link">Show password</a>
</span>
</div>
</div>
<div class="mb-3">
<label class="form-label">Input with appended icon links</label>
<div class="input-group input-group-flat">
<input type="text" class="form-control" >
<span class="input-group-text">
<a href="#" class="link-secondary" title="Clear search" data-toggle="tooltip"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<line x1="18" y1="6" x2="6" y2="18" />
<line x1="6" y1="6" x2="18" y2="18" />
</svg>
</a>
<a href="#" class="link-secondary ml-2" title="Search settings" data-toggle="tooltip"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<circle cx="6" cy="10" r="2" />
<line x1="6" y1="4" x2="6" y2="8" />
<line x1="6" y1="12" x2="6" y2="20" />
<circle cx="12" cy="16" r="2" />
<line x1="12" y1="4" x2="12" y2="14" />
<line x1="12" y1="18" x2="12" y2="20" />
<circle cx="18" cy="7" r="2" />
<line x1="18" y1="4" x2="18" y2="5" />
<line x1="18" y1="9" x2="18" y2="20" />
</svg>
</a>
<a href="#" class="link-secondary ml-2 disabled" title="Add notification" data-toggle="tooltip"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" />
<path d="M9 17v1a3 3 0 0 0 6 0v-1" />
</svg>
</a>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-4">
<div class="row">
<div class="col-md-6 col-xl-12">
<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 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="radio" 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="radio" 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="radio" value="blue" class="form-colorinput-input" />
<span class="form-colorinput-color bg-blue"></span>
</label>
</div>
<div class="col-auto">
<label class="form-colorinput">
<input name="color" type="radio" value="azure" class="form-colorinput-input" />
<span class="form-colorinput-color bg-azure"></span>
</label>
</div>
<div class="col-auto">
<label class="form-colorinput">
<input name="color" type="radio" 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="radio" 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="radio" 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="radio" 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="radio" 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="radio" 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="radio" value="lime" class="form-colorinput-input" />
<span class="form-colorinput-color bg-lime"></span>
</label>
</div>
</div>
</div>
<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 class="mb-3">
<label class="form-label">Validation States</label>
<input type="text" class="form-control is-valid mb-2" placeholder="Valid State..">
<input type="text" class="form-control is-invalid" placeholder="Invalid State..">
<div class="invalid-feedback">Invalid feedback</div>
</div>
<div class="mb-3">
<label class="form-label">Validation States</label>
<input type="text" class="form-control is-valid is-valid-lite mb-2" placeholder="Valid State..">
<input type="text" class="form-control is-invalid is-invalid-lite" placeholder="Invalid State..">
</div>
<label class="form-label">Form fieldset</label>
<fieldset class="form-fieldset">
<div class="mb-3">
<label class="form-label required">Full name</label>
<input type="text" class="form-control" autocomplete="off"/>
</div>
<div class="mb-3">
<label class="form-label required">Company</label>
<input type="text" class="form-control" autocomplete="off"/>
</div>
<div class="mb-3">
<label class="form-label required">Email</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="col-md-6 col-xl-12">
<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-label">HTML</span>
</label>
<label class="form-selectgroup-item">
<input type="checkbox" name="name" value="CSS" class="form-selectgroup-input">
<span class="form-selectgroup-label">CSS</span>
</label>
<label class="form-selectgroup-item">
<input type="checkbox" name="name" value="PHP" class="form-selectgroup-input">
<span class="form-selectgroup-label">PHP</span>
</label>
<label class="form-selectgroup-item">
<input type="checkbox" name="name" value="JavaScript" class="form-selectgroup-input">
<span class="form-selectgroup-label">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-label"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<circle cx="12" cy="12" r="4" />
<path d="M3 12h1M12 3v1M20 12h1M12 20v1M5.6 5.6l.7 .7M18.4 5.6l-.7 .7M17.7 17.7l.7 .7M6.3 17.7l-.7 .7" />
</svg>
</span>
</label>
<label class="form-selectgroup-item">
<input type="checkbox" name="name" value="moon" class="form-selectgroup-input">
<span class="form-selectgroup-label"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<path d="M16.2 4a9.03 9.03 0 1 0 3.9 12a6.5 6.5 0 1 1 -3.9 -12" />
</svg>
</span>
</label>
<label class="form-selectgroup-item">
<input type="checkbox" name="name" value="cloud-rain" class="form-selectgroup-input">
<span class="form-selectgroup-label"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<path d="M7 18a4.6 4.4 0 0 1 0 -9h0a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7" />
<path d="M11 13v2m0 3v2m4 -5v2m0 3v2" />
</svg>
</span>
</label>
<label class="form-selectgroup-item">
<input type="checkbox" name="name" value="cloud" class="form-selectgroup-input">
<span class="form-selectgroup-label"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<path d="M7 18a4.6 4.4 0 0 1 0 -9h0a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7h-12" />
</svg>
</span>
</label>
<label class="form-selectgroup-item">
<input type="checkbox" name="name" value="Other" class="form-selectgroup-input">
<span class="form-selectgroup-label">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-label"><svg xmlns="http://www.w3.org/2000/svg" class="icon mr-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<polyline points="5 12 3 12 12 3 21 12 19 12" />
<path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
<path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
</svg>
Home</span>
</label>
<label class="form-selectgroup-item">
<input type="radio" name="icons" value="user" class="form-selectgroup-input">
<span class="form-selectgroup-label"><svg xmlns="http://www.w3.org/2000/svg" class="icon mr-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<circle cx="12" cy="7" r="4" />
<path d="M5.5 21v-2a4 4 0 0 1 4 -4h5a4 4 0 0 1 4 4v2" />
</svg>
User</span>
</label>
<label class="form-selectgroup-item">
<input type="radio" name="icons" value="circle" class="form-selectgroup-input">
<span class="form-selectgroup-label"><svg xmlns="http://www.w3.org/2000/svg" class="icon mr-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<circle cx="12" cy="12" r="9" />
</svg>
Circle</span>
</label>
<label class="form-selectgroup-item">
<input type="radio" name="icons" value="square" class="form-selectgroup-input">
<span class="form-selectgroup-label"><svg xmlns="http://www.w3.org/2000/svg" class="icon mr-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<rect x="4" y="4" width="16" height="16" rx="2" />
</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-label">HTML</span>
</label>
<label class="form-selectgroup-item">
<input type="checkbox" name="name" value="CSS" class="form-selectgroup-input">
<span class="form-selectgroup-label">CSS</span>
</label>
<label class="form-selectgroup-item">
<input type="checkbox" name="name" value="PHP" class="form-selectgroup-input">
<span class="form-selectgroup-label">PHP</span>
</label>
<label class="form-selectgroup-item">
<input type="checkbox" name="name" value="JavaScript" class="form-selectgroup-input">
<span class="form-selectgroup-label">JavaScript</span>
</label>
</div>
</div>
<div class="mb-3">
<label class="form-label">Payment method</label>
<div class="form-selectgroup form-selectgroup-boxes d-flex flex-column">
<label class="form-selectgroup-item flex-fill">
<input type="radio" name="form-payment" value="visa" class="form-selectgroup-input">
<div class="form-selectgroup-label d-flex align-items-center p-3">
<div class="mr-3">
<span class="form-selectgroup-check"></span>
</div>
<div>
<span class="payment payment-provider-visa payment-sm mr-2"></span>
ending in <strong>7998</strong>
</div>
</div>
</label>
<label class="form-selectgroup-item flex-fill">
<input type="radio" name="form-payment" value="mastercard" class="form-selectgroup-input" checked>
<div class="form-selectgroup-label d-flex align-items-center p-3">
<div class="mr-3">
<span class="form-selectgroup-check"></span>
</div>
<div>
<span class="payment payment-provider-mastercard payment-sm mr-2"></span>
ending in <strong>2807</strong>
</div>
</div>
</label>
<label class="form-selectgroup-item flex-fill">
<input type="radio" name="form-payment" value="paypal" class="form-selectgroup-input">
<div class="form-selectgroup-label d-flex align-items-center p-3">
<div class="mr-3">
<span class="form-selectgroup-check"></span>
</div>
<div>
<span class="payment payment-provider-paypal payment-sm mr-2"></span>
</div>
</div>
</label>
</div>
</div>
<div class="mb-3">
<label class="form-label">Project Manager</label>
<div class="form-selectgroup form-selectgroup-boxes d-flex flex-column">
<label class="form-selectgroup-item flex-fill">
<input type="checkbox" name="form-project-manager[]" value="1" class="form-selectgroup-input" >
<div class="form-selectgroup-label d-flex align-items-center p-3">
<div class="mr-3">
<span class="form-selectgroup-check"></span>
</div>
<div class="form-selectgroup-label-content d-flex align-items-center">
<span class="avatar mr-3" style="background-image: url(./static/avatars/000m.jpg)"></span>
<div class="lh-sm">
<div class="strong">Paweł Kuna</div>
<div class="text-muted">UI Designer</div>
</div>
</div>
</div>
</label>
<label class="form-selectgroup-item flex-fill">
<input type="checkbox" name="form-project-manager[]" value="2" class="form-selectgroup-input" checked>
<div class="form-selectgroup-label d-flex align-items-center p-3">
<div class="mr-3">
<span class="form-selectgroup-check"></span>
</div>
<div class="form-selectgroup-label-content d-flex align-items-center">
<span class="avatar mr-3">JL</span>
<div class="lh-sm">
<div class="strong">Jeffie Lewzey</div>
<div class="text-muted">Chemical Engineer</div>
</div>
</div>
</div>
</label>
<label class="form-selectgroup-item flex-fill">
<input type="checkbox" name="form-project-manager[]" value="3" class="form-selectgroup-input" >
<div class="form-selectgroup-label d-flex align-items-center p-3">
<div class="mr-3">
<span class="form-selectgroup-check"></span>
</div>
<div class="form-selectgroup-label-content d-flex align-items-center">
<span class="avatar mr-3" style="background-image: url(./static/avatars/002m.jpg)"></span>
<div class="lh-sm">
<div class="strong">Mallory Hulme</div>
<div class="text-muted">Geologist IV</div>
</div>
</div>
</div>
</label>
<label class="form-selectgroup-item flex-fill">
<input type="checkbox" name="form-project-manager[]" value="4" class="form-selectgroup-input" >
<div class="form-selectgroup-label d-flex align-items-center p-3">
<div class="mr-3">
<span class="form-selectgroup-check"></span>
</div>
<div class="form-selectgroup-label-content d-flex align-items-center">
<span class="avatar mr-3" style="background-image: url(./static/avatars/003m.jpg)"></span>
<div class="lh-sm">
<div class="strong">Dunn Slane</div>
<div class="text-muted">Research Nurse</div>
</div>
</div>
</div>
</label>
<label class="form-selectgroup-item flex-fill">
<input type="checkbox" name="form-project-manager[]" value="5" class="form-selectgroup-input" >
<div class="form-selectgroup-label d-flex align-items-center p-3">
<div class="mr-3">
<span class="form-selectgroup-check"></span>
</div>
<div class="form-selectgroup-label-content d-flex align-items-center">
<span class="avatar mr-3" style="background-image: url(./static/avatars/000f.jpg)"></span>
<div class="lh-sm">
<div class="strong">Emmy Levet</div>
<div class="text-muted">VP Product Management</div>
</div>
</div>
</div>
</label>
</div>
</div>
<div class="mb-3">
<label class="form-label">Buttons group</label>
<div class="btn-group w-100">
<button type="button" class="btn btn-secondary">1 min</button>
<button type="button" class="btn btn-secondary active">5 min</button>
<button type="button" class="btn btn-secondary">10 min</button>
<button type="button" class="btn btn-secondary">30 min</button>
</div>
</div>
<div class="mb-3">
<label class="form-label">Buttons group with dropdown</label>
<div class="btn-group w-100">
<button type="button" class="btn btn-secondary">Option 1</button>
<button type="button" class="btn btn-secondary">Option 2</button>
<button type="button" class="btn btn-secondary active">Option 3</button>
<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Other
</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">
Option 4
</a>
<a class="dropdown-item" href="#">
Option 5
</a>
<a class="dropdown-item" href="#">
Option 6
</a>
</div>
</div>
</div>
</div>
<div class="mb-3">
<label class="form-label">Toolbar</label>
<div class="btn-group w-100">
<a href="#" class="btn btn-secondary btn-icon" aria-label="Button">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<path d="M7 5h6a3.5 3.5 0 0 1 0 7h-6z" />
<path d="M13 12h1a3.5 3.5 0 0 1 0 7h-7v-7" />
</svg>
</a>
<a href="#" class="btn btn-secondary btn-icon" aria-label="Button">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<line x1="11" y1="5" x2="17" y2="5" />
<line x1="7" y1="19" x2="13" y2="19" />
<line x1="14" y1="5" x2="10" y2="19" />
</svg>
</a>
<a href="#" class="btn btn-secondary btn-icon" aria-label="Button">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<line x1="7" y1="19" x2="17" y2="19" />
<path d="M8 5v6a4 4 0 0 0 8 0v-6" />
</svg>
</a>
<a href="#" class="btn btn-secondary btn-icon" aria-label="Button">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<rect x="8" y="8" width="12" height="12" rx="2" />
<path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2" />
</svg>
</a>
<a href="#" class="btn btn-secondary btn-icon" aria-label="Button">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<circle cx="6" cy="7" r="3" />
<circle cx="6" cy="17" r="3" />
<line x1="8.6" y1="8.6" x2="19" y2="19" />
<line x1="8.6" y1="15.4" x2="19" y2="5" />
</svg>
</a>
<a href="#" class="btn btn-secondary btn-icon" aria-label="Button">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<polyline points="14 3 14 8 19 8" />
<path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" />
<line x1="12" y1="11" x2="12" y2="17" />
<line x1="9" y1="14" x2="15" y2="14" />
</svg>
</a>
<a href="#" class="btn btn-secondary btn-icon" aria-label="Button">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<polyline points="14 3 14 8 19 8" />
<path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" />
<line x1="9" y1="14" x2="15" y2="14" />
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-4">
<div class="row">
<div class="col-md-6 col-xl-12">
<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 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 class="mb-3">
<label class="form-label">Checkboxes with description</label>
<label class="form-check form-check-highlight mb-2">
<input class="form-check-input" type="checkbox">
<div class="form-check-label">
Default checkbox
</div>
<div class="form-check-description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</label>
<label class="form-check form-check-highlight mb-2">
<input class="form-check-input" type="checkbox">
<div class="form-check-label">
Longer checkbox item that wraps on to two separate lines
</div>
<div class="form-check-description">
Ab alias aut, consequuntur cumque esse eveniet incidunt laborum minus molestiae.
</div>
</label>
<label class="form-check form-check-highlight">
<input class="form-check-input" type="checkbox">
<div class="form-check-label">
Default checkbox without description
</div>
</label>
</div>
<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 class="mb-3">
<div class="form-label">Custom File Input</div>
<div class="form-file">
<input type="file" class="form-file-input" id="customFile">
<label class="form-file-label" for="customFile">
<span class="form-file-text">Choose file...</span>
<span class="form-file-button">Browse</span>
</label>
</div>
</div>
<div class="mb-3">
<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 class="mb-3">
<label class="form-label">Text mask</label>
<input type="text" name="input-mask" class="form-control" data-mask="00/00/0000" data-mask-visible="true" placeholder="00/00/0000" autocomplete="off"/>
</div>
<div class="mb-3">
<label class="form-label">Telephone mask</label>
<input type="text" name="input-mask" class="form-control" data-mask="(00) 0000-0000" data-mask-visible="true" placeholder="(00) 0000-0000" autocomplete="off"/>
</div>
<div class="mb-3">
<label class="form-label">Autosize textarea</label>
<textarea class="form-control" data-toggle="autosize" placeholder="Typing something…"></textarea>
</div>
</div>
<div class="col-md-6 col-xl-12">
<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 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 class="mb-3">
<label class="form-label">Datepicker</label>
<input id="calendar-simple" type="date" value="2020-06-20" class="form-control mb-2" placeholder="Select a date" />
<div class="input-icon">
<input id="calendar-time" type="date" value="2020-06-20" class="form-control" placeholder="Select a date" />
<span class="input-icon-addon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<rect x="4" y="5" width="16" height="16" rx="2" />
<line x1="16" y1="3" x2="16" y2="7" />
<line x1="8" y1="3" x2="8" y2="7" />
<line x1="4" y1="11" x2="20" y2="11" />
<line x1="11" y1="15" x2="12" y2="15" />
<line x1="12" y1="15" x2="12" y2="18" />
</svg>
</span>
</div>
</div>
<div class="mb-3">
<label class="form-label">Inline datepicker</label>
<div id="calendar-inline"></div>
</div>
<div class="mb-3">
<label class="form-label">Progress</label>
<div class="progress mb-2">
<div class="progress-bar" style="width: 38%" role="progressbar" aria-valuenow="38" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">38% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-indeterminate bg-green"></div>
</div>
</div>
<div class="mb-3">
<label class="form-label">Form buttons</label>
<div class="btn-list">
<a href="#" class="btn btn-secondary btn-block">
<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>
Login with Github
</a>
<a href="#" class="btn btn-secondary btn-block">
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon text-twitter" fill="currentColor">
<path d="M23.954 4.569a10 10 0 0 1-2.825.775 4.958 4.958 0 0 0 2.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 0 0-8.384 4.482C7.691 8.094 4.066 6.13 1.64 3.161a4.822 4.822 0 0 0-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 0 1-2.228-.616v.061a4.923 4.923 0 0 0 3.946 4.827 4.996 4.996 0 0 1-2.212.085 4.937 4.937 0 0 0 4.604 3.417 9.868 9.868 0 0 1-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 0 0 7.557 2.209c9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63a9.936 9.936 0 0 0 2.46-2.548l-.047-.02z"/>
</svg>
Login with Twitter
</a>
</div>
</div>
<div class="mb-3">
<label class="form-label">Tags input</label>
<select name="tags" id="select-tags" class="form-select" multiple>
<option value="HTML" selected>HTML</option>
<option value="JavaScript" selected>JavaScript</option>
<option value="CSS">CSS</option>
<option value="jQuery">jQuery</option>
<option value="Bootstrap" selected>Bootstrap</option>
<option value="Ruby">Ruby</option>
<option value="Python">Python</option>
</select>
</div>
<div class="mb-3">
<label class="form-label">Advanced tags input</label>
<select name="tags-advanced" id="select-tags-advanced" class="form-select" multiple>
<option value="HTML">HTML</option>
<option value="JavaScript">JavaScript</option>
<option value="CSS">CSS</option>
<option value="jQuery">jQuery</option>
<option value="Bootstrap">Bootstrap</option>
<option value="Ruby" selected>Ruby</option>
<option value="Python" selected>Python</option>
</select>
</div>
<div class="mb-3">
<label class="form-label">Advanced select</label>
<select name="users" id="select-users" class="form-select">
<option value="1">Chuck Tesla</option>
<option value="2">Elon Musk</option>
<option value="3" selected>Paweł Kuna</option>
<option value="4">Nikola Tesla</option>
</select>
</div>
<div class="mb-3">
<label class="form-label">Select with avatars</label>
<select name="people" id="select-people" class="form-select">
<option value="1" data-data='{"avatar": "<span class=\"avatar avatar-sm rounded mr-2 ml-n1\" style=\"background-image: url(./static/avatars/000m.jpg)\"></span>"}'>Paweł Kuna</option>
<option value="2" data-data='{"avatar": "<span class=\"avatar avatar-sm rounded mr-2 ml-n1\">JL</span>"}'>Jeffie Lewzey</option>
<option value="3" data-data='{"avatar": "<span class=\"avatar avatar-sm rounded mr-2 ml-n1\" style=\"background-image: url(./static/avatars/002m.jpg)\"></span>"}'>Mallory Hulme</option>
<option value="4" data-data='{"avatar": "<span class=\"avatar avatar-sm rounded mr-2 ml-n1\" style=\"background-image: url(./static/avatars/003m.jpg)\"></span>"}' selected>Dunn Slane</option>
<option value="5" data-data='{"avatar": "<span class=\"avatar avatar-sm rounded mr-2 ml-n1\" style=\"background-image: url(./static/avatars/000f.jpg)\"></span>"}'>Emmy Levet</option>
<option value="6" data-data='{"avatar": "<span class=\"avatar avatar-sm rounded mr-2 ml-n1\" style=\"background-image: url(./static/avatars/001f.jpg)\"></span>"}'>Maryjo Lebarree</option>
<option value="7" data-data='{"avatar": "<span class=\"avatar avatar-sm rounded mr-2 ml-n1\">EP</span>"}'>Egan Poetz</option>
<option value="8" data-data='{"avatar": "<span class=\"avatar avatar-sm rounded mr-2 ml-n1\" style=\"background-image: url(./static/avatars/002f.jpg)\"></span>"}'>Kellie Skingley</option>
<option value="9" data-data='{"avatar": "<span class=\"avatar avatar-sm rounded mr-2 ml-n1\" style=\"background-image: url(./static/avatars/003f.jpg)\"></span>"}'>Christabel Charlwood</option>
<option value="10" data-data='{"avatar": "<span class=\"avatar avatar-sm rounded mr-2 ml-n1\">HS</span>"}'>Haskel Shelper</option>
<option value="11" data-data='{"avatar": "<span class=\"avatar avatar-sm rounded mr-2 ml-n1\" style=\"background-image: url(./static/avatars/006m.jpg)\"></span>"}'>Lorry Mion</option>
<option value="12" data-data='{"avatar": "<span class=\"avatar avatar-sm rounded mr-2 ml-n1\" style=\"background-image: url(./static/avatars/004f.jpg)\"></span>"}'>Leesa Beaty</option>
<option value="13" data-data='{"avatar": "<span class=\"avatar avatar-sm rounded mr-2 ml-n1\" style=\"background-image: url(./static/avatars/007m.jpg)\"></span>"}'>Perren Keemar</option>
<option value="14" data-data='{"avatar": "<span class=\"avatar avatar-sm rounded mr-2 ml-n1\">SA</span>"}'>Sunny Airey</option>
<option value="15" data-data='{"avatar": "<span class=\"avatar avatar-sm rounded mr-2 ml-n1\" style=\"background-image: url(./static/avatars/009m.jpg)\"></span>"}'>Geoffry Flaunders</option>
<option value="16" data-data='{"avatar": "<span class=\"avatar avatar-sm rounded mr-2 ml-n1\" style=\"background-image: url(./static/avatars/010m.jpg)\"></span>"}'>Thatcher Keel</option>
<option value="17" data-data='{"avatar": "<span class=\"avatar avatar-sm rounded mr-2 ml-n1\" style=\"background-image: url(./static/avatars/005f.jpg)\"></span>"}'>Dyann Escala</option>
<option value="18" data-data='{"avatar": "<span class=\"avatar avatar-sm rounded mr-2 ml-n1\" style=\"background-image: url(./static/avatars/006f.jpg)\"></span>"}'>Avivah Mugleston</option>
<option value="19" data-data='{"avatar": "<span class=\"avatar avatar-sm rounded mr-2 ml-n1\">AA</span>"}'>Arlie Armstead</option>
<option value="20" data-data='{"avatar": "<span class=\"avatar avatar-sm rounded mr-2 ml-n1\" style=\"background-image: url(./static/avatars/008f.jpg)\"></span>"}'>Tessie Curzon</option>
</select>
</div>
<div class="mb-3">
<label class="form-label">Select with flags</label>
<select name="countries" id="select-countries" class="form-select">
<option value="pl" data-data='{"flag": "pl"}' selected>Poland</option>
<option value="de" data-data='{"flag": "de"}'>Germany</option>
<option value="cz" data-data='{"flag": "cz"}'>Czech Republic</option>
<option value="br" data-data='{"flag": "br"}'>Brazil</option>
</select>
</div>
<div class="mb-3">
<label class="form-label">Advanced select with validation state</label>
<select name="countries" id="select-states" class="form-select is-valid">
<option value="pl" data-data='{"flag": "pl"}' selected>Poland</option>
<option value="de" data-data='{"flag": "de"}'>Germany</option>
<option value="cz" data-data='{"flag": "cz"}'>Czech Republic</option>
<option value="br" data-data='{"flag": "br"}'>Brazil</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card-footer text-right">
<div class="d-flex">
<a href="#" class="btn btn-link">Cancel</a>
<button type="submit" class="btn btn-primary ml-auto">Send data</button>
</div>
</div>
</form>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h3 class="card-title">Basic form</h3>
</div>
<div class="card-body">
<form>
<div class="form-group mb-3 ">
<label class="form-label">Email address</label>
<div >
<input type="email" class="form-control" aria-describedby="emailHelp" placeholder="Enter email">
<small class="form-hint">We'll never share your email with anyone else.</small>
</div>
</div>
<div class="form-group mb-3 ">
<label class="form-label">Password</label>
<div >
<input type="password" class="form-control" placeholder="Password">
<small class="form-hint">
Your password must be 8-20 characters long, contain letters and numbers, and must not contain
spaces, special characters, or emoji.
</small>
</div>
</div>
<div class="form-group mb-3 ">
<label class="form-label">Select</label>
<div >
<select class="form-select">
<option>Option 1</option>
</select>
</div>
</div>
<div class="form-group mb-3">
<label class="form-label">Checkboxes</label>
<div >
<label class="form-check">
<input class="form-check-input" type="checkbox" checked="">
<span class="form-check-label">Option 1</span>
</label>
<label class="form-check">
<input class="form-check-input" type="checkbox">
<span class="form-check-label">Option 2</span>
</label>
<label class="form-check">
<input class="form-check-input" type="checkbox" disabled="">
<span class="form-check-label">Option 3</span>
</label>
</div>
</div>
<div class="form-footer">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h3 class="card-title">Horizontal form</h3>
</div>
<div class="card-body">
<form>
<div class="form-group mb-3 row">
<label class="form-label col-3 col-form-label">Email address</label>
<div class="col">
<input type="email" class="form-control" aria-describedby="emailHelp" placeholder="Enter email">
<small class="form-hint">We'll never share your email with anyone else.</small>
</div>
</div>
<div class="form-group mb-3 row">
<label class="form-label col-3 col-form-label">Password</label>
<div class="col">
<input type="password" class="form-control" placeholder="Password">
<small class="form-hint">
Your password must be 8-20 characters long, contain letters and numbers, and must not contain
spaces, special characters, or emoji.
</small>
</div>
</div>
<div class="form-group mb-3 row">
<label class="form-label col-3 col-form-label">Select</label>
<div class="col">
<select class="form-select">
<option>Option 1</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="form-label col-3 col-form-label pt-0">Checkboxes</label>
<div class="col">
<label class="form-check">
<input class="form-check-input" type="checkbox" checked="">
<span class="form-check-label">Option 1</span>
</label>
<label class="form-check">
<input class="form-check-input" type="checkbox">
<span class="form-check-label">Option 2</span>
</label>
<label class="form-check">
<input class="form-check-input" type="checkbox" disabled="">
<span class="form-check-label">Option 3</span>
</label>
</div>
</div>
<div class="form-footer">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<footer class="footer footer-transparent">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="./docs/index.html" class="link-secondary">Documentation</a></li>
<li class="list-inline-item"><a href="./faq.html" class="link-secondary">FAQ</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
Copyright © 2020
<a href="." class="link-secondary">Tabler</a>.
All rights reserved.
</div>
</div>
</div>
</footer>
</div>
</div>
<!-- Libs JS -->
<script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
<script src="./dist/libs/autosize/dist/autosize.min.js"></script>
<script src="./dist/libs/imask/dist/imask.min.js"></script>
<script src="./dist/libs/selectize/dist/js/standalone/selectize.min.js"></script>
<script src="./dist/libs/flatpickr/dist/flatpickr.min.js"></script>
<script src="./dist/libs/flatpickr/dist/plugins/rangePlugin.js"></script>
<script src="./dist/libs/nouislider/distribute/nouislider.min.js"></script>
<!-- Tabler Core -->
<script src="./dist/js/tabler.min.js"></script>
<script>
// @formatter:off
noUiSlider.create(document.getElementById('range-simple'), {
start: 20,
connect: [true, false],
step: 10,
range: {
min: 0,
max: 100
}
});
// @formatter:on
</script>
<script>
// @formatter:off
noUiSlider.create(document.getElementById('range-connect'), {
start: [60, 90],
connect: [false, true, false],
step: 10,
range: {
min: 0,
max: 100
}
});
// @formatter:on
</script>
<script>
// @formatter:off
noUiSlider.create(document.getElementById('range-color'), {
start: 40,
connect: [true, false],
step: 10,
range: {
min: 0,
max: 100
}
});
// @formatter:on
</script>
<script>
document.addEventListener("DOMContentLoaded", function () {
flatpickr(document.getElementById('calendar-simple'), {
});
});
</script>
<script>
document.addEventListener("DOMContentLoaded", function () {
flatpickr(document.getElementById('calendar-time'), {
});
});
</script>
<script>
document.addEventListener("DOMContentLoaded", function () {
flatpickr(document.getElementById('calendar-inline'), {
inline: true,
});
});
</script>
<script>
$(document).ready(function () {
$('#select-tags').selectize({
maxItems: 15,
});
});
</script>
<script>
$(document).ready(function () {
$('#select-tags-advanced').selectize({
maxItems: 15,
plugins: ['remove_button'],
});
});
</script>
<script>
$(document).ready(function () {
$('#select-users').selectize({
});
});
</script>
<script>
$(document).ready(function () {
$('#select-people').selectize({
render: {
option: function (data, escape) {
return '<div class="option">' + data.avatar + '' + escape(data.text) + '</div>';
},
item: function (data, escape) {
return '<div class="d-flex align-items-center">' + data.avatar + '' + escape(data.text) + '</div>';
}
}
});
});
</script>
<script>
$(document).ready(function () {
$('#select-countries').selectize({
render: {
option: function (data, escape) {
return '<div class="option"><span class="flag flag-country-' + data.flag + ' mr-2 ml-n1"></span>' + escape(data.text) + '</div>';
},
item: function (data, escape) {
return '<div class="d-flex align-items-center"><span class="flag flag-country-' + data.flag + ' mr-2 ml-n1"></span>' + escape(data.text) + '</div>';
}
}
});
});
</script>
<script>
$(document).ready(function () {
$('#select-states').selectize({
render: {
option: function (data, escape) {
return '<div class="option"><span class="flag flag-country-' + data.flag + ' mr-2 ml-n1"></span>' + escape(data.text) + '</div>';
},
item: function (data, escape) {
return '<div class="d-flex align-items-center"><span class="flag flag-country-' + data.flag + ' mr-2 ml-n1"></span>' + escape(data.text) + '</div>';
}
}
});
});
</script>
<script>
(function () {
/**
* Input mask
*/
var maskElementList = [].slice.call(document.querySelectorAll('[data-mask]'))
maskElementList.map(function (maskEl) {
console.log('maskEl', maskEl);
return new IMask(maskEl, {
mask: maskEl.dataset.mask,
lazy: maskEl.dataset['mask-visible'] === 'true'
})
});
})();
</script>
<script>
(function () {
const elements = document.querySelectorAll('[data-toggle="autosize"]');
if (elements.length) {
elements.forEach(function (element) {
autosize(element);
});
}
})();
</script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink