Skip to content

Input Component

A versatile and feature-rich input component with extensive customization options.

Overview

The Input component provides:

  • Comprehensive form input functionality
  • Floating label design
  • Prepend and append content areas
  • Built-in validation system
  • Support for various input types
  • Clear button option

When to Use

Use the Input component when you need to:

  • Collect user input in forms
  • Validate user input against rules
  • Create consistent form experiences
  • Customize input appearance with icons or actions

Key Features

  • Floating Label: Label animates when the input is focused or has content
  • Validation: Built-in validation system with customizable rules
  • Prepend/Append Areas: Add icons or actions before or after the input
  • Clear Button: Optional button to clear the input value
  • Password Toggle: Show/hide password content for password fields
  • Extensive Events: Comprehensive event system for all input interactions
  • Customizable: Extensive slot system for custom styling

API Reference →

View Code →