@tabler/core 1.0.0-beta22 → 1.0.0-beta24

package/docs/ui/forms/form-elements.mdx

@@ -1,22 +1,38 @@
 ---
 title: Form elements
-description: Forms are one of the most important types of interaction with a website or app. Since their aim is to enable users to make a purchase, subscribe to a service or sign up to create an account, it's important to make sure they are easy to complete and help increase conversion rates. Use the available elements to create forms which are well-structured and user-friendly.
+summary: Forms are one of the most important types of interaction with a website or app. Since their aim is to enable users to make a purchase, subscribe to a service or sign up to create an account, it's important to make sure they are easy to complete and help increase conversion rates. Use the available elements to create forms which are well-structured and user-friendly.
 bootstrapLink: components/forms/
 libs: nouislider
+description: Design user-friendly and effective forms.
+order: 1
 ---
 
 ## Classic inputs
 
-Use classic, user-friendly inputs, label them appropriately and include input placeholders that will help users avoid confusion when completing a form.
+Use classic, user-friendly inputs, label them appropriately and include input placeholders that will help users avoid confusion when completing a form. Add the `form-control` class to style your input controls.
 
-```html code example centered columns={1} height="20rem"
+```html
+<input type="text" class="form-control" name="example-text-input" placeholder="Input placeholder" />
+```
+
+All variants of the input control are available in the examples below:
+
+```html example columns={1} height="25rem"
 <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" />
+  <input type="password" 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-password-input" placeholder="Input placeholder" disabled />
+</div>
+<div class="mb-3">
+  <label class="form-label">Readonly</label>
+  <input type="text" class="form-control" name="example-password-input" value="Readolny value" readonly />
 </div>
 ```
 
@@ -48,7 +64,7 @@ Use the `form-control-rounded` class if you prefer form controls with rounded co
   <div class="input-icon">
     <input type="text" value="" class="form-control form-control-rounded" placeholder="Search…" />
     <span class="input-icon-addon">
-      <!-- SVG icon from http://tabler-icons.io/i/search -->
+      <!-- SVG icon from http://tabler.io/icons/icon/search -->
       <svg>...</svg>
     </span>
   </div>
@@ -59,7 +75,7 @@ Use the `form-control-rounded` class if you prefer form controls with rounded co
 
 You can remove borders from your form control by adding the `form-control-flush` class.
 
-```html code example centered columns={1} height="20rem"
+```html example centered columns={1} height="20rem"
 <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.." />
@@ -70,7 +86,7 @@ You can remove borders from your form control by adding the `form-control-flush`
 
 Add icons to your input controls to suggest users what they should enter or inform them of the current state of a form element.
 
-```html example code centered columns={1} height="20rem"
+```html example centered columns={1} height="20rem"
 <div class="mb-3">
   <label class="form-label">Icon input</label>
   <div class="input-icon mb-3">
@@ -115,7 +131,7 @@ Add icons to your input controls to suggest users what they should enter or info
 
 Include an additional element in your input section, such as a button which can be used to submit the information enetered in the input control.
 
-```html example code centered columns={1} height="20rem"
+```html example centered columns={1} height="20rem"
 <div class="mb-3">
   <label class="form-label">Separated inputs</label>
   <div class="row g-2">
@@ -124,7 +140,6 @@ Include an additional element in your input section, such as a button which can
     </div>
     <div class="col-auto">
       <a href="#" class="btn 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" fill="none" />
           <circle cx="10" cy="10" r="7" />
@@ -142,7 +157,7 @@ Use a multi-line text input control to enable users to enter longer pieces of te
 
 Add one of the available selects - either a dropdown or a multiple choice select - to let users choose from a predefined set of options.
 
-```html code example centered columns={1} height="30rem"
+```html example centered columns={1} height="30rem"
 <div class="mb-3">
   <label class="form-label">Textarea</label>
   <textarea class="form-control" name="example-textarea" placeholder="Textarea placeholder"></textarea>
@@ -169,7 +184,7 @@ Add one of the available selects - either a dropdown or a multiple choice select
 
 Choose the size of an input control that will go well with your form design. Apart from the default size, you can also use small and large input controls.
 
-```html code example centered columns={1} height="20rem"
+```html example centered columns={1} height="20rem"
 <div class="mb-3">
   <label class="form-label">Input sizing</label>
   <input class="form-control form-control-lg mb-2" type="text" placeholder=".form-control-lg" />
@@ -350,7 +365,7 @@ Add a range slider to make it possible for users to set a value or range, such a
 
 Create a group of input controls and place add-ons on either side of an input.
 
-```html code example centered columns={1} height="20rem"
+```html example centered columns={1} height="20rem"
 <div class="mb-3">
   <label class="form-label">Input group</label>
   <div class="input-group mb-2">
@@ -381,7 +396,7 @@ Create a group of input controls and place add-ons on either side of an input.
 
 Add checkboxes or radio buttons on either side of your input control.
 
-```html code example centered columns={1} height="20rem"
+```html example centered columns={1} height="20rem"
 <div class="mb-3">
   <label class="form-label">Input with checkbox or radios</label>
   <div class="input-group mb-2">
@@ -403,7 +418,7 @@ Add checkboxes or radio buttons on either side of your input control.
 
 Add text to your input control, either before or after the text which is to be entered by a user.
 
-```html code example centered columns={1} height="20rem"
+```html example centered columns={1} height="20rem"
 <div class="mb-3">
   <label class="form-label">Input with prepended text</label>
   <div class="input-group input-group-flat mb-2">
@@ -425,7 +440,7 @@ Add text to your input control, either before or after the text which is to be e
 
 Include a link in your input control to add a clickable element within the control.
 
-```html code example centered columns={1} height="20rem"
+```html example centered columns={1} height="20rem"
 <div class="mb-3">
   <label class="form-label">Input with appended link</label>
   <div class="input-group input-group-flat">
@@ -441,7 +456,7 @@ Include a link in your input control to add a clickable element within the contr
 
 Include a `<kbd>` in your input control to add shortcut to the control.
 
-```html code example centered columns={1}
+```html example centered columns={1}
 <div class="mb-3">
   <label class="form-label">Input with appended link</label>
   <div class="input-group input-group-flat">
@@ -457,7 +472,7 @@ Include a `<kbd>` in your input control to add shortcut to the control.
 
 Add an icon link which you want to display at the end of your input control to visually represent actions which a user can take.
 
-```html example code centered columns={1} height="20rem"
+```html example centered columns={1} height="20rem"
 <div class="mb-3">
   <label class="form-label">Input with appended icon links</label>
   <div class="input-group input-group-flat">

package/docs/ui/forms/form-fieldset.mdx

@@ -1,6 +1,7 @@
 ---
 title: Form fieldset
-description: By grouping form elements together with the fieldset element, you can improve the organization and accessibility of your forms, making it easier for users to understand the purpose of each input and provide accurate information.
+summary: By grouping form elements together with the fieldset element, you can improve the organization and accessibility of your forms, making it easier for users to understand the purpose of each input and provide accurate information.
+description: Group form elements for clarity.
 ---
 
 ## Default markup
@@ -37,7 +38,7 @@ Group parts of your form to make it well-structured and clearer for users, using
   ...
   <div class="mb-3">
     <label class="form-label required">Company</label>
-    <input type="text" class="form-control" autocomplete="off"/>
+    <input type="text" class="form-control" autocomplete="off" />
   </div>
   ...
 </fieldset>

package/docs/ui/forms/form-helpers.mdx

@@ -1,12 +1,79 @@
 ---
 title: Form helpers
-description: A form helper can be used to provide users with additional information about the elements of a form that may be unclear.
+summary: Use form helpers to provide additional information about a form element. You can use input help, required field, form hint, and additional info inside the label.
+description: Provide additional guidance in forms.
 ---
 
 ## Input help
 
-Use an input helper to display additional information about a form element. The text label will appear once a user hovers over the helper.
+Use an input helper to display additional information about a form element. The text label will appear once a user hovers over the helper. To add an input helper, use the `.form-help` class.
 
-```html example code centered
-<span class="form-help" data-bs-toggle="popover" data-bs-placement="top" data-bs-html="true" data-bs-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>">?</span>
+```html
+<span class="form-help" data-bs-toggle="popover" data-bs-placement="top" data-bs-html="true" data-bs-content="<p>...</p>">?</span>
 ```
+
+Look at the example below to see how the input help works:
+
+```html example centered height="25rem" columns={1}
+<div>
+  <label class="form-label">
+    ZIP Code
+    <span class="form-help" data-bs-toggle="popover" data-bs-placement="top" data-bs-html="true" data-bs-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>">?</span>
+  </label>
+  <input type="text" class="form-control" placeholder="Your ZIP Code">
+</div>
+```
+
+## Required field
+
+Use the `.required` class to indicate that a field is required. It will add a red asterisk to the label.
+
+```html
+<label class="form-label required">Required</label>
+```
+
+Look at the example below to see how the required field works:
+
+```html example centered columns={1}
+<div>
+  <label class="form-label required">Required</label>
+  <input type="text" class="form-control" name="..." placeholder="Required...">
+</div>
+```
+
+## Form hint
+
+Use a form hint to provide users with additional information about a form element. The text will appear below the input field. To add a form hint, use the `.form-hint` class.
+
+```html
+<div class="form-hint">We'll never share your email with anyone else.</div>
+```
+
+Look at the example below to see how the form hint works:
+
+```html example centered columns={1}
+<div>
+  <label class="form-label">Email address</label>
+  <input type="email" class="form-control" placeholder="Enter your email address">
+  <div class="form-hint">We'll never share your email with anyone else.</div>
+</div>
+```
+
+## Additional info inside label
+
+Use the `.form-label-description` class to add additional information to the label. The text will appear next to the label. You can use it to add for example a character counter.
+
+```html
+<label class="form-label">Textarea <span class="form-label-description">56/100</span>
+</label>
+```
+
+This example shows how to use the additional info inside the label:
+
+```html example centered columns={1} height="15rem"
+<div>
+  <label class="form-label">Textarea <span class="form-label-description">56/100</span>
+  </label>
+  <textarea class="form-control" name="" rows="3" placeholder="Content.."></textarea>
+</div>
+```

package/docs/ui/forms/form-image-check.mdx

@@ -1,8 +1,23 @@
 ---
 title: Image check
+summary: The image check is a great way to make your form more user-friendly and engaging. You can use the image check to create a visually appealing form that will help users make decisions quickly and easily.
+description: Add visual appeal to forms with images.
 ---
 
-Add an image check to your form and give users visually attractive options to choose from.
+## Default markup
+
+To build an image check, you need to use the `.form-imagecheck` class and the `.form-imagecheck-input` class for the input element. You can also use the `.form-imagecheck-figure` class to style the image and the `.form-imagecheck-image` class to style the image itself.
+
+```html
+<label class="form-imagecheck">
+  <input name="..." type="checkbox" value="" class="form-imagecheck-input" checked />
+  <span class="form-imagecheck-figure">
+    <img src="..." alt="" class="form-imagecheck-image" />
+  </span>
+</label>
+```
+
+Look at the examples below to see how the image check works:
 
 ```html example centered columns="2" height="15rem"
 <div class="mb-3">
@@ -10,7 +25,7 @@ Add an image check to your form and give users visually attractive options to ch
   <div class="row g-2">
     <div class="col-3">
       <label class="form-imagecheck">
-        <input name="form-imagecheck" type="checkbox" value="1" class="form-imagecheck-input" />
+        <input name="image" type="checkbox" value="1" class="form-imagecheck-input" />
         <span class="form-imagecheck-figure">
           <img src="/samples/photos/everything-you-need-to-work-from-your-bed-2.jpg" alt="" class="form-imagecheck-image" />
         </span>
@@ -18,7 +33,7 @@ Add an image check to your form and give users visually attractive options to ch
     </div>
     <div class="col-3">
       <label class="form-imagecheck">
-        <input name="form-imagecheck" type="checkbox" value="2" class="form-imagecheck-input" checked />
+        <input name="image" type="checkbox" value="2" class="form-imagecheck-input" checked />
         <span class="form-imagecheck-figure">
           <img src="/samples/photos/color-palette-guide-sample-colors-catalog-.jpg" alt="" class="form-imagecheck-image" />
         </span>
@@ -26,7 +41,7 @@ Add an image check to your form and give users visually attractive options to ch
     </div>
     <div class="col-3">
       <label class="form-imagecheck">
-        <input name="form-imagecheck" type="checkbox" value="3" class="form-imagecheck-input" />
+        <input name="image" type="checkbox" value="3" class="form-imagecheck-input" />
         <span class="form-imagecheck-figure">
           <img src="/samples/photos/woman-read-book-and-drink-coffee-2.jpg" alt="" class="form-imagecheck-image" />
         </span>
@@ -34,7 +49,7 @@ Add an image check to your form and give users visually attractive options to ch
     </div>
     <div class="col-3">
       <label class="form-imagecheck">
-        <input name="form-imagecheck" type="checkbox" value="4" class="form-imagecheck-input" checked />
+        <input name="image" type="checkbox" value="4" class="form-imagecheck-input" checked />
         <span class="form-imagecheck-figure">
           <img src="/samples/photos/stylish-workspace-with-macbook-pro-2.jpg" alt="" class="form-imagecheck-image" />
         </span>
@@ -44,14 +59,9 @@ Add an image check to your form and give users visually attractive options to ch
 </div>
 ```
 
-```html
-<label class="form-imagecheck">
-  <input name="" type="checkbox" value="" class="form-imagecheck-input" checked />
-  <span class="form-imagecheck-figure">
-    <img src="..." alt="" class="form-imagecheck-image" />
-  </span>
-</label>
-```
+## Radio buttons
+
+If you want to use the image check as a radio button, you can change the input type to `radio`. 
 
 ```html example centered columns="2" height="15rem"
 <div class="mb-3">
@@ -59,7 +69,7 @@ Add an image check to your form and give users visually attractive options to ch
   <div class="row g-2">
     <div class="col-3">
       <label class="form-imagecheck mb-2">
-        <input name="form-imagecheck-radio" type="radio" value="1" class="form-imagecheck-input" />
+        <input name="image" type="radio" value="1" class="form-imagecheck-input" />
         <span class="form-imagecheck-figure">
           <img src="/samples/photos/woman-drinking-hot-tea-in-her-home-office.jpg" alt="" class="form-imagecheck-image" />
         </span>
@@ -67,7 +77,7 @@ Add an image check to your form and give users visually attractive options to ch
     </div>
     <div class="col-3">
       <label class="form-imagecheck mb-2">
-        <input name="form-imagecheck-radio" type="radio" value="2" class="form-imagecheck-input" checked />
+        <input name="image" type="radio" value="2" class="form-imagecheck-input" checked />
         <span class="form-imagecheck-figure">
           <img src="/samples/photos/young-woman-sitting-on-the-sofa-and-working-on-her-laptop-3.jpg" alt="" class="form-imagecheck-image" />
         </span>
@@ -75,7 +85,7 @@ Add an image check to your form and give users visually attractive options to ch
     </div>
     <div class="col-3">
       <label class="form-imagecheck mb-2">
-        <input name="form-imagecheck-radio" type="radio" value="3" class="form-imagecheck-input" />
+        <input name="image" type="radio" value="3" class="form-imagecheck-input" />
         <span class="form-imagecheck-figure">
           <img src="/samples/photos/beautiful-blonde-woman-relaxing-with-a-can-of-coke-on-a-tree-stump-by-the-beach.jpg" alt="" class="form-imagecheck-image" />
         </span>
@@ -83,7 +93,7 @@ Add an image check to your form and give users visually attractive options to ch
     </div>
     <div class="col-3">
       <label class="form-imagecheck mb-2">
-        <input name="form-imagecheck-radio" type="radio" value="4" class="form-imagecheck-input" checked />
+        <input name="image" type="radio" value="4" class="form-imagecheck-input" checked />
         <span class="form-imagecheck-figure">
           <img src="/samples/photos/book-on-the-grass.jpg" alt="" class="form-imagecheck-image" />
         </span>
@@ -95,53 +105,57 @@ Add an image check to your form and give users visually attractive options to ch
 
 ```html
 <label class="form-imagecheck">
-  <input name="form-imagecheck-radio" type="radio" value="1" class="form-imagecheck-input" />
+  <input name="..." type="radio" value="1" class="form-imagecheck-input" />
   <span class="form-imagecheck-figure">
-    <img src="/samples/photos/woman-drinking-hot-tea-in-her-home-office.jpg" alt="" class="form-imagecheck-image" />
+    <img src="..." alt="" class="form-imagecheck-image" />
   </span>
 </label>
 ```
 
-```html example centered columns="1" height="15rem"
+## Avatars
+
+If you want to use the image check with avatars, you can use the `.avatar` instead of the image.
+
+```html example centered columns={2} height="15rem"
 <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" />
+        <input name="image" 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(/samples/avatars/057f.jpg)"></span>
+            <span class="avatar avatar-xl" style="background-image: url(/samples/avatars/057f.jpg)"></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 />
+        <input name="image" 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 class="avatar avatar-xl">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" />
+        <input name="image" 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(/samples/avatars/062m.jpg)"></span>
+            <span class="avatar avatar-xl" style="background-image: url(/samples/avatars/062m.jpg)"></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 />
+        <input name="image" 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(/samples/avatars/070m.jpg)"></span>
+            <span class="avatar avatar-xl" style="background-image: url(/samples/avatars/070m.jpg)"></span>
           </span>
         </span>
       </label>
@@ -152,7 +166,7 @@ Add an image check to your form and give users visually attractive options to ch
 
 ```html
 <label class="form-imagecheck">
-  <input name="" type="checkbox" value="" class="form-imagecheck-input" />
+  <input name="..." type="checkbox" value="..." class="form-imagecheck-input" />
   <span class="form-imagecheck-figure">
     <span class="form-imagecheck-image">
       <span class="avatar avatar-md" style="background-image: url(...)"></span>

package/docs/ui/forms/form-input-mask.mdx

@@ -1,18 +1,46 @@
 ---
 title: Input mask
-description: An input mask is a used to clarify the input format required in a given field and is helpful for users, removing confusion and reducing the number of validation errors.
+summary: An input mask is a used to clarify the input format required in a given field and is helpful for users, removing confusion and reducing the number of validation errors.
+description: Clarify input formats for users.
 ---
 
-<Callout>
-  To be able to use the input mask in your application you will need to install the imask dependency with `npm install imask`.
-</Callout>
+## Installation
+
+To be able to use the input mask in your application you will need to install the imask dependency. You can do this by running the following command:
+
+<TabsPackage name="imask" />
+
+And import or require:
+
+```javascript
+import IMask from 'imask';
+```
+
+You can also use the CDN link to include the script in your project:
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/imask"></script>
+```
+
+If you struggle with the installation, you can find more information in the [IMask documentation](https://imask.js.org/guide.html#installation).
 
 ## Default markup
 
 Use an input mask in the fields where users have to enter their phone number, to make the formatting rules clear and help them avoid confusion.
 
-```html example code centered columns={1}
+To create an input mask, add the `data-mask` attribute to the input element:
+
+```html
+<input type="text" name="input-mask" class="form-control" data-mask="(00) 0000-0000" placeholder="(00) 0000-0000" autocomplete="off" />
+```
+
+Look at the example below to see how the input mask works:
+
+```html example centered columns={1}
 <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" />
 ```
 
+## More examples
+
+If you need more examples of input masks, you can find them in the [IMask documentation](https://imask.js.org/guide.html#masked-input).