How to add an attribute:

close icon
Hey! Give us some feedback here.
NEW

Input Active

Apply an active class when an input element is active.

Input Active
Step #1

Copy the Solution <script> and paste into the <head> of your page

copy icon
Copy Script
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.

navigator arrow

Option

Active class
The option to change the default active class.
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-inputactive-class
copy icon
Value
is-active-inputactive
copy icon
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.
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
Copy and paste this example inside Webflow Libraries
Go to Accessible Components Library
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Example
Checkbox 2 - Button Style
Copy and paste this example inside Webflow Libraries
Go to Accessible Components Library
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Example
Radio 1 - With Radio
Copy and paste this example inside Webflow Libraries
Go to Accessible Components Library
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Example
Radio 2 - Button Style
Copy and paste this example inside Webflow Libraries
Go to Accessible Components Library
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Developer documentation

external link icon

Next time implement inside Webflow

external link icon
Subscribe

Sign up for future releases!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.