-
Usage
+ Download
-
Tabler distributions are available on npm. Add tabler as a dependency in your npm project or use a specific version directly in your HTML files via CDN includes.
+
Download Tabler to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, yarn and more.
-
Installation
-
To install the latest tabler npm package in your project run:
-
-
-
npm install @tabler/core
-
-
-
-
Tabler 1.0.0 major version is now in active development. To get the latest alpha version run:
-
-
-
npm install @tabler/core@alpha
-
-
-
-
CDN support
-
All files included in @tabler/core npm package are available over a CDN.
-
Javascript
+
CDN via unpkg
+
All files included in @tabler/core npm package are available over a unpkg CDN. Use it to deliver cached version of Tabler’s compiled CSS and JS to your project.
-
<script src= "https://unpkg.com/@tabler/core@latest/dist/js/tabler.min.js" ></script>
+ <script src= "https://unpkg.com/@tabler/core@1.0.0-beta/dist/js/tabler.min.js" ></script>
+<link rel= "stylesheet" href= "https://unpkg.com/@tabler/core@1.0.0-beta/dist/css/tabler.min.css" >
-
Styles
+
You can also include additional Tabler plugins:
-
<link rel= "stylesheet" href= "https://unpkg.com/@tabler/core@latest/dist/css/tabler.min.css" >
+ <link rel= "stylesheet" href= "https://unpkg.com/@tabler/core@1.0.0-beta/dist/css/tabler-flags.min.css" >
+<link rel= "stylesheet" href= "https://unpkg.com/@tabler/core@1.0.0-beta/dist/css/tabler-payments.min.css" >
+<link rel= "stylesheet" href= "https://unpkg.com/@tabler/core@1.0.0-beta/dist/css/tabler-vendors.min.css" >
-
Other versions
-
To load a specific version replace latest with the desired version number.
-
+
Package managers
+
Install Tabler in your Node.js powered apps with the npm package:
+
-
<link rel= "stylesheet" href= "https://unpkg.com/@tabler/core@1.0.0-alpha.13/dist/css/tabler.min.css" >
-
-
-
-
To load the latest alpha version replace latest with alpha.
-
-
-
<script src= "https://unpkg.com/@tabler/core@alpha/dist/js/tabler.min.js" ></script>
+ npm install @tabler/core
@@ -672,7 +683,7 @@
All rights reserved.
- v1.0.0-alpha.24
+ v1.0.0-beta
diff --git a/demo/docs/dropdowns.html b/demo/docs/dropdowns.html
index 650ab8933..22c5e88a4 100644
--- a/demo/docs/dropdowns.html
+++ b/demo/docs/dropdowns.html
@@ -1,7 +1,7 @@
+
+
+
+
+
+
Color check - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Your input controls can come in a variety of colors, depending on your preferences. Click here to see the list of available colors.
+
+
+
+ <div class= "mb-3" >
+ <label class= "form-label" > Color Input</label>
+ <div class= "row g-2" >
+ <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 Input</label>
+ <div class= "row g-2" >
+ <div class= "col-auto" >
+ <label class= "form-colorinput" >
+ <input name= "color-rounded" type= "radio" value= "dark" class= "form-colorinput-input" />
+ <span class= "form-colorinput-color bg-dark rounded-circle" ></span>
+ </label>
+ </div>
+ <div class= "col-auto" >
+ <label class= "form-colorinput form-colorinput-light" >
+ <input name= "color-rounded" type= "radio" value= "white" class= "form-colorinput-input" checked />
+ <span class= "form-colorinput-color bg-white rounded-circle" ></span>
+ </label>
+ </div>
+ <div class= "col-auto" >
+ <label class= "form-colorinput" >
+ <input name= "color-rounded" type= "radio" value= "blue" class= "form-colorinput-input" />
+ <span class= "form-colorinput-color bg-blue rounded-circle" ></span>
+ </label>
+ </div>
+ <div class= "col-auto" >
+ <label class= "form-colorinput" >
+ <input name= "color-rounded" type= "radio" value= "azure" class= "form-colorinput-input" />
+ <span class= "form-colorinput-color bg-azure rounded-circle" ></span>
+ </label>
+ </div>
+ <div class= "col-auto" >
+ <label class= "form-colorinput" >
+ <input name= "color-rounded" type= "radio" value= "indigo" class= "form-colorinput-input" />
+ <span class= "form-colorinput-color bg-indigo rounded-circle" ></span>
+ </label>
+ </div>
+ <div class= "col-auto" >
+ <label class= "form-colorinput" >
+ <input name= "color-rounded" type= "radio" value= "purple" class= "form-colorinput-input" />
+ <span class= "form-colorinput-color bg-purple rounded-circle" ></span>
+ </label>
+ </div>
+ <div class= "col-auto" >
+ <label class= "form-colorinput" >
+ <input name= "color-rounded" type= "radio" value= "pink" class= "form-colorinput-input" />
+ <span class= "form-colorinput-color bg-pink rounded-circle" ></span>
+ </label>
+ </div>
+ <div class= "col-auto" >
+ <label class= "form-colorinput" >
+ <input name= "color-rounded" type= "radio" value= "red" class= "form-colorinput-input" />
+ <span class= "form-colorinput-color bg-red rounded-circle" ></span>
+ </label>
+ </div>
+ <div class= "col-auto" >
+ <label class= "form-colorinput" >
+ <input name= "color-rounded" type= "radio" value= "orange" class= "form-colorinput-input" />
+ <span class= "form-colorinput-color bg-orange rounded-circle" ></span>
+ </label>
+ </div>
+ <div class= "col-auto" >
+ <label class= "form-colorinput" >
+ <input name= "color-rounded" type= "radio" value= "yellow" class= "form-colorinput-input" />
+ <span class= "form-colorinput-color bg-yellow rounded-circle" ></span>
+ </label>
+ </div>
+ <div class= "col-auto" >
+ <label class= "form-colorinput" >
+ <input name= "color-rounded" type= "radio" value= "lime" class= "form-colorinput-input" />
+ <span class= "form-colorinput-color bg-lime rounded-circle" ></span>
+ </label>
+ </div>
+ </div>
+</div>
+
+
+
Add an color picker to your form to let users customise it according to their preferences.
+
+
+
+ <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>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/demo/docs/form-elements.html b/demo/docs/form-elements.html
index f1e618733..8b4317806 100644
--- a/demo/docs/form-elements.html
+++ b/demo/docs/form-elements.html
@@ -1,7 +1,7 @@
+
+
+
+
+
+
Form fieldset - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Group parts of your form to make it well-structured and clearer for users, using the fieldset element.
+
+
+
+ <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= "mb-3" >
+ <label class= "form-label" > Phone number</label>
+ <input type= "tel" class= "form-control" autocomplete= "off" />
+ </div>
+ <label class= "form-check" >
+ <input type= "checkbox" class= "form-check-input" />
+ <span class= "form-check-label required" > I agree to the Terms & Conditions</span>
+ </label>
+</fieldset>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/demo/docs/form-helpers.html b/demo/docs/form-helpers.html
index 28ed6d5c3..9dd6d0adb 100644
--- a/demo/docs/form-helpers.html
+++ b/demo/docs/form-helpers.html
@@ -1,7 +1,7 @@
+
+
+
+
+
+
Image check - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Add an image check to your form and give users visually attractive options to choose from.
+
+
+
+ <div class= "mb-3" >
+ <label class= "form-label" > Image Check</label>
+ <div class= "row g-2" >
+ <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= "..." 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= "..." 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= "..." 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= "..." 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= "..." 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= "..." 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= "..." 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= "..." 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= "..." 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" > Person Check</label>
+ <div class= "row g-2" >
+ <div class= "col-auto" >
+ <label class= "form-imagecheck mb-2" >
+ <input name= "form-imagecheck" type= "checkbox" value= "1" class= "form-imagecheck-input" />
+ <span class= "form-imagecheck-figure" >
+ <span class= "form-imagecheck-image" >
+ <span class= "avatar avatar-md" style= "background-image: url(...)" ></span>
+ </span>
+ </span>
+ </label>
+ </div>
+ <div class= "col-auto" >
+ <label class= "form-imagecheck mb-2" >
+ <input name= "form-imagecheck" type= "checkbox" value= "2" class= "form-imagecheck-input" checked />
+ <span class= "form-imagecheck-figure" >
+ <span class= "form-imagecheck-image" >
+ <span class= "avatar avatar-md" > HS</span>
+ </span>
+ </span>
+ </label>
+ </div>
+ <div class= "col-auto" >
+ <label class= "form-imagecheck mb-2" >
+ <input name= "form-imagecheck" type= "checkbox" value= "3" class= "form-imagecheck-input" />
+ <span class= "form-imagecheck-figure" >
+ <span class= "form-imagecheck-image" >
+ <span class= "avatar avatar-md" style= "background-image: url(...)" ></span>
+ </span>
+ </span>
+ </label>
+ </div>
+ <div class= "col-auto" >
+ <label class= "form-imagecheck mb-2" >
+ <input name= "form-imagecheck" type= "checkbox" value= "4" class= "form-imagecheck-input" checked />
+ <span class= "form-imagecheck-figure" >
+ <span class= "form-imagecheck-image" >
+ <span class= "avatar avatar-md" style= "background-image: url(...)" ></span>
+ </span>
+ </span>
+ </label>
+ </div>
+ <div class= "col-auto" >
+ <label class= "form-imagecheck mb-2" >
+ <input name= "form-imagecheck" type= "checkbox" value= "5" class= "form-imagecheck-input" />
+ <span class= "form-imagecheck-figure" >
+ <span class= "form-imagecheck-image" >
+ <span class= "avatar avatar-md" style= "background-image: url(...)" ></span>
+ </span>
+ </span>
+ </label>
+ </div>
+ <div class= "col-auto" >
+ <label class= "form-imagecheck mb-2" >
+ <input name= "form-imagecheck" type= "checkbox" value= "6" class= "form-imagecheck-input" />
+ <span class= "form-imagecheck-figure" >
+ <span class= "form-imagecheck-image" >
+ <span class= "avatar avatar-md" > SA</span>
+ </span>
+ </span>
+ </label>
+ </div>
+ <div class= "col-auto" >
+ <label class= "form-imagecheck mb-2" >
+ <input name= "form-imagecheck" type= "checkbox" value= "7" class= "form-imagecheck-input" checked />
+ <span class= "form-imagecheck-figure" >
+ <span class= "form-imagecheck-image" >
+ <span class= "avatar avatar-md" style= "background-image: url(...)" ></span>
+ </span>
+ </span>
+ </label>
+ </div>
+ <div class= "col-auto" >
+ <label class= "form-imagecheck mb-2" >
+ <input name= "form-imagecheck" type= "checkbox" value= "8" class= "form-imagecheck-input" />
+ <span class= "form-imagecheck-figure" >
+ <span class= "form-imagecheck-image" >
+ <span class= "avatar avatar-md" style= "background-image: url(...)" ></span>
+ </span>
+ </span>
+ </label>
+ </div>
+ <div class= "col-auto" >
+ <label class= "form-imagecheck mb-2" >
+ <input name= "form-imagecheck" type= "checkbox" value= "9" class= "form-imagecheck-input" />
+ <span class= "form-imagecheck-figure" >
+ <span class= "form-imagecheck-image" >
+ <span class= "avatar avatar-md" style= "background-image: url(...)" ></span>
+ </span>
+ </span>
+ </label>
+ </div>
+ </div>
+</div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/demo/docs/form-selectboxes.html b/demo/docs/form-selectboxes.html
new file mode 100644
index 000000000..4e9f15843
--- /dev/null
+++ b/demo/docs/form-selectboxes.html
@@ -0,0 +1,1123 @@
+
+
+
+
+
+
+
+
Form selectboxes - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Add selectboxes to make your form more intuitive by providing users with a set of options to choose from. You can add simple selectboxes with a label, use icons only or icons with labels. Alternatively, you can use pill selectboxes if they go well with your design.
+
+
+
+
+
+
Selectgroup with icons and text
+
+
+
+
+
+
+
+ <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 icon code -->
+ </span>
+ </label>
+ <label class= "form-selectgroup-item" >
+ <input type= "checkbox" name= "name" value= "moon" class= "form-selectgroup-input" >
+ <span class= "form-selectgroup-label" > <!-- SVG icon code -->
+ </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 icon code -->
+ </span>
+ </label>
+ <label class= "form-selectgroup-item" >
+ <input type= "checkbox" name= "name" value= "cloud" class= "form-selectgroup-input" >
+ <span class= "form-selectgroup-label" > <!-- SVG icon code -->
+ </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 icon code with class="me-1" -->
+ 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 icon code with class="me-1" -->
+ 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 icon code with class="me-1" -->
+ 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 icon code with class="me-1" -->
+ 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>
+
+
Advanced selectboxes
+
Use more advanced selectboxes to display the range of available options. You can choose selectboxes with radio buttons, if you want users to select only one option or with checkboxes, if they are allowed to choose multiple options.
+
+
+
+ <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= "me-3" >
+ <span class= "form-selectgroup-check" ></span>
+ </div>
+ <div>
+ <span class= "payment payment-provider-visa payment-xs me-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= "me-3" >
+ <span class= "form-selectgroup-check" ></span>
+ </div>
+ <div>
+ <span class= "payment payment-provider-mastercard payment-xs me-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= "me-3" >
+ <span class= "form-selectgroup-check" ></span>
+ </div>
+ <div>
+ <span class= "payment payment-provider-paypal payment-xs me-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= "me-3" >
+ <span class= "form-selectgroup-check" ></span>
+ </div>
+ <div class= "form-selectgroup-label-content d-flex align-items-center" >
+ <span class= "avatar me-3" style= "background-image: url(...)" ></span>
+ <div>
+ <div class= "font-weight-medium" > 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= "me-3" >
+ <span class= "form-selectgroup-check" ></span>
+ </div>
+ <div class= "form-selectgroup-label-content d-flex align-items-center" >
+ <span class= "avatar me-3" > JL</span>
+ <div>
+ <div class= "font-weight-medium" > 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= "me-3" >
+ <span class= "form-selectgroup-check" ></span>
+ </div>
+ <div class= "form-selectgroup-label-content d-flex align-items-center" >
+ <span class= "avatar me-3" style= "background-image: url(...)" ></span>
+ <div>
+ <div class= "font-weight-medium" > 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= "me-3" >
+ <span class= "form-selectgroup-check" ></span>
+ </div>
+ <div class= "form-selectgroup-label-content d-flex align-items-center" >
+ <span class= "avatar me-3" style= "background-image: url(...)" ></span>
+ <div>
+ <div class= "font-weight-medium" > 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= "me-3" >
+ <span class= "form-selectgroup-check" ></span>
+ </div>
+ <div class= "form-selectgroup-label-content d-flex align-items-center" >
+ <span class= "avatar me-3" style= "background-image: url(...)" ></span>
+ <div>
+ <div class= "font-weight-medium" > Emmy Levet</div>
+ <div class= "text-muted" > VP Product Management</div>
+ </div>
+ </div>
+ </div>
+ </label>
+ </div>
+</div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/demo/docs/form-validation.html b/demo/docs/form-validation.html
new file mode 100644
index 000000000..9caa1de7a
--- /dev/null
+++ b/demo/docs/form-validation.html
@@ -0,0 +1,713 @@
+
+
+
+
+
+
+
+
Validation states - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Validation states
+
+
To inform users whether the entered value is correct or not, use either of the validation states. Thanks to that, users will immediately know which form elements they need to correct and, if the state displays as invalid, why the value is incorrect.
+
+
+
+
+
Validation States
+
+
+
Invalid feedback
+
+
+
+
+
+ <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>
+
+
Subtle validation states
+
If you prefer a more subtle manner of informing users of the input control validation state, you can use tick and cross symbols and resign from colored control frames and the validation feedback.
+
+
+
+ <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>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/demo/docs/getting-started.html b/demo/docs/getting-started.html
new file mode 100644
index 000000000..e7f2640bb
--- /dev/null
+++ b/demo/docs/getting-started.html
@@ -0,0 +1,697 @@
+
+
+
+
+
+
+
+
Getting started - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
What are the benefits?
+
Tabler is a perfect solution if you want to create an interface which is not only user-friendly but also fully responsive. Thanks to the big choice of ready-made components, you can customize your design and adapt it to the needs of even the most demanding users. On top of that, Tabler is an open source solution, continuously developed and improved by the open source community.
+
Set up the environment
+
To use our build system and run our documentation locally, you’ll need a copy of Tabler’s source files. Follow the steps below:
+
+ Install Node.js , which we use to manage our dependencies.Navigate to the root /tabler directory and run npm install to install our local dependencies listed in package.json.
+ Install Ruby - the recommended version is 2.5.5 .Install Bundler with gem install bundler and, finally, run bundle install. It will install all Ruby dependencies, such as Jekyll and plugins .
+
Windows users
+
+ Install Git in C:\Program Files\git\bin directory and run npm config set script-shell "C:\Program Files\git\bin\bash.exe" to change the default shell.Install Ruby+Devkit - recommended version is 2.5.5 .Read guide to get Jekyll up and running without problems.
+
Once you’ve completed the setup, you’ll be able to run the various commands provided from the command line.
+
Build Tabler locally
+
+ From the root /tabler directory, run npm run start in the command line.
+ Open http://localhost:3000 in your browser, and voilà.
+ Any change in /src directory will build the application and refresh the page.
+
+
Bugs and feature requests
+
Found a bug or have a feature request? Please open a new issue .
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/demo/docs/icons.html b/demo/docs/icons.html
index 94f5a7d96..2de3fea4f 100644
--- a/demo/docs/icons.html
+++ b/demo/docs/icons.html
@@ -1,7 +1,7 @@
+