form-color-check.mdx 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  1. ---
  2. title: Color check
  3. ---
  4. 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.
  5. ```html example centered
  6. <div class="mb-3">
  7. <label class="form-label">Color Input</label>
  8. <div class="row g-2">
  9. <div class="col-auto">
  10. <label class="form-colorinput">
  11. <input name="color" type="radio" value="dark" class="form-colorinput-input" />
  12. <span class="form-colorinput-color bg-dark"></span>
  13. </label>
  14. </div>
  15. <div class="col-auto">
  16. <label class="form-colorinput form-colorinput-light">
  17. <input name="color" type="radio" value="white" class="form-colorinput-input" checked />
  18. <span class="form-colorinput-color bg-white"></span>
  19. </label>
  20. </div>
  21. <div class="col-auto">
  22. <label class="form-colorinput">
  23. <input name="color" type="radio" value="blue" class="form-colorinput-input" />
  24. <span class="form-colorinput-color bg-blue"></span>
  25. </label>
  26. </div>
  27. <div class="col-auto">
  28. <label class="form-colorinput">
  29. <input name="color" type="radio" value="azure" class="form-colorinput-input" />
  30. <span class="form-colorinput-color bg-azure"></span>
  31. </label>
  32. </div>
  33. <div class="col-auto">
  34. <label class="form-colorinput">
  35. <input name="color" type="radio" value="indigo" class="form-colorinput-input" />
  36. <span class="form-colorinput-color bg-indigo"></span>
  37. </label>
  38. </div>
  39. <div class="col-auto">
  40. <label class="form-colorinput">
  41. <input name="color" type="radio" value="purple" class="form-colorinput-input" />
  42. <span class="form-colorinput-color bg-purple"></span>
  43. </label>
  44. </div>
  45. <div class="col-auto">
  46. <label class="form-colorinput">
  47. <input name="color" type="radio" value="pink" class="form-colorinput-input" />
  48. <span class="form-colorinput-color bg-pink"></span>
  49. </label>
  50. </div>
  51. <div class="col-auto">
  52. <label class="form-colorinput">
  53. <input name="color" type="radio" value="red" class="form-colorinput-input" />
  54. <span class="form-colorinput-color bg-red"></span>
  55. </label>
  56. </div>
  57. <div class="col-auto">
  58. <label class="form-colorinput">
  59. <input name="color" type="radio" value="orange" class="form-colorinput-input" />
  60. <span class="form-colorinput-color bg-orange"></span>
  61. </label>
  62. </div>
  63. <div class="col-auto">
  64. <label class="form-colorinput">
  65. <input name="color" type="radio" value="yellow" class="form-colorinput-input" />
  66. <span class="form-colorinput-color bg-yellow"></span>
  67. </label>
  68. </div>
  69. <div class="col-auto">
  70. <label class="form-colorinput">
  71. <input name="color" type="radio" value="lime" class="form-colorinput-input" />
  72. <span class="form-colorinput-color bg-lime"></span>
  73. </label>
  74. </div>
  75. </div>
  76. </div>
  77. ```
  78. ```html
  79. <label class="form-colorinput">
  80. <input name="color" type="radio" value="lime" class="form-colorinput-input" />
  81. <span class="form-colorinput-color bg-lime"></span>
  82. </label>
  83. ```
  84. ```html example centered
  85. <div class="mb-3">
  86. <label class="form-label">Color Input</label>
  87. <div class="row g-2">
  88. <div class="col-auto">
  89. <label class="form-colorinput">
  90. <input name="color-rounded" type="radio" value="dark" class="form-colorinput-input" />
  91. <span class="form-colorinput-color bg-dark rounded-circle"></span>
  92. </label>
  93. </div>
  94. <div class="col-auto">
  95. <label class="form-colorinput form-colorinput-light">
  96. <input name="color-rounded" type="radio" value="white" class="form-colorinput-input" checked />
  97. <span class="form-colorinput-color bg-white rounded-circle"></span>
  98. </label>
  99. </div>
  100. <div class="col-auto">
  101. <label class="form-colorinput">
  102. <input name="color-rounded" type="radio" value="blue" class="form-colorinput-input" />
  103. <span class="form-colorinput-color bg-blue rounded-circle"></span>
  104. </label>
  105. </div>
  106. <div class="col-auto">
  107. <label class="form-colorinput">
  108. <input name="color-rounded" type="radio" value="azure" class="form-colorinput-input" />
  109. <span class="form-colorinput-color bg-azure rounded-circle"></span>
  110. </label>
  111. </div>
  112. <div class="col-auto">
  113. <label class="form-colorinput">
  114. <input name="color-rounded" type="radio" value="indigo" class="form-colorinput-input" />
  115. <span class="form-colorinput-color bg-indigo rounded-circle"></span>
  116. </label>
  117. </div>
  118. <div class="col-auto">
  119. <label class="form-colorinput">
  120. <input name="color-rounded" type="radio" value="purple" class="form-colorinput-input" />
  121. <span class="form-colorinput-color bg-purple rounded-circle"></span>
  122. </label>
  123. </div>
  124. <div class="col-auto">
  125. <label class="form-colorinput">
  126. <input name="color-rounded" type="radio" value="pink" class="form-colorinput-input" />
  127. <span class="form-colorinput-color bg-pink rounded-circle"></span>
  128. </label>
  129. </div>
  130. <div class="col-auto">
  131. <label class="form-colorinput">
  132. <input name="color-rounded" type="radio" value="red" class="form-colorinput-input" />
  133. <span class="form-colorinput-color bg-red rounded-circle"></span>
  134. </label>
  135. </div>
  136. <div class="col-auto">
  137. <label class="form-colorinput">
  138. <input name="color-rounded" type="radio" value="orange" class="form-colorinput-input" />
  139. <span class="form-colorinput-color bg-orange rounded-circle"></span>
  140. </label>
  141. </div>
  142. <div class="col-auto">
  143. <label class="form-colorinput">
  144. <input name="color-rounded" type="radio" value="yellow" class="form-colorinput-input" />
  145. <span class="form-colorinput-color bg-yellow rounded-circle"></span>
  146. </label>
  147. </div>
  148. <div class="col-auto">
  149. <label class="form-colorinput">
  150. <input name="color-rounded" type="radio" value="lime" class="form-colorinput-input" />
  151. <span class="form-colorinput-color bg-lime rounded-circle"></span>
  152. </label>
  153. </div>
  154. </div>
  155. </div>
  156. ```
  157. ```html
  158. <label class="form-colorinput">
  159. <input name="color-rounded" type="radio" value="dark" class="form-colorinput-input" />
  160. <span class="form-colorinput-color bg-dark rounded-circle"></span>
  161. </label>
  162. ```
  163. ## Input color picker
  164. Add an color picker to your form to let users customise it according to their preferences.
  165. ```html example code centered
  166. <div class="mb-3">
  167. <label class="form-label">Color picker</label>
  168. <input type="color" class="form-control form-control-color" value="#066fd1" title="Choose your color">
  169. </div>
  170. ```