How to place a button next to a textfield?

Normally when adding multiple components to a form, they are placed below one another. If you wish to add multiple components side by side, there are a few ways of doing this. One of them is using the form-check-inline class as described in Advanced features. This approach is used to place a button next to a textfield in the following example:

txt                 = component.TextField("name", form);
txt.label           = "Name";
txt.customClass     = "form-check-inline";
txt.labelPosition   = "left-left";

btn             = component.Button("check", form);
btn.label       = "Check";
btn.customClass = "form-check-inline";

txt = component.TextField("name", form)
txt.label = "Name"
txt.customClass = "form-check-inline"
txt.labelPosition = "left-left"

btn = component.Button("check", form)
btn.label = "Check"
btn.customClass = "form-check-inline"

Components side by side using customClass

An alternative approach is to use a Columns component to place the components side by side. If we wish to display the textfield's label above the component instead of next to it, we have to specify the label separately in order to maintain horizontal alignment between the textfield and the button:

% Separately define a label for the textfield.
lbl         = component.HtmlElement("txt_label", form);
lbl.content = "Name";

% Keep the TextField's label empty.
txt         = component.TextField("name");
btn         = component.Button("check");
btn.label   = "Check";

cols = component.Columns("my_columns", form);
cols.setContent({txt, btn}, [2, 1])

# Separately define a label for the textfield.
lbl = component.HtmlElement("txt_label", form)
lbl.content = "Name"

# Keep the TextField's label empty.
txt = component.TextField("name")
btn = component.Button("check")
btn.label = "Check"

cols = component.Columns("my_columns", form)
cols.setContent([txt, btn], [2, 1])

Components side by side using Columns