text-input Component

Text Input Class API Reference

Type Class Options Usage Notes
Base input Required base class for inputs Always required
field Container for label + input + hint Wraps entire input structure
input-wrapper Container for input with icons Use when adding icons
Sizes tiny 32px height Modifier to input
small 36px height Modifier to input
default 40px height No class needed
large 44px height Modifier to input
big 48px height Modifier to input
Input Types email Email with validation Auto-validates on blur
phone Phone with formatting (555) 123-4567
password Password with toggle Show/hide button
search Search with icon Magnifying glass
website URL input Auto-prefixes https://
card Credit card 1234 5678 9012 3456
amount Currency amount 0.00 formatting
date Date input MM/DD/YYYY
dropdown Select dropdown With chevron icon
loading Loading state Animated background
States error Error state Red border & message
disabled Disabled state HTML attribute
readonly Read-only state HTML attribute
Layout inline Inline field layout Label beside input
floating Floating label Label animates up
fields Container for multiple fields Inherits size/color
Focus Colors primary Blue focus ring Modifier to input
positive Green focus ring Modifier to input
negative Red focus ring Modifier to input
warning Yellow focus ring Modifier to input

Basic Input Fields

Basic Text Input

Input with Hint Text

Must be 3-20 characters, lowercase letters and numbers only

Required Field

We'll never share your email

Error State

Please enter a valid email address

Input Sizes

All Size Variants

Input Types

Email Input

Phone Input

Password Input - Secure Entry with Visibility Toggle

Password will be hidden as you type
Must match the password above

Password Requirements:

  • At least 8 characters long
  • Contains uppercase and lowercase letters
  • Includes at least one number
  • Contains a special character (!@#$%^&*)

Size Variants:

Search Input

Website Input

Credit Card Input

Amount Input

$

Date Input

Input States

Different States

Container Inheritance

Fields with Size Inheritance

All inputs inherit 'small' size from the container

Input Addons

Left Addon

$

Right Addon

kg

Both Addons

https:// .com

Input with Button

Email Subscribe

Search with Button

Textarea

Basic Textarea

Maximum 500 characters

Small Textarea

Inline Layout

Inline Field Examples

Focus Color States

Color Focus Rings

Enhanced Features

✨ JavaScript Enhancements

  • • Password visibility toggle automatically added
  • • Phone number formatting: (555) 123-4567
  • • Credit card formatting: 1234 5678 9012 3456
  • • Date formatting: MM/DD/YYYY
  • • Amount formatting: 0.00
  • • Email validation on blur
  • • URL validation and auto-prefixing
  • • Clear button on text inputs (when typing)
  • • Card type detection (Visa, Mastercard, Amex)