@tabler/core 1.0.0-beta22 → 1.0.0-beta24

package/docs/ui/components/timelines.mdx

@@ -1,13 +1,14 @@
 ---
 title: Timelines
-description: A timeline is a perfect way to visualize processes and projects, as it's easy to read and attractive for users. You can use it to give an overview of events, present an agenda or point out important points in time.
+summary: A timeline is a perfect way to visualize processes and projects, as it's easy to read and attractive for users. You can use it to give an overview of events, present an agenda or point out important points in time.
+description: Visualize events and processes clearly.
 ---
 
 ## Timeline
 
 The available timeline design is comprised of many components that will help you visualize a process or show an outline of events. Thanks to the possibility of adding icons, avatars and links and the way of presenting the elements of content, your timeline will be clear for users and will make yor website or app more attractive.
 
-```html example height="400px" scrollable
+```html example height="400px" scrollable background="base"
 <ul class="timeline">
   <li class="timeline-event">
     <div class="timeline-event-icon bg-twitter-lt">
@@ -86,9 +87,15 @@ The available timeline design is comprised of many components that will help you
         <div class="text-secondary float-end">2 days ago</div>
         <h4>+3 Friend Requests</h4>
         <div class="avatar-list mt-3">
-          <span class="avatar" style="background-image: url(...)"><span class="badge bg-success"></span></span>
-          <span class="avatar"><span class="badge bg-success"></span>JL</span>
-          <span class="avatar" style="background-image: url(...)"><span class="badge bg-success"></span></span>
+          <span class="avatar" style="background-image: url(...)">
+            <span class="badge bg-success"></span>
+          </span>
+          <span class="avatar">
+            <span class="badge bg-success"></span>JL
+          </span>
+          <span class="avatar" style="background-image: url(...)">
+            <span class="badge bg-success"></span>
+          </span>
         </div>
       </div>
     </div>
@@ -147,7 +154,7 @@ The available timeline design is comprised of many components that will help you
 ```html
 <ul class="timeline">
   <li class="timeline-event">
-    <div class="timeline-event-icon bg-twitter-lt"><!-- SVG icon from http://tabler-icons.io/i/brand-twitter -->
+    <div class="timeline-event-icon bg-twitter-lt"><!-- SVG icon from http://tabler.io/icons/icon/brand-twitter -->
       <svg>...</svg>
     </div>
     <div class="card timeline-event-card">
@@ -159,7 +166,7 @@ The available timeline design is comprised of many components that will help you
     </div>
   </li>
   <li class="timeline-event">
-    <div class="timeline-event-icon"><!-- SVG icon from http://tabler-icons.io/i/briefcase -->
+    <div class="timeline-event-icon"><!-- SVG icon from http://tabler.io/icons/icon/briefcase -->
       <svg>...</svg>
     </div>
     <div class="card timeline-event-card">
@@ -171,7 +178,7 @@ The available timeline design is comprised of many components that will help you
     </div>
   </li>
   <li class="timeline-event">
-    <div class="timeline-event-icon"><!-- SVG icon from http://tabler-icons.io/i/check -->
+    <div class="timeline-event-icon"><!-- SVG icon from http://tabler.io/icons/icon/check -->
       <svg>...</svg>
     </div>
     <div class="card timeline-event-card">
@@ -183,7 +190,7 @@ The available timeline design is comprised of many components that will help you
     </div>
   </li>
   <li class="timeline-event">
-    <div class="timeline-event-icon bg-facebook-lt"><!-- SVG icon from http://tabler-icons.io/i/brand-facebook -->
+    <div class="timeline-event-icon bg-facebook-lt"><!-- SVG icon from http://tabler.io/icons/icon/brand-facebook -->
       <svg>...</svg>
     </div>
     <div class="card timeline-event-card">
@@ -195,7 +202,7 @@ The available timeline design is comprised of many components that will help you
     </div>
   </li>
   <li class="timeline-event">
-    <div class="timeline-event-icon"><!-- SVG icon from http://tabler-icons.io/i/user-plus -->
+    <div class="timeline-event-icon"><!-- SVG icon from http://tabler.io/icons/icon/user-plus -->
       <svg>...</svg>
     </div>
     <div class="card timeline-event-card">
@@ -204,17 +211,20 @@ The available timeline design is comprised of many components that will help you
         <h4>+3 Friend Requests</h4>
         <div class="avatar-list mt-3">
           <span class="avatar" style="background-image: url(...)">
-            <span class="badge bg-success"></span></span>
+            <span class="badge bg-success"></span>
+          </span>
           <span class="avatar">
-            <span class="badge bg-success"></span>JL</span>
+            <span class="badge bg-success"></span>JL
+          </span>
           <span class="avatar" style="background-image: url(...)">
-            <span class="badge bg-success"></span></span>
+            <span class="badge bg-success"></span>
+          </span>
         </div>
       </div>
     </div>
   </li>
   <li class="timeline-event">
-    <div class="timeline-event-icon"><!-- SVG icon from http://tabler-icons.io/i/photo -->
+    <div class="timeline-event-icon"><!-- SVG icon from http://tabler.io/icons/icon/photo -->
       <svg>...</svg>
     </div>
     <div class="card timeline-event-card">
@@ -239,7 +249,7 @@ The available timeline design is comprised of many components that will help you
     </div>
   </li>
   <li class="timeline-event">
-    <div class="timeline-event-icon"><!-- SVG icon from http://tabler-icons.io/i/settings -->
+    <div class="timeline-event-icon"><!-- SVG icon from http://tabler.io/icons/icon/settings -->
       <svg>...</svg>
     </div>
     <div class="card timeline-event-card">
@@ -258,7 +268,7 @@ The available timeline design is comprised of many components that will help you
 
 Use a simplified version of the timeline, if it suits your design better. You can still make use of all the available timeline components.
 
-```html example height="400px" scrollable
+```html example height="400px" scrollable background="base"
 <ul class="timeline timeline-simple">
   <li class="timeline-event">
     <div class="timeline-event-icon bg-twitter-lt">
@@ -337,9 +347,15 @@ Use a simplified version of the timeline, if it suits your design better. You ca
         <div class="text-secondary float-end">2 days ago</div>
         <h4>+3 Friend Requests</h4>
         <div class="avatar-list mt-3">
-          <span class="avatar" style="background-image: url(...)"><span class="badge bg-success"></span></span>
-          <span class="avatar"><span class="badge bg-success"></span>JL</span>
-          <span class="avatar" style="background-image: url(...)"><span class="badge bg-success"></span></span>
+          <span class="avatar" style="background-image: url(...)">
+            <span class="badge bg-success"></span>
+          </span>
+          <span class="avatar">
+            <span class="badge bg-success"></span>JL
+          </span>
+          <span class="avatar" style="background-image: url(...)">
+            <span class="badge bg-success"></span>
+          </span>
         </div>
       </div>
     </div>
@@ -398,7 +414,7 @@ Use a simplified version of the timeline, if it suits your design better. You ca
 ```html
 <ul class="timeline timeline-simple">
   <li class="timeline-event">
-    <div class="timeline-event-icon bg-twitter-lt"><!-- SVG icon from http://tabler-icons.io/i/brand-twitter -->
+    <div class="timeline-event-icon bg-twitter-lt"><!-- SVG icon from http://tabler.io/icons/icon/brand-twitter -->
       <svg>...</svg>
     </div>
     <div class="card timeline-event-card">
@@ -410,7 +426,7 @@ Use a simplified version of the timeline, if it suits your design better. You ca
     </div>
   </li>
   <li class="timeline-event">
-    <div class="timeline-event-icon"><!-- SVG icon from http://tabler-icons.io/i/briefcase -->
+    <div class="timeline-event-icon"><!-- SVG icon from http://tabler.io/icons/icon/briefcase -->
       <svg>...</svg>
     </div>
     <div class="card timeline-event-card">
@@ -422,7 +438,7 @@ Use a simplified version of the timeline, if it suits your design better. You ca
     </div>
   </li>
   <li class="timeline-event">
-    <div class="timeline-event-icon"><!-- SVG icon from http://tabler-icons.io/i/check -->
+    <div class="timeline-event-icon"><!-- SVG icon from http://tabler.io/icons/icon/check -->
       <svg>...</svg>
     </div>
     <div class="card timeline-event-card">
@@ -434,7 +450,7 @@ Use a simplified version of the timeline, if it suits your design better. You ca
     </div>
   </li>
   <li class="timeline-event">
-    <div class="timeline-event-icon bg-facebook-lt"><!-- SVG icon from http://tabler-icons.io/i/brand-facebook -->
+    <div class="timeline-event-icon bg-facebook-lt"><!-- SVG icon from http://tabler.io/icons/icon/brand-facebook -->
       <svg>...</svg>
     </div>
     <div class="card timeline-event-card">
@@ -446,7 +462,7 @@ Use a simplified version of the timeline, if it suits your design better. You ca
     </div>
   </li>
   <li class="timeline-event">
-    <div class="timeline-event-icon"><!-- SVG icon from http://tabler-icons.io/i/user-plus -->
+    <div class="timeline-event-icon"><!-- SVG icon from http://tabler.io/icons/icon/user-plus -->
       <svg>...</svg>
     </div>
     <div class="card timeline-event-card">
@@ -455,17 +471,20 @@ Use a simplified version of the timeline, if it suits your design better. You ca
         <h4>+3 Friend Requests</h4>
         <div class="avatar-list mt-3">
           <span class="avatar" style="background-image: url(...)">
-            <span class="badge bg-success"></span></span>
+            <span class="badge bg-success"></span>
+          </span>
           <span class="avatar">
-            <span class="badge bg-success"></span>JL</span>
+            <span class="badge bg-success"></span>JL
+          </span>
           <span class="avatar" style="background-image: url(...)">
-            <span class="badge bg-success"></span></span>
+            <span class="badge bg-success"></span>
+          </span>
         </div>
       </div>
     </div>
   </li>
   <li class="timeline-event">
-    <div class="timeline-event-icon"><!-- SVG icon from http://tabler-icons.io/i/photo -->
+    <div class="timeline-event-icon"><!-- SVG icon from http://tabler.io/icons/icon/photo -->
       <svg>...</svg>
     </div>
     <div class="card timeline-event-card">
@@ -490,7 +509,7 @@ Use a simplified version of the timeline, if it suits your design better. You ca
     </div>
   </li>
   <li class="timeline-event">
-    <div class="timeline-event-icon"><!-- SVG icon from http://tabler-icons.io/i/settings -->
+    <div class="timeline-event-icon"><!-- SVG icon from http://tabler.io/icons/icon/settings -->
       <svg>...</svg>
     </div>
     <div class="card timeline-event-card">

package/docs/ui/components/tinymce.mdx

@@ -1,7 +1,8 @@
 ---
 title: TinyMCE
 libs: tinymce
-description: The WYSIWYG editor that is flexible, customizable, and designed with the user in mind. TinyMCE can handle any challenge, from the most simple implementation through to the most complex use case.
+summary: The WYSIWYG editor that is flexible, customizable, and designed with the user in mind. TinyMCE can handle any challenge, from the most simple implementation through to the most complex use case.
+description: Flexible WYSIWYG editor for content.
 ---
 
 [TinyMCE](https://www.tiny.cloud/docs/) documentation.
@@ -10,11 +11,10 @@ description: The WYSIWYG editor that is flexible, customizable, and designed wit
 
 Initialize TinyMCE 6 on any element (or elements) on the web page by passing an object containing a selector value to `tinymce.init()`. The selector value can be any valid CSS selector.
 
-```html example code centered columns={2} height="25rem"
+```html example centered columns={2} height="25rem"
 <form method="post">
   <textarea id="tinymce-default">Hello, <b>Tabler</b>!</textarea>
 </form>
-
 <script src="$TABLER_CDN/dist/libs/tinymce/tinymce.min.js" defer></script>
 <script>
   document.addEventListener("DOMContentLoaded", function() {

package/docs/ui/components/toasts.mdx

@@ -1,7 +1,8 @@
 ---
 title: Toasts
-description: Toasts are lightweight alert boxes which display for a few seconds after a user has taken an action, to inform them of the state or outcome. They can be used when a user clicks a button or submits a form and their aim is to provide feedback, rather than encourage to take action.
+summary: Toasts are lightweight alert boxes which display for a few seconds after a user has taken an action, to inform them of the state or outcome. They can be used when a user clicks a button or submits a form and their aim is to provide feedback, rather than encourage to take action.
 bootstrapLink: components/toasts/
+description: Display lightweight alert notifications.
 ---
 
 ## Default markup
@@ -44,7 +45,7 @@ Toasts blend over the elements they appear over. If a browser supports the `back
 
 Stack multiple toasts together by putting them within one `.toast-container`.
 
-```html example code height="260px"
+```html example height="260px"
 <div class="toast-container">
   <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false" data-bs-toggle="toast">
     <div class="toast-header">

package/docs/ui/components/tooltips.mdx

@@ -1,14 +1,15 @@
 ---
 title: Tooltips
-description: Tooltips are text labels which appear when a user hovers over an interface element. They explain the interface elements that may be unclear for users and guide them when they need help. If used properly, tooltips can significantly enhance user experience and add value to your website or software.
+summary: Tooltips are text labels which appear when a user hovers over an interface element. They explain the interface elements that may be unclear for users and guide them when they need help. If used properly, tooltips can significantly enhance user experience and add value to your website or software.
 bootstrapLink: components/tooltips/
+description: Guide users with informative tooltips.
 ---
 
 ## Default markup
 
 Use the default markup to create tooltips that will help users understand particular elements of your interface. You can decide where the text label is to be displayed - at the top, bottom or on either side of the element.
 
-```html code example centered separated
+```html example centered separated
 <button type="button" class="btn" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
   Tooltip on top
 </button>
@@ -27,7 +28,7 @@ Use the default markup to create tooltips that will help users understand partic
 
 If the default tooltip is not enough, you can add the option to use HTML code in the text to highlight particular bits of information and make the content more attractive.
 
-```html code example height="7rem"
+```html example height="7rem"
 <button type="button" class="btn" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
   Tooltip with HTML
 </button>

package/docs/ui/components/tracking.mdx

@@ -1,6 +1,7 @@
 ---
 title: Tracking
-description: Component for visualising activity logs or other monitoring-related data. With its ability to show data in a visually appealing and easily understandable way, the tracking component is an essential tool for any organization that relies on data monitoring and analysis to optimize performance and user experience.
+summary: Component for visualising activity logs or other monitoring-related data. With its ability to show data in a visually appealing and easily understandable way, the tracking component is an essential tool for any organization that relies on data monitoring and analysis to optimize performance and user experience.
+description: Monitor data activity visually.
 ---
 
 ## Basic example
@@ -124,39 +125,43 @@ You can add a tracking component inside the cards to give your reports a fresh l
 ```html
 <div class="card">
   <div class="card-body">
-	 <div class="d-flex align-items-center">
-		<div class="subheader">Status monitoring</div>
-		<div class="ms-auto lh-1">
-		  <div class="dropdown">
-			 <a class="dropdown-toggle text-secondary" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Current month</a>
-			 <div class="dropdown-menu dropdown-menu-end">
-				<a class="dropdown-item active" href="#">Current month</a>
-				<a class="dropdown-item" href="#">Last month</a>
-				<a class="dropdown-item" href="#">Last 3 months</a>
-			 </div>
-		  </div>
-		</div>
-	 </div>
-	 <div class="d-flex align-items-baseline">
-		<div class="h1 mb-3 me-2">99.5%</div>
-		<div class="me-auto">
-		<span class="text-green d-inline-flex align-items-center lh-1">
-		  2%
-		  <svg xmlns="http://www.w3.org/2000/svg" class="icon ms-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="3 17 9 11 13 15 21 7" /><polyline points="14 7 21 7 21 14" /></svg>
-		</span>
-		</div>
-	 </div>
-	 <div class="mt-2">
-		<div class="tracking">
-		  <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational"></div>
-		  <div class="tracking-block bg-danger" data-bs-toggle="tooltip" data-bs-placement="top" title="Downtime"></div>
-		  <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational"></div>
-		  <div class="tracking-block bg-warning" data-bs-toggle="tooltip" data-bs-placement="top" title="Big load"></div>
-		  <div class="tracking-block" data-bs-toggle="tooltip" data-bs-placement="top" title="No data"></div>
-		  <div class="tracking-block" data-bs-toggle="tooltip" data-bs-placement="top" title="No data"></div>
-		  ...
-		</div>
-	 </div>
+    <div class="d-flex align-items-center">
+      <div class="subheader">Status monitoring</div>
+      <div class="ms-auto lh-1">
+        <div class="dropdown">
+          <a class="dropdown-toggle text-secondary" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Current month</a>
+          <div class="dropdown-menu dropdown-menu-end">
+            <a class="dropdown-item active" href="#">Current month</a>
+            <a class="dropdown-item" href="#">Last month</a>
+            <a class="dropdown-item" href="#">Last 3 months</a>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="d-flex align-items-baseline">
+      <div class="h1 mb-3 me-2">99.5%</div>
+      <div class="me-auto">
+        <span class="text-green d-inline-flex align-items-center lh-1">
+          2%
+          <svg xmlns="http://www.w3.org/2000/svg" class="icon ms-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="3 17 9 11 13 15 21 7" />
+            <polyline points="14 7 21 7 21 14" />
+          </svg>
+        </span>
+      </div>
+    </div>
+    <div class="mt-2">
+      <div class="tracking">
+        <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational"></div>
+        <div class="tracking-block bg-danger" data-bs-toggle="tooltip" data-bs-placement="top" title="Downtime"></div>
+        <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational"></div>
+        <div class="tracking-block bg-warning" data-bs-toggle="tooltip" data-bs-placement="top" title="Big load"></div>
+        <div class="tracking-block" data-bs-toggle="tooltip" data-bs-placement="top" title="No data"></div>
+        <div class="tracking-block" data-bs-toggle="tooltip" data-bs-placement="top" title="No data"></div>
+        ...
+      </div>
+    </div>
   </div>
 </div>
 ```

package/docs/ui/components/vector-maps.mdx

@@ -0,0 +1,170 @@
+---
+title: Vector Maps
+description: Interactive guide to creating vector maps with jsVectorMap.
+summary: Vector maps are a great way to display geographical data in an interactive and visually appealing way. Learn how to create vector maps with jsVectorMap.
+---
+
+## Installation
+
+To use vector maps in your project, you need to include the jsVectorMap library in your project. You can install it via npm or include it directly from a CDN. The following example demonstrates how to include the jsVectorMap library from a CDN:
+
+```html
+<script src="$TABLER_CDN/dist/libs/jsvectormap/dist/js/jsvectormap.min.js"></script>
+<script src="$TABLER_CDN/dist/libs/jsvectormap/dist/maps/js/jsvectormap-world.js"></script>
+```
+
+## Sample demo
+
+Integrating the vector map into your website is straightforward. Below is a sample implementation for a world map:
+
+```html
+<div id="map-world" class="w-100 h-100"></div>
+<script>
+document.addEventListener("DOMContentLoaded", function() {
+	const map = new jsVectorMap({
+		selector: '#map-world',
+		map: 'world',
+	});
+});
+</script>
+```
+
+Look at the example below to see how the vector map works with a world map.
+
+```html example vendors height="30rem" libs="jsvectormap,jsvectormap-world" background="surface" columns={2} centered
+<div class="card">
+  <div class="card-body">
+    <div class="ratio ratio-16x9">
+      <div>
+        <div id="map-world" class="w-100 h-100"></div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+document.addEventListener("DOMContentLoaded", function() {
+	const map = new jsVectorMap({
+		selector: '#map-world',
+		map: 'world',
+		backgroundColor: 'transparent',
+		regionStyle: {
+			initial: {
+				fill: tabler.getColor('body-bg'),
+				stroke: tabler.getColor('border-color'),
+				strokeWidth: 2,
+			}
+		},
+		zoomOnScroll: false,
+		zoomButtons: false,
+	});
+	window.addEventListener("resize", () => {
+		map.updateSize();
+	});
+});
+</script>
+```
+
+## Markers
+
+You can add markers to the map to highlight specific locations. Below is a sample implementation for a world map with markers:
+
+```html example vendors height="30rem" libs="jsvectormap,jsvectormap-world-merc" background="surface" columns={2} centered
+<div class="card">
+  <div class="card-body">
+    <div class="ratio ratio-16x9">
+      <div>
+        <div id="map-world-markers" class="w-100 h-100"></div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+      // @formatter:on
+      document.addEventListener("DOMContentLoaded", function() {
+      	const map = new jsVectorMap({
+      		selector: '#map-world-markers',
+      		map: 'world_merc',
+      		backgroundColor: 'transparent',
+      		regionStyle: {
+      			initial: {
+      				fill: tabler.getColor('body-bg'),
+      				stroke: tabler.getColor('border-color'),
+      				strokeWidth: 2,
+      			}
+      		},
+      		zoomOnScroll: false,
+      		zoomButtons: false,
+      		markers: [
+      			{
+      				coords: [61.524, 105.3188],
+      				name: "Russia",
+      			},
+      			{
+      				coords: [56.1304, -106.3468],
+      				name: "Canada",
+      			},
+      			{
+      				coords: [71.7069, -42.6043],
+      				name: "Greenland",
+      			},
+      			{
+      				coords: [26.8206, 30.8025],
+      				name: "Egypt",
+      			},
+      			{
+      				coords: [-14.235, -51.9253],
+      				name: "Brazil",
+      			},
+      			{
+      				coords: [35.8617, 104.1954],
+      				name: "China",
+      			},
+      			{
+      				coords: [37.0902, -95.7129],
+      				name: "United States",
+      			},
+      			{
+      				coords: [60.472024, 8.468946],
+      				name: "Norway",
+      			},
+      			{
+      				coords: [48.379433, 31.16558],
+      				name: "Ukraine",
+      			},
+      		],
+      		markerStyle: {
+      			initial: {
+      				r: 4,
+      				stroke: '#fff',
+      				opacity: 1,
+      				strokeWidth: 3,
+      				stokeOpacity: .5,
+      				fill: tabler.getColor('blue')
+      			},
+      			hover: {
+      				fill: tabler.getColor('blue'),
+      				stroke: tabler.getColor('blue')
+      			}
+      		},
+      		markerLabelStyle: {
+      			initial: {
+      				fontSize: 10
+      			},
+      		},
+      		labels: {
+      			markers: {
+      				render: function(marker) {
+      					return marker.name
+      				},
+      			},
+      		},
+      	});
+      	window.addEventListener("resize", () => {
+      		map.updateSize();
+      	});
+      });
+      // @formatter:off
+    </script>
+```

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

@@ -1,10 +1,21 @@
 ---
 title: Color check
+summary: The color check is a great way to make your form more user-friendly and engaging. You can use the color check to create a visually appealing form that will help users make decisions quickly and easily.
+description: Enhance forms with color checks.
 ---
 
-Your input controls can come in a variety of colors, depending on your preferences. Click [here](/docs/getting-started/colors) to see the list of available colors.
+Your input controls can come in a variety of colors, depending on your preferences. Click [here](/docs/ui/base/colors) to see the list of available colors.
 
-```html example centered
+```html
+<label class="form-colorinput">
+  <input name="..." type="radio" value="..." class="form-colorinput-input" />
+  <span class="form-colorinput-color bg-lime"></span>
+</label>
+```
+
+There is also an example of a color input:
+
+```html example centered background="bg-light"
 <div class="mb-3">
   <label class="form-label">Color Input</label>
   <div class="row g-2">
@@ -74,18 +85,20 @@ Your input controls can come in a variety of colors, depending on your preferenc
         <span class="form-colorinput-color bg-lime"></span>
       </label>
     </div>
+    <div class="col-auto">
+      <label class="form-colorinput">
+        <input name="color" type="radio" value="green" class="form-colorinput-input" />
+        <span class="form-colorinput-color bg-green"></span>
+      </label>
+    </div>
   </div>
 </div>
 ```
 
-```html
-<label class="form-colorinput">
-  <input name="color" type="radio" value="lime" class="form-colorinput-input" />
-  <span class="form-colorinput-color bg-lime"></span>
-</label>
-```
+If you need to select only one color, you can use the radio input type:
 
-```html example centered
+
+```html example centered background="bg-light"
 <div class="mb-3">
   <label class="form-label">Color Input</label>
   <div class="row g-2">
@@ -155,13 +168,19 @@ Your input controls can come in a variety of colors, depending on your preferenc
         <span class="form-colorinput-color bg-lime rounded-circle"></span>
       </label>
     </div>
+    <div class="col-auto">
+      <label class="form-colorinput">
+        <input name="color-rounded" type="radio" value="green" class="form-colorinput-input" />
+        <span class="form-colorinput-color bg-green rounded-circle"></span>
+      </label>
+    </div>
   </div>
 </div>
 ```
 
 ```html
 <label class="form-colorinput">
-  <input name="color-rounded" type="radio" value="dark" class="form-colorinput-input" />
+  <input name="..." type="radio" value="..." class="form-colorinput-input" />
   <span class="form-colorinput-color bg-dark rounded-circle"></span>
 </label>
 ```
@@ -170,7 +189,13 @@ Your input controls can come in a variety of colors, depending on your preferenc
 
 Add an color picker to your form to let users customise it according to their preferences.
 
-```html example code centered
+```html
+<input type="color" class="form-control form-control-color" value="#066fd1" title="Choose your color">
+```
+
+There is also an example of a color picker input:
+
+```html example centered
 <div class="mb-3">
   <label class="form-label">Color picker</label>
   <input type="color" class="form-control form-control-color" value="#066fd1" title="Choose your color">