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.

Ready to Get Started?

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