Plugin Documentation

Form Input Group

Extend form controls by adding text, buttons, or button groups on either side of textual inputs.

Suggest Edits

ℹ️

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 about 2 months ago