input-group-flat

pages/_docs/form-elements.md

@@ -184,7 +184,7 @@ bootstrap-link: components/forms/
 
 <div class="mb-2">
    <label class="form-label">Your vanity URL</label>
-   {% include ui/form/input-group.html prepend="https://example.com/users/" %}
+   {% include ui/form/input-group.html prepend="https://tabler.io/users/" %}
 </div>
 
 <div class="mb-2">

pages/_includes/forms/form-elements-1.html

@@ -4,6 +4,7 @@
 </div>
 <div class="mb-3">
    <label class="form-label">Text</label>
+   <div class="form-hint">Here's some more info.</div>
    <input type="text" class="form-control" name="example-text-input" placeholder="Text..">
 </div>
 <div class="mb-3">

pages/_includes/forms/form-elements-2.html

@@ -9,8 +9,13 @@
 </div>
 
 <div class="mb-3">
-   <label class="form-label">Your vanity URL</label>
-   {% include ui/form/input-group.html prepend="https://example.com/users/" %}
+   <label class="form-label">Your custom URL</label>
+   {% include ui/form/input-group.html prepend="https://tabler.io/users/" class="input-group-flat" input-class="pl-0" %}
+</div>
+
+<div class="mb-3">
+   <label class="form-label">Your custom subdomain</label>
+   {% include ui/form/input-group.html append=".tabler.io" input-class="text-right pr-0" class="input-group-flat" %}
 </div>
 
 <div class="mb-3">

pages/_includes/ui/form/input-group.html

@@ -4,7 +4,7 @@
     <span class="input-group-text">{{ include.prepend }}</span>
   </div>
   {% endif %}
-  <input type="text" class="form-control"{% if include.placeholder %} placeholder="{{ include.placeholder }}"{% endif %}{% if include.placeholder %} value="{{ include.value }}"{% endif %}>
+  <input type="text" class="form-control{% if include.input-class %} {{ include.input-class }}{% endif %}"{% if include.placeholder %} placeholder="{{ include.placeholder }}"{% endif %}{% if include.placeholder %} value="{{ include.value }}"{% endif %}>
   {% if include.append %}
   <div class="input-group-append">
     <span class="input-group-text">{{ include.append }}</span>