Specialized Input Components

Pre-built input components for common patterns with built-in functionality.

Variants

borderless

All four wrappers forward variant / size / borderless to their underlying Input.

Sizes

SearchInput

Input component with search icon and clear functionality.

Input

Value

<SearchInput 
  bind:value={searchValue}
  placeholder="Search with clear functionality..."
/>

EmailInput

Input component with email validation and envelope icon.

Input

Value

<EmailInput 
  bind:value={emailValue}
  placeholder="Email with validation"
  required={true}
/>

PasswordInput

Input component with automatic visibility toggle and eye icon.

Input

Value

<PasswordInput 
  bind:value={passwordValue}
  placeholder="Password with visibility toggle"
/>

NumberInput

Enhanced numeric input with formatting, validation, and internationalization support.

Input

Value

<NumberInput 
  bind:value={basicNumberValue}
  placeholder="Basic number input"
/>

<NumberInput 
  bind:value={priceValue}
  placeholder="USD Price"
  currency="$"
  decimalPlaces={2}
  thousandsSeparator={true}
  min={0}
/>

<NumberInput 
  bind:value={percentageValue}
  placeholder="Percentage"
  suffix="%"
  min={-100}
  max={100}
  decimalPlaces={1}
  negativeMode="both"
/>

<NumberInput 
  bind:value={integerValue}
  placeholder="Integer only"
  allowDecimals={false}
  min={1}
  max={1000}
/>

<NumberInput 
  bind:value={accountingValue}
  placeholder="Accounting format"
  currency="$"
  decimalPlaces={2}
  thousandsSeparator={true}
  negativeMode="parentheses"
/>

NumberInput Features:

• Currency support: Any currency symbol (prefix)
• Suffix support: For percentages or units
• International formatting: Custom decimal and thousands separators
• Negative modes: Minus sign, parentheses, or both
• Rounding modes: Round, floor, ceil, or truncate for integers
• Smart validation: Position-aware keystroke filtering
• Consistent formatting: Maintains format during focus/blur