Auto Format Inputs Input fields with autoformatting. Important Notes:

Add proper data-bolt-format-input to the form-input.twig attributes object in order to autoformat a given value into input field. For example:

'data-bolt-format-input': 'percent' for percentage autoformatting. 'data-bolt-format-input': 'currency-us' for dollar autoformatting. 'data-bolt-format-input': 'currency-ja' for yen autoformatting. 'data-bolt-format-input': 'number' for number autoformatting.
Demo
Twig
{% set form_children %}
  {% set for_value = 'percent' %}
    {% set label %}
      {% include '@bolt-components-form/form-label.twig' with {
        title: 'Example of percent auto formatting (add attribute \'data-bolt-format-input="percent"\')',
        attributes: {
          for: for_value
        },
        displayType: 'block'
      } only %}
    {% endset %}
    {% set input %}
      {% include '@bolt-components-form/form-input.twig' with {
        attributes: {
          placeholder: 'E.g. 10',
          required: true,
          type: 'number',
          id: for_value,
          'data-bolt-format-input': 'percent',
          min: 0,
          max: 100
        },
      } only %}
    {% endset %}
    {% include '@bolt-components-form/form-element.twig' with {
      labelDisplay: 'before',
      label: label,
      children: input
    } only %}
{% endset %}

{% include '@bolt-components-form/form.twig' with {
  children: form_children
} only %}
HTML
Not available in plain HTML. Please use Twig.