Loki_FieldComponents
Jump to User Docs
Components
PHP
8.1 - 8.4
Magento
2.4.7 | 2.4.8
CSP
Yes
Unit Tests
1
Latest Release
2.2.8
This Magento 2 module contains Loki Field Components, as is being used by the Loki Checkout. Loki Field Components are Loki Components built for one specific purpose: To have the value of one specific HTML form field be saved to the Magento 2 backend via the repository of your choice. Thanks to this package, adding a new field to the Loki Checkout requires about 15 lines of code.
Installation
Install this package via composer:
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:
Loki_Base
Loki_Components
Loki_CssUtils
Magento_Backend
Magento_Catalog
Magento_Config
Magento_Customer
Magento_Directory
Magento_MediaStorage
Magento_Store
Magento_Theme
Yireo_CspUtilities
Composer details
Magento module name
Loki_FieldComponents
Composer name
loki/magento2-field-components
Composer version
2.2.8
Default branch
main
Requirements
ext-pcre: *
loki/magento2-components: ^2.0
loki/magento2-css-utils: ^1.0
magento/framework: ^103.0
magento/module-backend: ^102.0
magento/module-config: ^101.0
magento/module-media-storage: ^100.0
Releases
dev-main#706660b1de51ab005a0ee39efdc85074200a9638
20 October 2025
2.2.8
20 October 2025
2.2.7
20 October 2025
2.2.6
20 October 2025
2.2.5
20 October 2025
2.2.4
20 October 2025
2.2.3
20 October 2025
2.2.2
20 October 2025
2.2.1
20 October 2025
2.2.0
20 October 2025
2.1.5
20 October 2025
2.1.4
20 October 2025
2.1.3
20 October 2025
2.1.2
20 October 2025
2.1.1
20 October 2025
2.1.0
20 October 2025
2.0.16
20 October 2025
2.0.15
20 October 2025
2.0.14
20 October 2025
2.0.13
20 October 2025
2.0.12
20 October 2025
Changelog
[2.2.8] - 15 October 2025
Fixed
[2.2.7] - 15 October 2025
Fixed
Cleanup image templates with width, height and size
[2.2.6] - 10 October 2025
Fixed
Set aria-disabled=true on step-forward-button if not valid
Add button hint to step-forward button
Add role=tooltip to help popup
[2.2.5] - 08 October 2025
Fixed
Fix password field styling under Luma
[2.2.4] - 08 October 2025
Fixed
Use flexbox to align content in button
Always enable the step-forward button, just change its appearance
[2.2.4] - 08 October 2025
Fixed
Use flexbox to align content in button
Always enable the step-forward button, just change its appearance
[2.2.3] - 07 October 2025
Fixed
Add appearance:none to input switch
[2.2.2] - 06 October 2025
Fixed
Always add autocomplete=off to field by default
Throw exception when template renderer is not found in critical templates
[2.2.1] - 30 September 2025
Fixed
Add simple overlay template without loader icon
Update README
[2.2.0] - 23 September 2025
Fixed
Remove redundant CSS classes from icon containers
Wrong HTML ID for radioboxes
Implement new imageRenderer
Add vertical align to button
Better CSS classes in button and buttons
[2.1.5] - 16 September 2025
Fixed
Rename loki-components.alpinejs to loki.alpinejs
Manual merging of LokiCheckout_PostcodeNl
MR #11
[2.1.4] - 04 September 2025
Fixed
Rename FieldTemplateLocator to FieldTypeManager
Allow configuring fieldTypes via DI XML
Rename form/field/text.phtml to form/field/input.phtml
Remove obsolete FieldContext
Make FieldViewModel no longer abstract
[2.1.3] - 03 September 2025
Fixed
Move LokiFieldViewModelImageOutput to LokiComponentsUtilImageOutput to remove circular dependency
[2.1.2] - 02 September 2025
Fixed
[2.1.1] - 02 September 2025
Fixed
Fix PHP 8.1 issue in unit test
[2.1.0] - 02 September 2025
Added
Add accessibility value to hidden labels
Add labels to buttons
Allow adding field attributes via XML layout
Refactor hard-coded field attributes to FieldViewModel::getFieldAttributes()
Fixed
Remove LengthBehaviourInterface
Remove hasMin / hasMax / getMin / getMax methods
[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
[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
Jump to User Docs
Last modified: September 1, 2025