form-elements-2.html 2.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. <div class="mb-3">
  2. <label class="form-label">Form control rounded</label>
  3. <input type="text" class="form-control form-control-rounded mb-2" name="Form control rounded" placeholder="Text..">
  4. {% include ui/form/input-icon.html input-class="form-control-rounded" %}
  5. </div>
  6. <div class="mb-3">
  7. <label class="form-label">Form control flush</label>
  8. <input type="text" class="form-control form-control-flush" name="Form control flush" placeholder="Text..">
  9. </div>
  10. <div class="mb-3">
  11. <label class="form-label">Input group</label>
  12. {% include ui/form/input-group.html prepend="@" placeholder="username" class="mb-2" %}
  13. {% include ui/form/input-group.html append=".tabler.io" placeholder="subdomain" class="mb-2" %}
  14. {% include ui/form/input-group.html prepend="https://" append=".tabler.io" placeholder="subdomain" %}
  15. </div>
  16. <div class="mb-3">
  17. <label class="form-label">Input with checkbox or radios</label>
  18. {% include ui/form/input-group.html prepend="checkbox" class="mb-2" %}
  19. {% include ui/form/input-group.html append="radio" %}
  20. </div>
  21. <div class="mb-3">
  22. <label class="form-label">Input with prepended text</label>
  23. {% include ui/form/input-group.html prepend="https://tabler.io/users/" flat=true input-class="ps-0" value="yourfancyusername" %}
  24. </div>
  25. <div class="mb-3">
  26. <label class="form-label">Input with appended text</label>
  27. {% include ui/form/input-group.html append=".tabler.io" input-class="text-end pe-0" flat=true value="yourfancydomain" %}
  28. </div>
  29. <div class="mb-3">
  30. <label class="form-label">Input with appended link</label>
  31. {% include ui/form/input-group.html append-link="Show password" flat=true type="password" value="ultrastrongpassword" %}
  32. </div>
  33. {% capture html %}
  34. <kbd>ctrl + K</kbd>
  35. {% endcapture %}
  36. <div class="mb-3">
  37. <label class="form-label">Input with appended kbd</label>
  38. {% include ui/form/input-group.html append-html=html flat=true %}
  39. </div>
  40. <div class="mb-3">
  41. <label class="form-label">Input with appended icon links</label>
  42. {% include ui/form/input-group.html append-button="x:Clear search,adjustments:Search settings,bell:Add notification" flat=true %}
  43. </div>
  44. <div class="mb-3">
  45. <label class="form-label">Floating inputs</label>
  46. <div class="form-floating mb-3">
  47. <input type="email" class="form-control" id="floating-input" value="name@example.com" autocomplete="off">
  48. <label for="floating-input">Email address</label>
  49. </div>
  50. <div class="form-floating mb-3">
  51. <input type="password" class="form-control" id="floating-password" value="Password" autocomplete="off">
  52. <label for="floating-password">Password</label>
  53. </div>
  54. <div class="form-floating">
  55. <select class="form-select" id="floatingSelect" aria-label="Floating label select example">
  56. <option selected>Open this select menu</option>
  57. <option value="1">One</option>
  58. <option value="2">Two</option>
  59. <option value="3">Three</option>
  60. </select>
  61. <label for="floatingSelect">Select</label>
  62. </div>
  63. </div>