@tabler/core 1.1.1 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (273) hide show
  1. package/LICENSE +21 -0
  2. package/dist/css/tabler-flags.css +2 -2
  3. package/dist/css/tabler-flags.css.map +1 -1
  4. package/dist/css/tabler-flags.min.css +2 -2
  5. package/dist/css/tabler-flags.min.css.map +1 -1
  6. package/dist/css/tabler-flags.rtl.css +2 -2
  7. package/dist/css/tabler-flags.rtl.css.map +1 -1
  8. package/dist/css/tabler-flags.rtl.min.css +2 -2
  9. package/dist/css/tabler-flags.rtl.min.css.map +1 -1
  10. package/dist/css/tabler-marketing.css +6 -6
  11. package/dist/css/tabler-marketing.css.map +1 -1
  12. package/dist/css/tabler-marketing.min.css +2 -2
  13. package/dist/css/tabler-marketing.min.css.map +1 -1
  14. package/dist/css/tabler-marketing.rtl.css +6 -6
  15. package/dist/css/tabler-marketing.rtl.css.map +1 -1
  16. package/dist/css/tabler-marketing.rtl.min.css +2 -2
  17. package/dist/css/tabler-marketing.rtl.min.css.map +1 -1
  18. package/dist/css/tabler-payments.css +1 -1
  19. package/dist/css/tabler-payments.min.css +1 -1
  20. package/dist/css/tabler-payments.rtl.css +1 -1
  21. package/dist/css/tabler-payments.rtl.min.css +1 -1
  22. package/dist/css/tabler-props.css +448 -0
  23. package/dist/css/tabler-props.css.map +1 -0
  24. package/dist/css/tabler-props.min.css +8 -0
  25. package/dist/css/tabler-props.min.css.map +1 -0
  26. package/dist/css/tabler-props.rtl.css +447 -0
  27. package/dist/css/tabler-props.rtl.css.map +1 -0
  28. package/dist/css/tabler-props.rtl.min.css +8 -0
  29. package/dist/css/tabler-props.rtl.min.css.map +1 -0
  30. package/dist/css/tabler-socials.css +1 -1
  31. package/dist/css/tabler-socials.min.css +1 -1
  32. package/dist/css/tabler-socials.rtl.css +1 -1
  33. package/dist/css/tabler-socials.rtl.min.css +1 -1
  34. package/dist/css/tabler-themes.css +213 -0
  35. package/dist/css/tabler-themes.css.map +1 -0
  36. package/dist/css/tabler-themes.min.css +8 -0
  37. package/dist/css/tabler-themes.min.css.map +1 -0
  38. package/dist/css/tabler-themes.rtl.css +212 -0
  39. package/dist/css/tabler-themes.rtl.css.map +1 -0
  40. package/dist/css/tabler-themes.rtl.min.css +8 -0
  41. package/dist/css/tabler-themes.rtl.min.css.map +1 -0
  42. package/dist/css/tabler-vendors.css +31 -16
  43. package/dist/css/tabler-vendors.css.map +1 -1
  44. package/dist/css/tabler-vendors.min.css +2 -2
  45. package/dist/css/tabler-vendors.min.css.map +1 -1
  46. package/dist/css/tabler-vendors.rtl.css +31 -16
  47. package/dist/css/tabler-vendors.rtl.css.map +1 -1
  48. package/dist/css/tabler-vendors.rtl.min.css +2 -2
  49. package/dist/css/tabler-vendors.rtl.min.css.map +1 -1
  50. package/dist/css/tabler.css +7662 -8392
  51. package/dist/css/tabler.css.map +1 -1
  52. package/dist/css/tabler.min.css +2 -2
  53. package/dist/css/tabler.min.css.map +1 -1
  54. package/dist/css/tabler.rtl.css +7751 -8481
  55. package/dist/css/tabler.rtl.css.map +1 -1
  56. package/dist/css/tabler.rtl.min.css +2 -2
  57. package/dist/css/tabler.rtl.min.css.map +1 -1
  58. package/dist/img/flags/kr.svg +1 -1
  59. package/dist/js/tabler-theme.esm.js +38 -0
  60. package/dist/js/tabler-theme.esm.js.map +1 -0
  61. package/dist/js/tabler-theme.esm.min.js +8 -0
  62. package/dist/js/tabler-theme.esm.min.js.map +1 -0
  63. package/dist/js/tabler-theme.js +45 -0
  64. package/dist/js/tabler-theme.js.map +1 -0
  65. package/dist/js/tabler-theme.min.js +8 -0
  66. package/dist/js/tabler-theme.min.js.map +1 -0
  67. package/dist/js/tabler.esm.js +28 -21
  68. package/dist/js/tabler.esm.js.map +1 -1
  69. package/dist/js/tabler.esm.min.js +5 -5
  70. package/dist/js/tabler.esm.min.js.map +1 -1
  71. package/dist/js/tabler.js +36 -24
  72. package/dist/js/tabler.js.map +1 -1
  73. package/dist/js/tabler.min.js +5 -5
  74. package/dist/js/tabler.min.js.map +1 -1
  75. package/js/src/autosize.js +1 -4
  76. package/js/src/input-mask.js +1 -3
  77. package/js/tabler-theme.js +35 -0
  78. package/js/{tabler.esm.js → tabler.js} +16 -0
  79. package/package.json +10 -8
  80. package/scss/_bootstrap-components.scss +0 -5
  81. package/scss/_core.scss +4 -0
  82. package/scss/_props.scss +91 -0
  83. package/scss/_utilities.scss +30 -1
  84. package/scss/_variables-dark.scss +1 -1
  85. package/scss/_variables.scss +79 -60
  86. package/scss/helpers/_index.scss +143 -0
  87. package/scss/layout/_core.scss +1 -0
  88. package/scss/layout/_dark.scss +33 -38
  89. package/scss/layout/_navbar.scss +2 -1
  90. package/scss/layout/_page.scss +1 -0
  91. package/scss/layout/_root.scss +26 -34
  92. package/scss/marketing/_core.scss +1 -1
  93. package/scss/marketing/_pricing.scss +1 -1
  94. package/scss/mixins/_mixins.scss +6 -6
  95. package/scss/tabler-props.scss +1 -0
  96. package/scss/tabler-themes.scss +121 -0
  97. package/scss/tabler-vendors.scss +3 -1
  98. package/scss/tabler.scss +0 -1
  99. package/scss/ui/_accordion.scss +31 -26
  100. package/scss/ui/_alerts.scss +19 -8
  101. package/scss/ui/_avatars.scss +35 -9
  102. package/scss/ui/_badges.scss +1 -1
  103. package/scss/ui/_buttons.scss +15 -17
  104. package/scss/ui/_close.scss +55 -2
  105. package/scss/ui/_dropdowns.scss +1 -0
  106. package/scss/ui/_forms.scss +12 -2
  107. package/scss/ui/_markdown.scss +10 -1
  108. package/scss/ui/_nav.scss +11 -1
  109. package/scss/ui/_offcanvas.scss +1 -1
  110. package/scss/ui/_pagination.scss +2 -0
  111. package/scss/ui/_signature.scss +4 -2
  112. package/scss/ui/_steps.scss +4 -0
  113. package/scss/ui/_tables.scss +16 -0
  114. package/scss/ui/_tags.scss +1 -1
  115. package/scss/ui/_type.scss +69 -7
  116. package/scss/ui/forms/_form-colorinput.scss +1 -1
  117. package/scss/ui/forms/_form-imagecheck.scss +6 -5
  118. package/scss/ui/forms/_form-selectgroup.scss +1 -1
  119. package/scss/utils/_colors.scss +58 -11
  120. package/scss/utils/_scroll.scss +0 -2
  121. package/scss/vendor/_coloris.scss +6 -1
  122. package/scss/vendor/_fslightbox.scss +1 -1
  123. package/scss/vendor/_jsvectormap.scss +2 -3
  124. package/scss/vendor/_litepicker.scss +1 -0
  125. package/scss/vendor/_nouislider.scss +0 -2
  126. package/scss/vendor/_tinymce.scss +3 -3
  127. package/scss/vendor/_tom-select.scss +7 -4
  128. package/scss/vendor/_turbo.scss +3 -0
  129. package/scss/vendor/_wysiwyg.scss +34 -0
  130. package/docs/emails/index.mdx +0 -14
  131. package/docs/emails/introduction/compiled-html.mdx +0 -29
  132. package/docs/emails/introduction/contents.mdx +0 -63
  133. package/docs/emails/introduction/index.mdx +0 -9
  134. package/docs/emails/introduction/source-html.mdx +0 -26
  135. package/docs/icons/index.mdx +0 -13
  136. package/docs/icons/libraries/index.mdx +0 -5
  137. package/docs/icons/libraries/preact.mdx +0 -42
  138. package/docs/icons/libraries/react.mdx +0 -42
  139. package/docs/icons/libraries/solidjs.mdx +0 -42
  140. package/docs/icons/libraries/svelte.mdx +0 -43
  141. package/docs/icons/libraries/vue.mdx +0 -50
  142. package/docs/icons/libraries/webfont.mdx +0 -60
  143. package/docs/icons/plugins/figma.mdx +0 -15
  144. package/docs/icons/plugins/index.mdx +0 -4
  145. package/docs/icons/static-files/eps.mdx +0 -15
  146. package/docs/icons/static-files/index.mdx +0 -5
  147. package/docs/icons/static-files/pdf.mdx +0 -15
  148. package/docs/icons/static-files/png.mdx +0 -31
  149. package/docs/icons/static-files/svg.mdx +0 -85
  150. package/docs/illustrations/index.mdx +0 -8
  151. package/docs/illustrations/introduction/contents.mdx +0 -77
  152. package/docs/illustrations/introduction/customization.mdx +0 -1198
  153. package/docs/illustrations/introduction/index.mdx +0 -5
  154. package/docs/illustrations/introduction/license.mdx +0 -90
  155. package/docs/img/browsers/brave.svg +0 -1
  156. package/docs/img/browsers/chrome.svg +0 -1
  157. package/docs/img/browsers/edge.svg +0 -1
  158. package/docs/img/browsers/electron.svg +0 -1
  159. package/docs/img/browsers/firefox.svg +0 -1
  160. package/docs/img/browsers/internet-explorer.svg +0 -1
  161. package/docs/img/browsers/opera.svg +0 -1
  162. package/docs/img/browsers/safari.svg +0 -1
  163. package/docs/img/browsers/vivaldi.svg +0 -1
  164. package/docs/img/cover-illustrations-dark.png +0 -0
  165. package/docs/img/cover-illustrations.png +0 -0
  166. package/docs/img/cover-tabler-dark.png +0 -0
  167. package/docs/img/cover-tabler.png +0 -0
  168. package/docs/img/icons/figma-plugin.png +0 -0
  169. package/docs/img/icons/package-angular-dark.png +0 -0
  170. package/docs/img/icons/package-angular.png +0 -0
  171. package/docs/img/icons/package-eps-dark.png +0 -0
  172. package/docs/img/icons/package-eps.png +0 -0
  173. package/docs/img/icons/package-js-dark.png +0 -0
  174. package/docs/img/icons/package-js.png +0 -0
  175. package/docs/img/icons/package-pdf-dark.png +0 -0
  176. package/docs/img/icons/package-pdf.png +0 -0
  177. package/docs/img/icons/package-png-dark.png +0 -0
  178. package/docs/img/icons/package-png.png +0 -0
  179. package/docs/img/icons/package-preact-dark.png +0 -0
  180. package/docs/img/icons/package-preact.png +0 -0
  181. package/docs/img/icons/package-react-dark.png +0 -0
  182. package/docs/img/icons/package-react-native-dark.png +0 -0
  183. package/docs/img/icons/package-react-native.png +0 -0
  184. package/docs/img/icons/package-react.png +0 -0
  185. package/docs/img/icons/package-solidjs-dark.png +0 -0
  186. package/docs/img/icons/package-solidjs.png +0 -0
  187. package/docs/img/icons/package-sprite-dark.png +0 -0
  188. package/docs/img/icons/package-sprite.png +0 -0
  189. package/docs/img/icons/package-svelte-dark.png +0 -0
  190. package/docs/img/icons/package-svelte.png +0 -0
  191. package/docs/img/icons/package-svg-dark.png +0 -0
  192. package/docs/img/icons/package-svg.png +0 -0
  193. package/docs/img/icons/package-vue-dark.png +0 -0
  194. package/docs/img/icons/package-vue.png +0 -0
  195. package/docs/img/icons/package-webfont-dark.png +0 -0
  196. package/docs/img/icons/package-webfont.png +0 -0
  197. package/docs/index.mdx +0 -16
  198. package/docs/ui/base/colors.mdx +0 -83
  199. package/docs/ui/base/index.mdx +0 -6
  200. package/docs/ui/base/typography.mdx +0 -311
  201. package/docs/ui/components/alerts.mdx +0 -406
  202. package/docs/ui/components/autosize.mdx +0 -25
  203. package/docs/ui/components/avatars.mdx +0 -227
  204. package/docs/ui/components/badges.mdx +0 -112
  205. package/docs/ui/components/breadcrumb.mdx +0 -199
  206. package/docs/ui/components/buttons.mdx +0 -1213
  207. package/docs/ui/components/cards.mdx +0 -417
  208. package/docs/ui/components/carousel.mdx +0 -459
  209. package/docs/ui/components/charts.mdx +0 -697
  210. package/docs/ui/components/countup.mdx +0 -165
  211. package/docs/ui/components/datagrid.mdx +0 -120
  212. package/docs/ui/components/divider.mdx +0 -68
  213. package/docs/ui/components/dropdowns.mdx +0 -302
  214. package/docs/ui/components/dropzone.mdx +0 -88
  215. package/docs/ui/components/empty.mdx +0 -149
  216. package/docs/ui/components/icons.mdx +0 -392
  217. package/docs/ui/components/index.mdx +0 -6
  218. package/docs/ui/components/inline-player.mdx +0 -58
  219. package/docs/ui/components/modals.mdx +0 -297
  220. package/docs/ui/components/offcanvas.mdx +0 -70
  221. package/docs/ui/components/placeholder.mdx +0 -273
  222. package/docs/ui/components/popover.mdx +0 -142
  223. package/docs/ui/components/progress.mdx +0 -241
  224. package/docs/ui/components/range-slider.mdx +0 -32
  225. package/docs/ui/components/ribbons.mdx +0 -207
  226. package/docs/ui/components/segmented-control.mdx +0 -401
  227. package/docs/ui/components/spinners.mdx +0 -135
  228. package/docs/ui/components/statuses.mdx +0 -322
  229. package/docs/ui/components/steps.mdx +0 -174
  230. package/docs/ui/components/switch-icon.mdx +0 -386
  231. package/docs/ui/components/tables.mdx +0 -397
  232. package/docs/ui/components/tabs.mdx +0 -396
  233. package/docs/ui/components/timelines.mdx +0 -697
  234. package/docs/ui/components/tinymce.mdx +0 -46
  235. package/docs/ui/components/toasts.mdx +0 -126
  236. package/docs/ui/components/tooltips.mdx +0 -65
  237. package/docs/ui/components/tracking.mdx +0 -548
  238. package/docs/ui/components/vector-maps.mdx +0 -166
  239. package/docs/ui/forms/form-color-check.mdx +0 -220
  240. package/docs/ui/forms/form-elements.mdx +0 -632
  241. package/docs/ui/forms/form-fieldset.mdx +0 -45
  242. package/docs/ui/forms/form-helpers.mdx +0 -91
  243. package/docs/ui/forms/form-image-check.mdx +0 -213
  244. package/docs/ui/forms/form-input-mask.mdx +0 -61
  245. package/docs/ui/forms/form-selectboxes.mdx +0 -398
  246. package/docs/ui/forms/form-validation.mdx +0 -62
  247. package/docs/ui/forms/index.mdx +0 -6
  248. package/docs/ui/getting-started/browser-support.mdx +0 -28
  249. package/docs/ui/getting-started/customize.mdx +0 -28
  250. package/docs/ui/getting-started/download.mdx +0 -44
  251. package/docs/ui/getting-started/faq.mdx +0 -30
  252. package/docs/ui/getting-started/how-to-contribute.mdx +0 -84
  253. package/docs/ui/getting-started/index.mdx +0 -16
  254. package/docs/ui/getting-started/installation.mdx +0 -67
  255. package/docs/ui/getting-started/license.mdx +0 -30
  256. package/docs/ui/index.mdx +0 -8
  257. package/docs/ui/layout/index.mdx +0 -6
  258. package/docs/ui/layout/navbars.mdx +0 -164
  259. package/docs/ui/layout/navs-tabls.mdx +0 -201
  260. package/docs/ui/layout/page-headers.mdx +0 -365
  261. package/docs/ui/layout/page-layouts.mdx +0 -213
  262. package/docs/ui/plugins/flags.mdx +0 -316
  263. package/docs/ui/plugins/index.mdx +0 -6
  264. package/docs/ui/plugins/payments.mdx +0 -152
  265. package/docs/ui/plugins/social-icons.mdx +0 -135
  266. package/docs/ui/utilities/borders.mdx +0 -260
  267. package/docs/ui/utilities/cursors.mdx +0 -63
  268. package/docs/ui/utilities/index.mdx +0 -5
  269. package/docs/ui/utilities/interactions.mdx +0 -26
  270. package/docs/ui/utilities/margins.mdx +0 -234
  271. package/docs/ui/utilities/vertical-align.mdx +0 -66
  272. package/docs/ui/utilities/visually-hidden.mdx +0 -12
  273. package/js/tabler.umd.js +0 -15
package/docs/ui/forms/form-color-check.mdx DELETED
@@ -1,220 +0,0 @@
1
- ---
2
- title: Color check
3
- 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.
4
- description: Enhance forms with color checks.
5
- ---
6
-
7
- 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.
8
-
9
- ```html
10
- <label class="form-colorinput">
11
- <input name="..." type="radio" value="..." class="form-colorinput-input" />
12
- <span class="form-colorinput-color bg-lime"></span>
13
- </label>
14
- ```
15
-
16
- There is also an example of a color input:
17
-
18
- ```html example centered
19
- <div class="mb-3">
20
- <label class="form-label">Color Input</label>
21
- <div class="row g-2">
22
- <div class="col-auto">
23
- <label class="form-colorinput">
24
- <input name="color" type="radio" value="dark" class="form-colorinput-input" />
25
- <span class="form-colorinput-color bg-dark"></span>
26
- </label>
27
- </div>
28
- <div class="col-auto">
29
- <label class="form-colorinput form-colorinput-light">
30
- <input name="color" type="radio" value="white" class="form-colorinput-input" checked />
31
- <span class="form-colorinput-color bg-white"></span>
32
- </label>
33
- </div>
34
- <div class="col-auto">
35
- <label class="form-colorinput">
36
- <input name="color" type="radio" value="blue" class="form-colorinput-input" />
37
- <span class="form-colorinput-color bg-blue"></span>
38
- </label>
39
- </div>
40
- <div class="col-auto">
41
- <label class="form-colorinput">
42
- <input name="color" type="radio" value="azure" class="form-colorinput-input" />
43
- <span class="form-colorinput-color bg-azure"></span>
44
- </label>
45
- </div>
46
- <div class="col-auto">
47
- <label class="form-colorinput">
48
- <input name="color" type="radio" value="indigo" class="form-colorinput-input" />
49
- <span class="form-colorinput-color bg-indigo"></span>
50
- </label>
51
- </div>
52
- <div class="col-auto">
53
- <label class="form-colorinput">
54
- <input name="color" type="radio" value="purple" class="form-colorinput-input" />
55
- <span class="form-colorinput-color bg-purple"></span>
56
- </label>
57
- </div>
58
- <div class="col-auto">
59
- <label class="form-colorinput">
60
- <input name="color" type="radio" value="pink" class="form-colorinput-input" />
61
- <span class="form-colorinput-color bg-pink"></span>
62
- </label>
63
- </div>
64
- <div class="col-auto">
65
- <label class="form-colorinput">
66
- <input name="color" type="radio" value="red" class="form-colorinput-input" />
67
- <span class="form-colorinput-color bg-red"></span>
68
- </label>
69
- </div>
70
- <div class="col-auto">
71
- <label class="form-colorinput">
72
- <input name="color" type="radio" value="orange" class="form-colorinput-input" />
73
- <span class="form-colorinput-color bg-orange"></span>
74
- </label>
75
- </div>
76
- <div class="col-auto">
77
- <label class="form-colorinput">
78
- <input name="color" type="radio" value="yellow" class="form-colorinput-input" />
79
- <span class="form-colorinput-color bg-yellow"></span>
80
- </label>
81
- </div>
82
- <div class="col-auto">
83
- <label class="form-colorinput">
84
- <input name="color" type="radio" value="lime" class="form-colorinput-input" />
85
- <span class="form-colorinput-color bg-lime"></span>
86
- </label>
87
- </div>
88
- <div class="col-auto">
89
- <label class="form-colorinput">
90
- <input name="color" type="radio" value="green" class="form-colorinput-input" />
91
- <span class="form-colorinput-color bg-green"></span>
92
- </label>
93
- </div>
94
- </div>
95
- </div>
96
- ```
97
-
98
- If you need to select only one color, you can use the radio input type:
99
-
100
-
101
- ```html example centered
102
- <div class="mb-3">
103
- <label class="form-label">Color Input</label>
104
- <div class="row g-2">
105
- <div class="col-auto">
106
- <label class="form-colorinput">
107
- <input name="color-rounded" type="radio" value="dark" class="form-colorinput-input" />
108
- <span class="form-colorinput-color bg-dark rounded-circle"></span>
109
- </label>
110
- </div>
111
- <div class="col-auto">
112
- <label class="form-colorinput form-colorinput-light">
113
- <input
114
- name="color-rounded"
115
- type="radio"
116
- value="white"
117
- class="form-colorinput-input"
118
- checked
119
- />
120
- <span class="form-colorinput-color bg-white rounded-circle"></span>
121
- </label>
122
- </div>
123
- <div class="col-auto">
124
- <label class="form-colorinput">
125
- <input name="color-rounded" type="radio" value="blue" class="form-colorinput-input" />
126
- <span class="form-colorinput-color bg-blue rounded-circle"></span>
127
- </label>
128
- </div>
129
- <div class="col-auto">
130
- <label class="form-colorinput">
131
- <input name="color-rounded" type="radio" value="azure" class="form-colorinput-input" />
132
- <span class="form-colorinput-color bg-azure rounded-circle"></span>
133
- </label>
134
- </div>
135
- <div class="col-auto">
136
- <label class="form-colorinput">
137
- <input name="color-rounded" type="radio" value="indigo" class="form-colorinput-input" />
138
- <span class="form-colorinput-color bg-indigo rounded-circle"></span>
139
- </label>
140
- </div>
141
- <div class="col-auto">
142
- <label class="form-colorinput">
143
- <input name="color-rounded" type="radio" value="purple" class="form-colorinput-input" />
144
- <span class="form-colorinput-color bg-purple rounded-circle"></span>
145
- </label>
146
- </div>
147
- <div class="col-auto">
148
- <label class="form-colorinput">
149
- <input name="color-rounded" type="radio" value="pink" class="form-colorinput-input" />
150
- <span class="form-colorinput-color bg-pink rounded-circle"></span>
151
- </label>
152
- </div>
153
- <div class="col-auto">
154
- <label class="form-colorinput">
155
- <input name="color-rounded" type="radio" value="red" class="form-colorinput-input" />
156
- <span class="form-colorinput-color bg-red rounded-circle"></span>
157
- </label>
158
- </div>
159
- <div class="col-auto">
160
- <label class="form-colorinput">
161
- <input name="color-rounded" type="radio" value="orange" class="form-colorinput-input" />
162
- <span class="form-colorinput-color bg-orange rounded-circle"></span>
163
- </label>
164
- </div>
165
- <div class="col-auto">
166
- <label class="form-colorinput">
167
- <input name="color-rounded" type="radio" value="yellow" class="form-colorinput-input" />
168
- <span class="form-colorinput-color bg-yellow rounded-circle"></span>
169
- </label>
170
- </div>
171
- <div class="col-auto">
172
- <label class="form-colorinput">
173
- <input name="color-rounded" type="radio" value="lime" class="form-colorinput-input" />
174
- <span class="form-colorinput-color bg-lime rounded-circle"></span>
175
- </label>
176
- </div>
177
- <div class="col-auto">
178
- <label class="form-colorinput">
179
- <input name="color-rounded" type="radio" value="green" class="form-colorinput-input" />
180
- <span class="form-colorinput-color bg-green rounded-circle"></span>
181
- </label>
182
- </div>
183
- </div>
184
- </div>
185
- ```
186
-
187
- ```html
188
- <label class="form-colorinput">
189
- <input name="..." type="radio" value="..." class="form-colorinput-input" />
190
- <span class="form-colorinput-color bg-dark rounded-circle"></span>
191
- </label>
192
- ```
193
-
194
- ## Input color picker
195
-
196
- Add an color picker to your form to let users customize it according to their preferences.
197
-
198
- ```html
199
- <input
200
- type="color"
201
- class="form-control form-control-color"
202
- value="#066fd1"
203
- title="Choose your color"
204
- />
205
- ```
206
-
207
- There is also an example of a color picker input:
208
-
209
- ```html example centered
210
- <div class="mb-3">
211
- <label class="form-label">Color picker</label>
212
- <input
213
- type="color"
214
- class="form-control form-control-color"
215
- value="#066fd1"
216
- title="Choose your color"
217
- />
218
- </div>
219
- ```
220
-