inout group link

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

@@ -22,8 +22,8 @@
 </div>
 
 <div class="mb-3">
-   <label class="form-label">Price</label>
-   {% include ui/form/input-group.html prepend="$" append=".00" %}
+	<label class="form-label">Input with appended link</label>
+	{% include ui/form/input-group.html append-link="Show password" class="input-group-flat" %}
 </div>
 
 <div class="mb-3">

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

@@ -22,4 +22,11 @@
 		</span>
 	</div>
 	{% endif %}
+	{% if include.append-link %}
+	<div class="input-group-append">
+		<span class="input-group-text">
+			<a href="#" class="input-group-link">{{ include.append-link }}</a>
+		</span>
+	</div>
+	{% endif %}
 </div>

scss/ui/_forms.scss

@@ -130,6 +130,10 @@ Input group
   border-left: 0;
 }
 
+.input-group-link {
+  font-size: $h5-font-size;
+}
+
 .input-group-flat {
   &:focus-within {
     box-shadow: $input-focus-box-shadow;
@@ -158,6 +162,7 @@ Input group
 
   .input-group-prepend {
     margin-right: 0;
+    border-right: 0;
 
     .input-group-text {
       padding-right: 0;
@@ -167,6 +172,10 @@ Input group
   .input-group-append {
     margin-left: 0;
 
+    &:not(:last-child) .input-group-text {
+      border-right: 0;
+    }
+
     .input-group-text {
       padding-left: 0;
     }