ColorPicker
TsgcHTMLComponent_ColorPicker — render a native HTML5 color input with an optional hex text field and one-click swatch presets, in Delphi, C++ Builder and .NET.
TsgcHTMLComponent_ColorPicker — render a native HTML5 color input with an optional hex text field and one-click swatch presets, in Delphi, C++ Builder and .NET.
A labelled native color <input>. Set a starting Value, add preset Swatches, then read the HTML property (or call the static Build helper for a one-liner).
TsgcHTMLComponent_ColorPicker
Native HTML5 <input type="color"> + swatches
Delphi, C++ Builder, .NET
Set FieldName, LabelText and a starting Value, add one-click presets to Swatches, then read HTML — or call the static Build helper.
uses
sgcHTML_Component_ColorPicker;
var
oColor: TsgcHTMLComponent_ColorPicker;
begin
oColor := TsgcHTMLComponent_ColorPicker.Create(nil);
try
oColor.FieldName := 'brand_color';
oColor.LabelText := 'Brand color';
oColor.Value := '#0d6efd';
oColor.ShowValueInput := True;
oColor.Swatches.Add('#0d6efd');
oColor.Swatches.Add('#198754');
oColor.Swatches.Add('#dc3545');
WebModule.Response := oColor.HTML; // color input + hex field + swatches
finally
oColor.Free;
end;
end;
// Or the static one-liner (field name, value, label):
Result := TsgcHTMLComponent_ColorPicker.Build('brand_color', '#0d6efd', 'Brand color');// includes: sgcHTML_Component_ColorPicker.hpp
TsgcHTMLComponent_ColorPicker *oColor = new TsgcHTMLComponent_ColorPicker(NULL);
try
{
oColor->FieldName = "brand_color";
oColor->LabelText = "Brand color";
oColor->Value = "#0d6efd";
oColor->ShowValueInput = true;
oColor->Swatches->Add("#0d6efd");
oColor->Swatches->Add("#198754");
oColor->Swatches->Add("#dc3545");
String html = oColor->HTML; // color input + hex field + swatches
}
__finally
{
delete oColor;
}
// Or the static one-liner:
String html = TsgcHTMLComponent_ColorPicker::Build("brand_color", "#0d6efd", "Brand color");using esegece.sgcWebSockets;
var color = new TsgcHTMLComponent_ColorPicker();
color.FieldName = "brand_color";
color.LabelText = "Brand color";
color.Value = "#0d6efd";
color.ShowValueInput = true;
color.Swatches.Add("#0d6efd");
color.Swatches.Add("#198754");
color.Swatches.Add("#dc3545");
string html = color.HTML; // color input + hex field + swatches
// Or the static one-liner:
string html2 = TsgcHTMLComponent_ColorPicker.Build("brand_color", "#0d6efd", "Brand color");The members you reach for most often.
Value pre-fills the picker (defaults to #0d6efd); FieldName sets the input's name so it posts with the form.
LabelText renders an optional form-label above the picker, linked via for.
ShowValueInput adds a synced text input next to the picker, so users can type or paste a #rrggbb value directly.
Swatches (a TStrings of hex codes) renders a row of preset buttons; clicking one updates the picker (and the hex field) client-side.
Disabled disables both inputs; ColorPickerID sets the element id (falls back to cp_<FieldName> or an auto-generated id).
Build(fieldName, value, labelText) returns the markup in one line without managing an instance.
| Online HelpFull API reference and usage guide for this component. | Open | |
| All sgcHTML ComponentsBrowse the full feature matrix of 80+ components. | Open | |
| Download Free TrialThe 30-day trial ships the 60.HTML demo projects. | Open | |
| PricingSingle, Team and Site licenses with full source code. | Open |