Magento 2 : Form component

Text box component with suffix

Magento use ui component with suffix in product form for weight.
Following example shows how to use the suffix for a text ui component.

In xml

<field name="duration" formElement="input" component="Vasan_Bidding/js/form/components/duration">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="source" xsi:type="string">milestone</item>
                </item>
            </argument>
            <settings>
                <elementTmpl>Vasan_Bidding/form/element/duration_input</elementTmpl>
                <dataType>text</dataType>
                <visible>true</visible>
                <dataScope>duration</dataScope>
                <label translate="true">Duration</label>
            </settings>
        </field>

In JS file

define([
    'Magento_Ui/js/form/element/abstract'
], function (Element) {
    'use strict';

    return Element.extend({
        defaults: {
            suffix_text: 'minutes'
        }
    });
});

In html

<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<div class="admin__control-addon">
    <input class="admin__control-text" type="text"
           data-bind="
        event: {change: userChanges},
        value: value,
        hasFocus: focused,
        valueUpdate: valueUpdate,
        attr: {
            name: inputName,
            placeholder: placeholder,
            'aria-describedby': noticeId,
            id: uid,
            disabled: disabled,
            maxlength: 255

    }"/>
    <label class="admin__addon-suffix" data-bind="attr: { for: uid }"><span data-bind="text: suffix_text"></span></label>
</div>