Overview
We present to you a modern and stylish input: the Floating Label Input.
When you focus this input or when its value changes, the label within it undergoes a slight animation, moving it to the top, parallel to the top border of the input. This avoids the use of text elements as labels and improves the user experience (UX).
Key Features
- Animated Floating Label: The label smoothly transitions to the top when the input is focused or has a value
- Color-Coded Validation: Define two colors - one for success and one for error. The appropriate color is applied based on the input's validity
- Multiple Content Types: Supports Text, Email, Password, Integer, Decimal, Date, Euro date, and Brazilian CPF
- Automatic Validation: For email, date, and Brazilian CPF types, the plugin automatically validates the content
- Exposed States: The "valid" state changes to "yes" or "no" based on validation results
- Events: Triggers the "Input Changed" event whenever the input value is modified
- Actions: Access the "Set Focus" action to programmatically focus on the desired input
How It Works
Validation Logic
You define the content type as Text, Email, Password, Integer, Decimal, Date, Euro date, or Brazilian CPF.
If the content type is email, date, or Brazilian CPF, the plugin will check if the content is valid. If yes, it changes the exposed state "valid" to "yes". If not, it changes to "no".
Color System
When the input is changed, focused, or when the value is valid, the success color is applied. When the value is invalid, the error color is applied.
Usage Instructions
It's very simple to use: