fs-inputactive

Set custom active CSS classes for Webflow form elements

Overview

The fs-inputactive attribute automatically adds and removes CSS classes on form input elements based on their active state. This enables custom styling for focused, filled, or active form fields.

Attribute Syntax

The attribute uses the following syntax:

fs-inputactive-activeclass="[class-name]"

Settings

activeclass

Defines a custom active class to be added to input elements when they are active (focused or have a value).

Default value: is-inputactive-active

<input 
  type="text" 
  fs-inputactive-activeclass="field-active"
>

Usage Examples

Basic Usage

<!-- Using default class -->
<input type="text" name="email">

<!-- The attribute automatically adds 'is-inputactive-active' -->
<!-- when the field is focused or has a value -->

How It Works

The input active attribute:

1. Monitors all inputs on the page for changes
2. Detects focus and value changes on input fields
3. Adds the class when an input is active (has focus or contains a value)
4. Removes the class when an input becomes inactive (loses focus and is empty)
5. Works globally - no need to specify individual inputs

CSS Styling Examples

Default Class

/* Style inputs with the default active class */
input.is-inputactive-active {
  border-color: #0066ff;
  box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.1);
}

input.is-inputactive-active + label {
  color: #0066ff;
  font-weight: 600;
}

Use Cases

• Floating labels that move when an input has a value
• Visual feedback for form field states
• Custom focus styles beyond CSS :focus
• Persistent styling for filled inputs
• Parent element styling based on input state

This attribute works on all input types, including text, email, password, number, and more. The active state is determined by whether the input has focus or contains a value.

The attribute initializes on page load and automatically monitors all inputs, so you don’t need to add attributes to individual input elements unless you want to customize the class name.