InputGroup

TsgcHTMLComponent_InputGroup — render a Bootstrap input with prepend and append addon text (for example $.00 or @username), in Delphi, C++ Builder and .NET.

TsgcHTMLComponent_InputGroup

An input component that emits a Bootstrap input-group with optional prepend and append addon text around a form-control. Set the texts and the input, then read the HTML property.

Component class

TsgcHTMLComponent_InputGroup

Renders

Bootstrap 5 input-group markup

Languages

Delphi, C++ Builder, .NET

Create it, add addons, render it

Set PrependText/AppendText and the input properties, then read HTML — or call the static Build helper for a one-liner.

uses
  sgcHTML_Enums, sgcHTML_Component_InputGroup;

var
  oGroup: TsgcHTMLComponent_InputGroup;
begin
  oGroup := TsgcHTMLComponent_InputGroup.Create(nil);
  try
    oGroup.PrependText := '$';
    oGroup.AppendText := '.00';
    oGroup.InputName := 'amount';
    oGroup.InputTypeEnum := itNumber;
    oGroup.Placeholder := '0';
    oGroup.Size := igsLarge;

    WebModule.Response := oGroup.HTML;   // <div class="input-group">...
  finally
    oGroup.Free;
  end;
end;

// Or the static one-liner (prepend, name, placeholder, append):
Result := TsgcHTMLComponent_InputGroup.Build('@', 'user', 'username');
// includes: sgcHTML_Enums.hpp, sgcHTML_Component_InputGroup.hpp

TsgcHTMLComponent_InputGroup *oGroup = new TsgcHTMLComponent_InputGroup(NULL);
try
{
  oGroup->PrependText = "$";
  oGroup->AppendText = ".00";
  oGroup->InputName = "amount";
  oGroup->InputTypeEnum = itNumber;
  oGroup->Placeholder = "0";
  oGroup->Size = igsLarge;

  String html = oGroup->HTML;   // <div class="input-group">...
}
__finally
{
  delete oGroup;
}

// Or the static one-liner:
String html = TsgcHTMLComponent_InputGroup::Build("@", "user", "username");
using esegece.sgcWebSockets;

var group = new TsgcHTMLComponent_InputGroup();
group.PrependText = "$";
group.AppendText = ".00";
group.InputName = "amount";
group.InputTypeEnum = TsgcHTMLInputType.itNumber;
group.Placeholder = "0";
group.Size = TsgcHTMLInputGroupSize.igsLarge;

string html = group.HTML;   // <div class="input-group">...

// Or the static one-liner:
string html2 = TsgcHTMLComponent_InputGroup.Build("@", "user", "username");

Key properties & methods

The members you reach for most often.

Addons

PrependText renders a leading input-group-text addon; AppendText renders a trailing one. Leave either empty to omit it.

Input

InputName, InputValue and Placeholder populate the inner form-control; InputType sets the raw HTML type string.

Input type

InputTypeEnum (TsgcHTMLInputType) picks itText, itEmail, itNumber, itPassword, itTel and more without hand-coding the type string.

Sizing

Size (TsgcHTMLInputGroupSize) chooses igsDefault, igsSmall or igsLarge to add the Bootstrap input-group-sm/-lg modifier.

Static helper

Build(prepend, inputName, placeholder, append) — and an overload taking a TsgcHTMLInputType — returns the markup in one line without managing an instance.

Output

HTML returns the complete input-group <div>; GroupID sets its id attribute for scripting or styling.

Keep exploring

All sgcHTML ComponentsBrowse the full feature matrix of 60+ components.
Download Free TrialThe 30-day trial ships the 60.HTML demo projects.
PricingSingle, Team and Site licenses with full source code.

Ready to Get Started?

Download the free trial and add input groups to your Delphi, C++ Builder or .NET web app.