@tabler/core 1.0.0-beta22 → 1.0.0-beta23

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).

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

@@ -1,12 +1,60 @@
 ---
-title: Form selectboxes
+title: Form selectgroup
+summary: Use selectgroup to make your form more intuitive by providing users with a set of options to choose from. You can add simple selectgroup with a label, use icons only or icons with labels. Alternatively, you can use pill selectgroup if they go well with your design.
+description: Improve form UX with select groups.
 ---
 
-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.
+## Simple selectgroup
 
-```html example code columns={1} centered
-<div class="mb-3">
-  <label class="form-label">Simple selectgroup</label>
+To create a simple selectgroup, use the `.form-selectgroup` class. You should add a label to the selectgroup by using the `.form-selectgroup-item` class for the input element and the `.form-selectgroup-label` class for the label.
+
+```html
+<label class="form-selectgroup-item">
+  <input type="checkbox" name="name" value="..." class="form-selectgroup-input" checked />
+  <span class="form-selectgroup-label">...</span>
+</label>
+```
+
+Look at the example below to see how the simple selectgroup works:
+
+```html example columns={1} centered
+<div>
+  <div class="form-selectgroup">
+    <label class="form-selectgroup-item">
+      <input type="radio" name="name" value="HTML" class="form-selectgroup-input" checked />
+      <span class="form-selectgroup-label">HTML</span>
+    </label>
+    <label class="form-selectgroup-item">
+      <input type="radio" name="name" value="CSS" class="form-selectgroup-input" />
+      <span class="form-selectgroup-label">CSS</span>
+    </label>
+    <label class="form-selectgroup-item">
+      <input type="radio" name="name" value="PHP" class="form-selectgroup-input" />
+      <span class="form-selectgroup-label">PHP</span>
+    </label>
+    <label class="form-selectgroup-item">
+      <input type="radio" name="name" value="JavaScript" class="form-selectgroup-input" />
+      <span class="form-selectgroup-label">JavaScript</span>
+    </label>
+  </div>
+</div>
+```
+
+## Multiple choices
+
+You can also create a selectgroup with multiple choices. To do this, change the `type` attribute of the input element to `checkbox`.
+
+```html
+<label class="form-selectgroup-item">
+  <input type="checkbox" name="name" value="..." class="form-selectgroup-input" checked />
+  <span class="form-selectgroup-label">...</span>
+</label>
+```
+
+Look at the example below to see how the multiple choices selectgroup works:
+
+```html example columns={1} centered
+<div>
   <div class="form-selectgroup">
     <label class="form-selectgroup-item">
       <input type="checkbox" name="name" value="HTML" class="form-selectgroup-input" checked />
@@ -28,7 +76,22 @@ Add selectboxes to make your form more intuitive by providing users with a set o
 </div>
 ```
 
-```html example code columns={1} centered
+## Icon input
+
+To create an icon input, use the `.form-selectgroup` class. You should add a label to the selectgroup by using the `.form-selectgroup-item` class for the input element and the `.form-selectgroup-label` class for the label. You can use the `.icon` class to style the icon.
+
+```html
+<label class="form-selectgroup-item">
+  <input type="checkbox" name="name" value="sun" class="form-selectgroup-input" checked />
+  <span class="form-selectgroup-label">
+    <svg class="icon" width="24" height="24">...</svg>
+  </span>
+</label>
+```
+
+We recommend you use Tabler Icons for the best experience. You can find over <IconsCount rounded /> free icons in the [Tabler Icons](https://tabler-icons.io/) library. Just copy the SVG code and paste it into your project.
+
+```html example columns={1} centered
 <div class="mb-3">
   <label class="form-label">Icon input</label>
   <div class="form-selectgroup">
@@ -78,46 +141,68 @@ Add selectboxes to make your form more intuitive by providing users with a set o
 </div>
 ```
 
-```html example code columns={1} centered
+You can also add text to the element. Look at the example below to see how it works:
+
+```html example columns={1} centered
 <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 me-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+      <span class="form-selectgroup-label">
+        <svg xmlns="http://www.w3.org/2000/svg" class="icon me-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" fill="none" />
           <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>
+        </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 me-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+      <span class="form-selectgroup-label">
+        <svg xmlns="http://www.w3.org/2000/svg" class="icon me-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" fill="none" />
           <circle cx="12" cy="7" r="4" />
           <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
-        </svg> User</span>
+        </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 me-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+      <span class="form-selectgroup-label">
+        <svg xmlns="http://www.w3.org/2000/svg" class="icon me-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" fill="none" />
           <circle cx="12" cy="12" r="9" />
-        </svg> Circle</span>
+        </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 me-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+      <span class="form-selectgroup-label">
+        <svg xmlns="http://www.w3.org/2000/svg" class="icon me-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" fill="none" />
           <rect x="4" y="4" width="16" height="16" rx="2" />
-        </svg> Square</span>
+        </svg> Square
+      </span>
     </label>
   </div>
 </div>
 ```
 
-```html example code columns={1} centered
+## Pill selectgroup
+
+If you want to use pill selectgroup, use the `.form-selectgroup-pills` class. All the other classes are the same as in the simple selectgroup.
+
+```html
+<div class="form-selectgroup form-selectgroup-pills">
+  ...
+</div>
+```
+
+Look at the example below to see how the pill selectgroup works:
+
+```html example columns={1} centered
 <div class="mb-3">
   <label class="form-label">Different style</label>
   <div class="form-selectgroup form-selectgroup-pills">

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

@@ -1,14 +1,50 @@
 ---
 title: Validation states
-description: 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.
+summary: 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.
+description: Indicate valid or invalid inputs.
 ---
 
-```html example code centered columns="1" height="20rem"
-<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>
+## 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.
+
+To apply the validation state to the form control, use the `.is-valid` and `.is-invalid` classes.
+
+```html example centered separated columns="1" background="bg-light" height="20rem"
+<input type="text" class="form-control is-valid" placeholder="Valid State..." />
+<input type="text" class="form-control is-invalid" placeholder="Invalid State..." />
+```
+
+## Validation feedback
+
+To provide users with additional information about the validation state, you can use the `.valid-feedback` and `.invalid-feedback` classes.
+
+```html
+<input type="text" class="form-control is-valid" placeholder="Valid State..." />
+<div class="valid-feedback">Looks good!</div>
+```
+
+This is how it works in the example below:
+
+```html example centered columns="1" background="bg-light" height="20rem"
+<div>
+  <label class="form-label required">City</label>
+  <input type="text" class="form-control is-invalid" required>
+  <div class="invalid-feedback">
+    Please provide a valid city.
+  </div>
+</div>
+```
+
+You can also use the `.valid-feedback` to provide users with positive feedback.
+
+```html example centered columns="1" background="bg-light" height="20rem"
+<div>
+  <label class="form-label required">City</label>
+  <input type="text" class="form-control is-valid" value="Warsaw">
+  <div class="valid-feedback">
+    Looks good!
+  </div>
 </div>
 ```
 
@@ -16,10 +52,15 @@ description: To inform users whether the entered value is correct or not, use ei
 
 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.
 
-```html example code centered columns="1" height="20rem"
-<div class="mb-3">
-  <label class="form-label">Validation States (lite)</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>
+To do this, use the `.is-valid-lite` and `.is-invalid-lite` classes.
+
+```html
+<input type="text" class="form-control is-valid is-valid-lite" placeholder="Valid State..." />
+```
+
+Look how it works in the example below:
+
+```html example centered separated vertical columns="1" background="bg-light" height="20rem"
+<input type="text" class="form-control is-valid is-valid-lite" placeholder="Valid State..." />
+<input type="text" class="form-control is-invalid is-invalid-lite" placeholder="Invalid State..." />
 ```

package/docs/ui/forms/index.mdx

@@ -0,0 +1,6 @@
+---
+title: Forms
+order: 5
+description: Build and manage web forms.
+summary: The forms section provides a collection of components and tools for creating user-friendly and accessible forms, enhancing user interaction and improving data collection.
+---

package/docs/ui/getting-started/browser-support.mdx

@@ -1,5 +1,7 @@
 ---
 title: Browser Support
+description: Check browser compatibility for Tabler.
+summary: Learn about the supported browsers and compatibility guidelines for using Tabler UI components to ensure a consistent experience across different devices and platforms.
 ---
 
 As of this latest release, Tabler has launched many new features that may not be compatible with all browsers, especially older ones.

package/docs/ui/getting-started/customize.mdx

@@ -1,6 +1,7 @@
 ---
 title: Customize Tabler
-description: Tabler has been designed so that it can be adjusted to your needs and requirements as much as possible. You can customize your own fonts, colors, font sizes, etc in it.
+summary: Tabler has been designed so that it can be adjusted to your needs and requirements as much as possible. You can customize your own fonts, colors, font sizes, etc in it.
+description: Adjust fonts, colors, and styles.	
 ---
 
 ## Custom Google Font
@@ -17,8 +18,8 @@ Now you just need to tell Tabler to use your favorite font:
 
 ```html
 <style>
-:root {
-  --tblr-font-sans-serif: 'Inter';
-}
+  :root {
+    --tblr-font-sans-serif: 'Inter';
+  }
 </style>
 ```