Step #2
Implement in Webflow
Apply attributes to elements on the page
Below is a list of elements and options that are used to create this Attributes functionality. Click any of them to see more details.
Input Active works without custom attributes
Input Active applies an active class to an input when it is active.
By default the active class is-active-inputactive. To use this active class name, no attributes are required. Input Active works without any attributes applied to the page.
To customize the custom class, use the option below.
Add this attribute
Description
Name
fs-inputactive-class
Value
is-active-inputactive
Optionally change the default class name applied to active inputs.
This class will be added to the input when the input is active. The class will be removed when the input is not active.
If this attribute is not added, the default active class is is-active-inputactive.
This attribute option works similar to CSS style inheriting. Active classes cascade down until overwritten. Children elements inherit the fs-inputactive-class attribute their of parents.
For example, if this attribute is placed on a Div Block wrapping a group of Checkbox Field elements, the Checkbox Fields will inherit the class set on the parent Div Block.
If one of the Checkbox Field elements was given a different fs-inputactive-class, that one Checkbox Field will overwrite the inherited class of the parent.
This class will be added to the input when the input is active. The class will be removed when the input is not active.
If this attribute is not added, the default active class is is-active-inputactive.
This attribute option works similar to CSS style inheriting. Active classes cascade down until overwritten. Children elements inherit the fs-inputactive-class attribute their of parents.
For example, if this attribute is placed on a Div Block wrapping a group of Checkbox Field elements, the Checkbox Fields will inherit the class set on the parent Div Block.
If one of the Checkbox Field elements was given a different fs-inputactive-class, that one Checkbox Field will overwrite the inherited class of the parent.
Where?
Add to any Radio Field or Checkbox Field.
Working examples
See this solution working live in this Webflow project.
Example
Checkbox 1 - With Checkbox
Example
Checkbox 2 - Button Style
Example
Radio 1 - With Radio
Developer documentation
Check the dev documentation
Next time implement inside Webflow
Use Finsweet Extension
