Dynamic Attributes
Create any custom attribute, even if it's reserved by Webflow
Last updated
Create any custom attribute, even if it's reserved by Webflow
Last updated
Webflow's custom attributes feature is much more powerful with the new CMS binding capability- but many important attribute names are reserved to protect unwary web designers from themselves.
In certain cases, the ability to set these attributes is crucial.
SA5's Dynamic Attributes feature overcomes this by allowing you to create proxy attributes that are then applied to the page once the page has loaded.
Webflow's ECommerce Products and Categories do not support Webflow's CMS bound custom attributes. See the Future subpage here for some work we're doing on that.
If you've never encountered it, this is what happens in Webflow when you attempt to use a reserved attribute name.
Here's a partial list of reserved attribute names, as documented by samliew;
abbr, accept, action, align, alt, autofocus, autoplay, bgcolor, border, char, charoff, charset, cite, class, cols, colspan, content, controls, coords, crossorigin, datetime, default, disabled, download, for, form, formaction, formenctype, formmethod, formnovalidate, formtarget, frame, group, headers, height, high, href, hspace, icon, id, ismap, kind, label, list, loop, low, manifest, media, method, multiple, muted, name, optimum, placeholder, poster, preload, radiogroup, readonly, required, reversed, rows, rowspan, sandbox, scheme, scope, scoped, scrolling, seamless, selected, shape, size, sizes, src, srcdoc, srclang, style, type, value, vspace, width, wrap, xmlns, onblur, onclick, ondblclick, ondrag, ondrop, onerror, onfocus, onfocusin, onfocusout, onhelp, oninput, onkeydown, onkeypress, onkeyup, onload, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpaste, onredo, onscroll, onsubmit, onundo
This is a more technical feature, but it has an incredible range of uses. Here are a few;
Use x-value = ( your value ) to initialize an INPUT, TEXTBOX, or SELECT element from a CMS collection item.
Use x-checked = ( boolean value ) to initialize a checkbox element.
Use x-type = date on an INPUT element to change it to a date type
As of 2024-Jun-03, Webflow does not yet support attribute binding to switch ( boolean ) field types or to select ( option ) field types. In a pinch you could use CMS text fields instead.
x-* attributesPlace on any Collection List directly ( not the Collection List Wrapper ). No value is needed.
Any attribute prefixed with x- will be processed into the same attribute-value, without the prefix.
e.g. x-value = foo will be applied as value = foo
When you use this feature with Webflow's CMS-bound attributes, you can initialize the input field's value from any CMS field you choose.
To assist with the use case of initializing form fields, we've added special handling exceptions for specific element types;
Just like an input element, you can use the x-value attribute to initialize the content of a Textarea.
In browsers, Textarea elements behave a bit differently than Input elements. You can initialize them with a value attribute before page load, but if the attribute is set later by script, that value will not be applied. We set the value property as well to ensure it's applied.
Use the x-checked attribute directly on the Checkbox element itself. We'll evaluate it as true or false, and set or remove the checked attribute accordingly.
Use the x-value attribute. We'll select the matching option, by value, if it exists.
Note that Select options have both a Name and a Value. It's the Value that is matched, not the Name. Ensure your Values are set correctly.
First, add the library as detailed in Quick Start.
x- prefixed custom attributes to any elementsSee above for details.
