_activeComponentId = 'firstName';

FormField

A labeled wrapper around a single input, radio, checkbox or switch, handling label placement, the required indicator and inline/transparent styling. See the Form component for composing several fields into a data-bound form.

Usage

Name carries a ui-tooltip-manager-id/ui-tooltip-id, this is FormField's own feature: setting both shows an info icon after the label, wired automatically to the matching ui-template on a TooltipManager, no manual trigger setup and no Box needed unless you're customizing the tooltip's own positioning.

<div id="formFieldTooltipManager" ui-type="TooltipManager"
    ui-selectable-tooltip-content="true" ui-show-on-focus="true" ui-arrowless="false">
    <div ui-template="nameTooltip" ui-cloneable="false">
        As it should appear on your profile.
    </div>
</div>

<div id="firstName" ui-type="FormField" ui-label="Name" ui-required="true" 
    ui-label-display="3" ui-borderless="true"
    ui-tooltip-manager-id="formFieldTooltipManager" ui-tooltip-id="nameTooltip">
        <div ui-template="Field"><input type="text" /></div>
</div>

<div id="contactMethod" ui-type="FormField" ui-label="Preferred contact">
    <div ui-template="Field">
        <div id="contactEmail" ui-type="FormField" ui-label="Email" 
            ui-inline="true" ui-transparent="true">
                <div ui-template="Field">
                    <input type="radio" name="contactMethod" checked="checked" />
                </div>
        </div>
        <div id="contactPhone" ui-type="FormField" ui-label="Phone" 
            ui-inline="true" ui-transparent="true">
                <div ui-template="Field">
                    <input type="radio" name="contactMethod" />
                </div>
        </div>
    </div>
</div>

<div id="subscribe" ui-type="FormField" ui-label="Subscribe to updates" ui-switch="false">
    <div ui-template="Field"><input type="checkbox" /></div>
</div>

const above = componyx.UI.FormField.LabelDisplayOption.ABOVE;

const tooltipManager = $UI.createComponent(componyx.UI.TooltipManager, {
    id: 'formFieldTooltipManager',
    selectableTooltipContent: true,
    showOnFocus: true,
    arrowless: false,
    containerElement: document.body
});
tooltipManager.addTooltip('nameTooltip', 'As it should appear on your profile.');
tooltipManager.show();

const firstName = $UI.createComponent(componyx.UI.FormField, {
    id: 'firstName',
    label: 'Name',
    required: true,
    labelDisplay: above,
    borderless: true,
    tooltipManagerId: 'formFieldTooltipManager',
    tooltipId: 'nameTooltip',
    containerElement: document.body
});
firstName.setFieldTemplate('<input type="text" />');
firstName.show();

const contactEmail = $UI.createComponent(componyx.UI.FormField, {
    id: 'contactEmail',
    label: 'Email',
    inline: true,
    transparent: true
});
contactEmail.setFieldTemplate('<input type="radio" name="contactMethod" checked="checked" />');

const contactPhone = $UI.createComponent(componyx.UI.FormField, {
    id: 'contactPhone',
    label: 'Phone',
    inline: true,
    transparent: true
});
contactPhone.setFieldTemplate('<input type="radio" name="contactMethod" />');

const contactMethod = $UI.createComponent(componyx.UI.FormField, {
    id: 'contactMethod',
    label: 'Preferred contact',
    containerElement: document.body
});
contactMethod.setFieldTemplate([contactEmail.element, contactPhone.element]);
contactMethod.show();

const subscribe = $UI.createComponent(componyx.UI.FormField, {
    id: 'subscribe',
    label: 'Subscribe to updates',
    switch: false,
    containerElement: document.body
});
subscribe.setFieldTemplate('<input type="checkbox" />');
subscribe.show();

labelDisplay accepts the numeric componyx.UI.FormField.LabelDisplayOption enum: 0 Auto, 1 Floating, 2 Inside, 3 Above, 4 Before, 5 After. After is applied automatically for checkboxes and radio buttons and isn't meant to be set manually on a text field.

What's next

See the FormField API reference for the complete list of properties, events and methods. See the Form component for composing several FormFields into a single data-bound form.