BlueStack.io - Component Library

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

Preview Code

Copy

Name

<div class="field">
  <label class="label">Name</label>
  <input type="text" class="input" placeholder="Enter your name" />
</div>

Input with Hint Text

Preview Code

Copy

Username

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

<div class="field">
  <label class="label">Username</label>
  <input type="text" class="input" placeholder="Choose a username" />
  <div class="hint">Must be 3-20 characters, lowercase letters and numbers only</div>
</div>

Required Field

Preview Code

Copy

Email *

We'll never share your email

<div class="field">
  <label class="label">Email <span class="required">*</span></label>
  <input type="email" class="input email" placeholder="your@email.com" required />
  <div class="hint">We'll never share your email</div>
</div>

Error State

Preview Code

Copy

Email *

Please enter a valid email address

<div class="field error">
  <label class="label">Email <span class="required">*</span></label>
  <input type="email" class="input error" value="invalid.email" required />
  <div class="error-message">
    <svg class="w-3 h-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
      <path
        fill-rule="evenodd"
        d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
        clip-rule="evenodd"
      />
    </svg>
    Please enter a valid email address
  </div>
</div>

Input Sizes

All Size Variants

Preview Code

Copy

<div class="space-y-3">
  <input type="text" class="input tiny" placeholder="Tiny input (32px)" />
  <input type="text" class="input small" placeholder="Small input (36px)" />
  <input type="text" class="input" placeholder="Default input (40px)" />
  <input type="text" class="input large" placeholder="Large input" />
  <input type="text" class="input big" placeholder="Big input" />
</div>

Input Types

Email Input

Preview Code

Copy

<div class="field">
  <label class="label">Email</label>
  <div class="input-wrapper has-left-icon">
    <svg
      class="icon left w-5 h-5"
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke-width="1.5"
      stroke="currentColor"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"
      />
    </svg>
    <input type="email" class="input email" placeholder="your@email.com" />
  </div>
</div>

Phone Input

Preview Code

Copy

Phone

<div class="field">
  <label class="label">Phone</label>
  <div class="input-wrapper has-left-icon">
    <svg
      class="icon left w-5 h-5"
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke-width="1.5"
      stroke="currentColor"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z"
      />
    </svg>
    <input type="tel" class="input phone" placeholder="(555) 123-4567" />
  </div>
</div>

Password Input - Secure Entry with Visibility Toggle

Preview Code

Copy

Password *

Password will be hidden as you type

Confirm Password *

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:

Tiny Password

Small Password

Default Password

Large Password

Big Password

<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
  <div class="field">
    <label class="label">
      <span>Password</span>
      <span class="required">*</span>
    </label>
    <div class="input-wrapper">
      <input type="password" class="input password" placeholder="Enter password" />
    </div>
    <div class="hint">
      <svg
        class="w-3 h-3 inline"
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"
        />
      </svg>
      Password will be hidden as you type
    </div>
  </div>

  <div class="field">
    <label class="label">
      <span>Confirm Password</span>
      <span class="required">*</span>
    </label>
    <div class="input-wrapper">
      <input type="password" class="input password" placeholder="Confirm password" />
    </div>
    <div class="hint">
      <svg
        class="w-3 h-3 inline"
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
        />
      </svg>
      Must match the password above
    </div>
  </div>
</div>

<div class="mt-4 p-4 bg-gray-50 border border-gray-200 rounded-lg">
  <h4 class="text-sm font-semibold text-gray-700 mb-2">Password Requirements:</h4>
  <ul class="text-sm text-gray-600 space-y-1">
    <li class="flex items-center gap-2">
      <svg
        class="w-4 h-4 text-gray-400"
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
        />
      </svg>
      At least 8 characters long
    </li>
    <li class="flex items-center gap-2">
      <svg
        class="w-4 h-4 text-gray-400"
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
        />
      </svg>
      Contains uppercase and lowercase letters
    </li>
    <li class="flex items-center gap-2">
      <svg
        class="w-4 h-4 text-gray-400"
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
        />
      </svg>
      Includes at least one number
    </li>
    <li class="flex items-center gap-2">
      <svg
        class="w-4 h-4 text-gray-400"
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
        />
      </svg>
      Contains a special character (!@#$%^&*)
    </li>
  </ul>
</div>

<div class="mt-4">
  <h4 class="text-sm font-semibold text-gray-700 mb-3">Size Variants:</h4>
  <div class="space-y-3">
    <div class="field">
      <label class="label text-xs">Tiny Password</label>
      <div class="input-wrapper">
        <input type="password" class="input password tiny" placeholder="Tiny size" />
      </div>
    </div>

    <div class="field">
      <label class="label text-sm">Small Password</label>
      <div class="input-wrapper">
        <input type="password" class="input password small" placeholder="Small size" />
      </div>
    </div>

    <div class="field">
      <label class="label">Default Password</label>
      <div class="input-wrapper">
        <input type="password" class="input password" placeholder="Default size" />
      </div>
    </div>

    <div class="field">
      <label class="label text-base">Large Password</label>
      <div class="input-wrapper">
        <input type="password" class="input password large" placeholder="Large size" />
      </div>
    </div>

    <div class="field">
      <label class="label text-lg">Big Password</label>
      <div class="input-wrapper">
        <input type="password" class="input password big" placeholder="Big size" />
      </div>
    </div>
  </div>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                
                <div class="field">
                    <label class="label">
                        <span>Password</span>
                        <span class="required">*</span>
                    </label>
                    <div class="input-wrapper">
                        <input type="password" class="input password" placeholder="Enter password">
                    </div>
                    <div class="hint">
                        <svg class="w-3 h-3 inline" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
                        </svg>
                        Password will be hidden as you type
                    </div>
                </div>

<div class="field">
                    <label class="label">
                        <span>Confirm Password</span>
                        <span class="required">*</span>
                    </label>
                    <div class="input-wrapper">
                        <input type="password" class="input password" placeholder="Confirm password">
                    </div>
                    <div class="hint">
                        <svg class="w-3 h-3 inline" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        Must match the password above
                    </div>
                </div>
            </div>

<div class="mt-4 p-4 bg-gray-50 border border-gray-200 rounded-lg">
                <h4 class="text-sm font-semibold text-gray-700 mb-2">Password Requirements:</h4>
                <ul class="text-sm text-gray-600 space-y-1">
                    <li class="flex items-center gap-2">
                        <svg class="w-4 h-4 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        At least 8 characters long
                    </li>
                    <li class="flex items-center gap-2">
                        <svg class="w-4 h-4 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        Contains uppercase and lowercase letters
                    </li>
                    <li class="flex items-center gap-2">
                        <svg class="w-4 h-4 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        Includes at least one number
                    </li>
                    <li class="flex items-center gap-2">
                        <svg class="w-4 h-4 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        Contains a special character (!@#$%^&*)
                    </li>
                </ul>
            </div>

<div class="mt-4">
                <h4 class="text-sm font-semibold text-gray-700 mb-3">Size Variants:</h4>
                <div class="space-y-3">
                    <div class="field">
                        <label class="label text-xs">Tiny Password</label>
                        <div class="input-wrapper">
                            <input type="password" class="input password tiny" placeholder="Tiny size">
                        </div>
                    </div>

<div class="field">
                        <label class="label text-sm">Small Password</label>
                        <div class="input-wrapper">
                            <input type="password" class="input password small" placeholder="Small size">
                        </div>
                    </div>

<div class="field">
                        <label class="label">Default Password</label>
                        <div class="input-wrapper">
                            <input type="password" class="input password" placeholder="Default size">
                        </div>
                    </div>

<div class="field">
                        <label class="label text-base">Large Password</label>
                        <div class="input-wrapper">
                            <input type="password" class="input password large" placeholder="Large size">
                        </div>
                    </div>

<div class="field">
                        <label class="label text-lg">Big Password</label>
                        <div class="input-wrapper">
                            <input type="password" class="input password big" placeholder="Big size">
                        </div>
                    </div>
                </div>
            </div>

Search Input

Preview Code

Copy

<div class="field">
  <label class="label">Search</label>
  <div class="input-wrapper has-left-icon">
    <svg
      class="icon left w-5 h-5"
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke-width="1.5"
      stroke="currentColor"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
      />
    </svg>
    <input type="search" class="input search" placeholder="Search..." />
  </div>
</div>

Website Input

Preview Code

Copy

Website

<div class="field">
  <label class="label">Website</label>
  <div class="input-wrapper has-left-icon">
    <svg
      class="icon left w-5 h-5"
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke-width="1.5"
      stroke="currentColor"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418"
      />
    </svg>
    <input type="url" class="input website" placeholder="https://example.com" />
  </div>
</div>

Credit Card Input

Preview Code

Copy

Credit Card

<div class="field">
  <label class="label">Credit Card</label>
  <div class="input-wrapper">
    <input type="text" class="input card" placeholder="1234 5678 9012 3456" maxlength="19" />
  </div>
</div>

Amount Input

Preview Code

Copy

Amount

<div class="field">
  <label class="label">Amount</label>
  <div class="input-wrapper has-left-icon">
    <span class="icon left">$</span>
    <input type="text" class="input amount" placeholder="0.00" />
  </div>
</div>

Date Input

Preview Code

Copy

Date

<div class="field">
  <label class="label">Date</label>
  <div class="input-wrapper has-left-icon">
    <svg
      class="icon left w-5 h-5"
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke-width="1.5"
      stroke="currentColor"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5"
      />
    </svg>
    <input type="text" class="input date" placeholder="MM/DD/YYYY" />
  </div>
</div>

Input States

Different States

Preview Code

Copy

<div class="space-y-3">
  <input type="text" class="input" placeholder="Normal state" />
  <input type="text" class="input" placeholder="Disabled state" disabled />
  <input type="text" class="input" value="Read-only content" readonly />
  <input type="text" class="input loading" placeholder="Loading..." />
</div>

Container Inheritance

Fields with Size Inheritance

Preview Code

Copy

First Name

Last Name

All inputs inherit 'small' size from the container

<div class="fields small space-y-3">
  <div class="field">
    <label class="label">First Name</label>
    <input type="text" class="input" placeholder="John" />
  </div>
  <div class="field">
    <label class="label">Last Name</label>
    <input type="text" class="input" placeholder="Doe" />
  </div>
  <div class="field">
    <label class="label">Email</label>
    <input type="email" class="input" placeholder="john.doe@example.com" />
  </div>
</div>
<p class="text-sm text-gray-500 mt-2">All inputs inherit 'small' size from the container</p>

Input Addons

Left Addon

Preview Code

Copy

Price

<div class="field">
  <label class="label">Price</label>
  <div class="input-addon">
    <span class="addon left">$</span>
    <input type="text" class="input" placeholder="0.00" />
  </div>
</div>

Right Addon

Preview Code

Copy

Weight

<div class="field">
  <label class="label">Weight</label>
  <div class="input-addon">
    <input type="text" class="input" placeholder="0" />
    <span class="addon right">kg</span>
  </div>
</div>

Both Addons

Preview Code

Copy

Website

https:// .com

<div class="field">
  <label class="label">Website</label>
  <div class="input-addon">
    <span class="addon left">https://</span>
    <input type="text" class="input" placeholder="example" />
    <span class="addon right">.com</span>
  </div>
</div>

Input with Button

Email Subscribe

Preview Code

Copy

<div class="field">
  <label class="label">Subscribe</label>
  <div class="input-group">
    <input type="email" class="input" placeholder="Enter your email" />
    <button class="button primary">Subscribe</button>
  </div>
</div>

Search with Button

Preview Code

Copy

<div class="field">
  <label class="label">Search</label>
  <div class="input-group">
    <input type="text" class="input" placeholder="Search products..." />
    <button class="button">
      <svg
        class="w-5 h-5"
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
        />
      </svg>
    </button>
  </div>
</div>

Textarea

Basic Textarea

Preview Code

Copy

Message

Maximum 500 characters

<div class="field">
  <label class="label">Message</label>
  <textarea class="input" placeholder="Enter your message..." rows="4"></textarea>
  <div class="hint">Maximum 500 characters</div>
</div>

Small Textarea

Preview Code

Copy

Notes

<div class="field">
  <label class="label">Notes</label>
  <textarea class="input small" placeholder="Add notes..." rows="3"></textarea>
</div>

Inline Layout

Inline Field Examples

Preview Code

Copy

Name

Phone

<div class="space-y-3">
  <div class="field inline">
    <label class="label">Name</label>
    <div class="input-wrapper">
      <input type="text" class="input" placeholder="Enter name" />
    </div>
  </div>

  <div class="field inline">
    <label class="label">Email</label>
    <div class="input-wrapper">
      <input type="email" class="input" placeholder="Enter email" />
    </div>
  </div>

  <div class="field inline">
    <label class="label">Phone</label>
    <div class="input-wrapper">
      <input type="tel" class="input" placeholder="Enter phone" />
    </div>
  </div>
</div>

Focus Color States

Color Focus Rings

Preview Code

Copy

<div class="space-y-3">
  <input type="text" class="input primary" placeholder="Primary focus (blue)" />
  <input type="text" class="input positive" placeholder="Positive focus (green)" />
  <input type="text" class="input negative" placeholder="Negative focus (red)" />
  <input type="text" class="input warning" placeholder="Warning focus (yellow)" />
</div>

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)