Form Input Group
Extend form controls by adding text, buttons, or button groups on either side of textual inputs.
Beta Feature
The feature described here will be available starting with SureCart version 3.0. If you'd like to try this feature before the official release, you can install the beta version by visiting the SureCart plugin page on WordPress.org. In the Advanced Options section, select the latest version labeled "SureCart V3.0-Beta" from the Development Version dropdown, and click "Download."
Styles
These styles are necessary in order to use form input group markup.
wp_enqueue_style('surecart-input-group');
wp_enqueue_style('surecart-label');
wp_enqueue_style('surecart-form-control');
Input Group
We can use sc-input-group
class as wrapper with combination of sc-input-group-text
and sc-form-control
class to make UI for input group elements.
<div>
<label for="amount" class="sc-form-label">Input Group</label>
<div class="sc-input-group">
<span class="sc-input-group-text" id="basic-addon1">$</span>
<input type="number" id="amount" class="sc-form-control" aria-label="Amount" aria-describedby="basic-addon1">
</div>
</div>
Input Group Text
sc-input-group-text
is used to make the add-on for left or right side.
<div class="sc-input-group">
<span class="sc-input-group-text">$</span>
<input type="number" id="amount" class="sc-form-control" aria-label="Amount">
</div>
Sizing
We can make small or large input group using sc-input-group-sm
and sc-input-group-lg
Large Input group
<div>
<label for="amount" class="sc-form-label">Input Group</label>
<div class="sc-input-group sc-input-group-lg">
<span class="sc-input-group-text" id="basic-addon1">$</span>
<input type="text" id="amount" class="sc-form-control" aria-label="Amount" aria-describedby="basic-addon1">
</div>
</div>
Small Input group
<div>
<label for="amount" class="sc-form-label">Input Group</label>
<div class="sc-input-group sc-input-group-sm">
<span class="sc-input-group-text" id="basic-addon1">$</span>
<input type="text" id="amount" class="sc-form-control" aria-label="Amount" aria-describedby="basic-addon1">
</div>
</div>
Some more examples
Input Group With button - Apply Coupon Button
<div>
<label for="coupon" class="sc-form-label">Coupon Code</label>
<div class="sc-input-group">
<input type="text" id="coupon" class="sc-form-control" aria-label="quantity" aria-describedby="basic-addon1" value="101010">
<span class="sc-input-group-text" id="basic-addon1" style="opacity: 1;">
<button style="background: transparent; border: 0; font-size: var(--sc-button-font-size-medium); cursor: pointer; color: var(--sc-color-primary-500); font-weight: var(--sc-font-weight-semibold);">
Apply
</button>
</span>
</div>
</div>
Complex Group - Quantity Selector
Let's make a simple Quantity Selector using the sc-input-group
class.
<div>
<label for="quantity" class="sc-form-label">Select Quantity</label>
<div class="sc-input-group" style="width: 120px;">
<span class="sc-input-group-text" style="border-right: 1px solid var(--sc-input-border-color); padding-right: var(--sc-spacing-small);" id="basic-addon1">+</span>
<input type="text" style="text-align: center;" id="quantity" class="sc-form-control" aria-label="quantity" aria-describedby="basic-addon1">
<span class="sc-input-group-text" id="basic-addon1" style="border-left: 1px solid var(--sc-input-border-color); padding-left: var(--sc-spacing-small);">-</span>
</div>
</div>
Updated 4 months ago