MultiSelect Component — sgcHTML | eSeGeCe

MultiSelect

TsgcHTMLComponent_MultiSelect — render a searchable multi-select dropdown with chips, grouped options and dataset binding, in Delphi, C++ Builder and .NET.

TsgcHTMLComponent_MultiSelect

A dropdown control that keeps its selections as chips. Add options (or bind a dataset), optionally group them and cap the selections, then read the HTML property.

Component class

TsgcHTMLComponent_MultiSelect

Renders

Bootstrap dropdown + chips (self-contained widget)

Languages

Delphi, C++ Builder, .NET

Add options, render it

Set Placeholder, FieldName and Size, add options with AddOption (or bind LoadFromDataSet), then read HTML.

uses
  sgcHTML_Component_MultiSelect;

var
  oMulti: TsgcHTMLComponent_MultiSelect;
begin
  oMulti := TsgcHTMLComponent_MultiSelect.Create(nil);
  try
    oMulti.FieldName := 'tags';
    oMulti.Placeholder := 'Select tags';
    oMulti.MaxSelections := 3;
    oMulti.Size := mssLarge;

    oMulti.AddOption('js', 'JavaScript', True);
    oMulti.AddOption('py', 'Python');
    oMulti.AddOption('pas', 'Pascal');

    WebModule.Response := oMulti.HTML;   // dropdown + chips + hidden inputs
  finally
    oMulti.Free;
  end;
end;

// Or fill it straight from a dataset:
oMulti.LoadFromDataSet(qryTags, 'Code', 'Name', 'IsSelected');
// includes: sgcHTML_Component_MultiSelect.hpp

TsgcHTMLComponent_MultiSelect *oMulti = new TsgcHTMLComponent_MultiSelect(NULL);
try
{
  oMulti->FieldName = "tags";
  oMulti->Placeholder = "Select tags";
  oMulti->MaxSelections = 3;
  oMulti->Size = mssLarge;

  oMulti->AddOption("js", "JavaScript", true);
  oMulti->AddOption("py", "Python");
  oMulti->AddOption("pas", "Pascal");

  String html = oMulti->HTML;   // dropdown + chips + hidden inputs
}
__finally
{
  delete oMulti;
}
using esegece.sgcWebSockets;

var multi = new TsgcHTMLComponent_MultiSelect();
multi.FieldName = "tags";
multi.Placeholder = "Select tags";
multi.MaxSelections = 3;
multi.Size = TsgcHTMLMultiSelectSize.mssLarge;

multi.AddOption("js", "JavaScript", true);
multi.AddOption("py", "Python");
multi.AddOption("pas", "Pascal");

string html = multi.HTML;   // dropdown + chips + hidden inputs

Key properties & methods

The members you reach for most often.

Options

Options is a collection of TsgcHTMLMultiSelectOption (each with Value, Text, Selected, Disabled and Group).

Adding options

AddOption(aValue, aText, aSelected) appends a single entry; grouped entries share the same Group value and render under a dropdown header.

Dataset binding

LoadFromDataSet(aDataSet, aValueField, aTextField, aSelectedField) clears and refills Options from a query.

ShowSearch (default True) adds a filter box inside the dropdown; SearchPlaceholder and NoResultsText override its captions and fall back to the active locale.

Limits & sizing

MaxSelections caps how many chips can be picked at once (0 means unlimited); Size (mssDefault, mssSmall, mssLarge) matches Bootstrap's form-select sizing.

Posting the value

FieldName renders one hidden <input> per selected option so the form posts every value; MultiSelectID sets the element id.

Keep exploring

Online HelpFull API reference and usage guide for this component.
All sgcHTML ComponentsBrowse the full feature matrix of 80+ components.
Download Free TrialThe 30-day trial ships the 60.HTML demo projects.
PricingSingle, Team and Site licenses with full source code.
Best value: All-AccessEvery eSeGeCe product, Premium Support included, from €1,059/year.
See All-Access pricing

Ready to Get Started?

Download the free trial and start building web UIs in Delphi, C++ Builder and .NET.