Loki_FieldComponents

Jump to User Docs

Components
PHP 8.3 | 8.4
Magento 2.4.7 | 2.4.8
Unit Tests 1
Latest Release 2.0.16

This is the package for Loki FieldComponents, as is being used by the Loki Checkout suite.

Installation

Install this package via composer (assuming you have setup the composer.yireo.com repository correctly already):

composer require loki/magento2-field-components

Next, enable this module:

bin/magento module:enable Loki_FieldComponents

Support

For getting support, create an Issue under the following project URL:

https://gitlab.yireo.com/loki-checkout/Loki_FieldComponents

Configuration Options

The following options of this module can be configured via the Store Configuration:

Field settings > Use required block
loki_field_components/fields/use_required_block
Each required field could be styled with an additional required block. In Luma, this is nice. In Hyvä, this is not needed because the styling is done via CSS. This settings adds the block <code>loki-field-components.utils.required</code> when a field is required
Module Dependencies

The following dependencies are declared in the module its `etc/module.xml` file:

Magento_Backend Magento_Config Magento_Customer Magento_MediaStorage Loki_CssUtils Loki_Components
Composer details
Magento module name
Loki_FieldComponents
Composer name
loki/magento2-field-components
Composer version
2.0.16
Default branch
main
Requirements
magento/framework: ^103.0
magento/module-customer: ^103.0
magento/module-config: ^101.0
magento/module-backend: ^102.0
magento/module-media-storage: ^100.0
loki/magento2-css-utils: ^1.0
loki/magento2-components: ^2.0
ext-pcre: *
Releases
dev-main 29 August 2025
2.0.16 28 August 2025
2.0.15 26 August 2025
2.0.14 21 August 2025
2.0.13 18 August 2025
2.0.12 15 August 2025
2.0.11 15 August 2025
2.0.10 15 August 2025
2.0.9 15 August 2025
2.0.8 13 August 2025
2.0.7 10 August 2025
2.0.6 06 August 2025
2.0.5 01 August 2025
2.0.4 30 July 2025
2.0.3 25 July 2025
2.0.2 24 July 2025
2.0.1 22 July 2025
2.0.0 22 July 2025
Changelog

[2.0.16] - 28 August 2025

Fixed

  • Add CI files
  • Replace yireo/opensearch with yireo/opensearch-dummy in Gitlab CI
  • Remove obsolete autofill hack

[2.0.15] - 26 August 2025

Fixed

  • Allow field label to come from XML layout
  • Add support for Alpine Mask config via XML layout
  • Fix Alpine Mask plugin not being loaded under Hyva
  • Rename Alpine CSP template; Load Alpine Mask under Luma properly
  • Disable autocomplete for checkboxes

[2.0.14] - 21 August 2025

Fixed

  • Add CSS class cursor-pointer to entire label of radio field
  • Replace LokiComponentsUtilBlockCssClass with LokiCssUtilsUtilCssClass
  • Declare used PHP namespaces
  • Document latest version of template
  • Add missing strict_types declaration

[2.0.13] - 18 August 2025

Fixed

  • Lower requirements to PHP 8.1
  • Fix newlines after comments
  • Add aria-hidden to asterisk
  • Replace autocomplete=1 with autocomplete=on
  • Fix non-CSP-compliant x-show statement
  • Remove duplicate LokiToggle component
  • Add label to switch
  • Finalize improved switch field with only input and label element
  • Fixes for radio buttons
  • Make switch field-type CSP compliant and visual improvements
  • Rename tab in Store Config from "Yireo" to "Loki"

[2.0.12] - 15 August 2025

Fixed

  • Fix JS warning on value.length if null

[2.0.11] - 15 August 2025

Fixed

  • Mark input field with [data-valid] also on page load when it is valid and not-empty

[2.0.10] - 15 August 2025

Fixed

  • Do not show loader-overlay on load by adding x-cloak

[2.0.9] - 15 August 2025

Fixed

  • Add inline styling (for CSS properties) via $style()
  • Move config from Yireo tab to Loki tab

[2.0.8] - 13 August 2025

Fixed

  • Stretch div of buttons in full width
  • Add data-valid attribute to fields
  • Add isValid method
  • Always set submitted=true after component update
  • Allow property required to be properly set from XML layout

[2.0.7] - 10 August 2025

Fixed

  • Add escaping to templates
  • Allow toggling loader overlay via showLoader property
  • Rewrite loader CSS to allow displaying either inline SVG or imager
  • Make sure help-icon and loader do not overlap
  • Configure loader via XML layout to be either inline SVG or image

[2.0.6] - 06 August 2025

Fixed

  • Move initMethods and destroyMethods into component partials
  • Implement aria-errormessage
  • Fix empty fields when component value is null
  • Render valid=false if required and empty
  • Rewrite aria-invalid params from PHP to Alpine
  • Add submitted flag to all components
  • Lower PHP requirement to PHP 8.2+

[2.0.5] - 01 August 2025

Fixed

  • Add missing $css wrapper
  • Prevent removed component from triggering warnings on missing $refs.field

[2.0.4] - 30 July 2025

Fixed

  • Add ARIA labels

[2.0.3] - 25 July 2025

Fixed

  • Fix SVG image output bug with better debugging

[2.0.2] - 24 July 2025

Fixed

  • Fix issue with empty icon output

[2.0.1] - 22 July 2025

Fixed

  • If event value and component value, do not submit anything
  • Remove debugging output
  • Upgrade CI tests to Magento 2.4.8 and PHP 8.4

[2.0.0] - 21 July 2025

Fixed

  • Make sure name in layout is always string
  • Rename PHP namespace from Yireo_Loki* to Loki*
  • Rename composer package from yireo/magento2-loki* to loki/magento2*

[1.0.5] - 16 July 2025

Fixed

  • Add block loki-components.utils.field-completed for icons within input fields

[1.0.4] - 08 July 2025

Fixed

  • Allow configuring of help icon via XML layout

[1.0.3] - 26 May 2025

Fixed

  • Add new method to get image by URL

[1.0.2] - 22 May 2025

Fixed

  • Make width of help configurable
  • Add setValid method to Alpine components
  • Update admin settings with tooltip and regenerate new MODULE.json

[1.0.1] - 13 May 2025

Fixed

  • Update MODULE.json
  • Update license
  • Rewrite Alpine from initActions object to methods starting with init
  • Do not re-enable an initially disabled field after reload
  • Add PHTML attribute disabled again anyway
  • Allow PHP 8.4 in CI
  • Update composer and module deps

[1.0.0] - 25 April 2025

Fixed

  • Remove x-model because of CSP compliance
  • Allow for upgrade to LokiComponents 1.0
  • Draft of fast checkout option for PSPs
  • Fix this.field into this.$refs.field
  • Move all field behaviour to FieldComponentType
  • Remove gridClass, add colSpan and mdColSpan in grid layouts
  • Remove FieldTemplateLocator from context
  • Rewrite FieldTemplateLocator usage to be independent of context
  • Make loader icon in fields depend on Alpine and activate only after configurable timeout
  • Add comment option to fields
  • Fix Alpine overriding disabled state in select

[0.0.5] - 16 April 2025

Fixed

  • Add JS password complexity validation
  • Move scripts from "before.body.end" to new "loki-scripts" container
  • Add configurable password complexity
  • Enhance look&feel
  • Rename LokiCheckoutValidator to LokiComponentValidator
  • Password visibility, password repeat

[0.0.4] - 08 April 2025

Fixed

  • Remove select-icon when loading select-field
  • Add textarea field-sizing-content
  • Mobile fixes

[0.0.3] - 04 April 2025

Fixed

  • Remove specific step button templates in favor of FieldComponents
  • Modify overlay when loading next step
  • Add icons to step button
  • Disable field via Alpine instead
  • Add ID per form field
  • Add help text properly
  • Fetch help text from ViewModel instead of block

[0.0.2] - 11 March 2025

Fixed

  • Rename field_name to fieldName
  • Fix client-side validation after refactoring to LokiFieldComponents
  • Add input prefix
  • Register Tailwind and module properly
  • Add Alpine x-mask
  • Add new input types
  • Add switch in basic form
  • Fetch input label from XML layout by default
  • Fix location of buttons
  • Move required block
  • Add module dependencies

[0.0.1] - 27 February 2025

  • Initial release
Jump to User Docs

Last modified: July 22, 2025