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"
/>

PhoneInput

Type any format; the bound value is stored as E.164. Dependency-free — it normalises the shape only. Inject parse/format/validate (e.g. libphonenumber-js) for per-country behavior; we don't bundle a phone library.

<!-- type "(555) 123-4567" → value = "+15551234567" -->
<PhoneInput bind:value={phone} required />

// a dep-free national formatter (or a libphonenumber-backed one)
const usFormat = (e164) => {
  const m = /^\+1(\d{3})(\d{3})(\d{4})$/.exec(e164);
  return m ? `(${m[1]}) ${m[2]}-${m[3]}` : e164;
};

<PhoneInput bind:value={phone} format={usFormat} />

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"
/>

<!-- ± buttons + Arrow keys step; min>=0 auto-blocks the minus; clamp snaps into range -->
<NumberInput bind:value={qty} stepper clamp allowDecimals={false} min={1} max={99} step={1} />

<!-- Field shows 7.50%, value stores the fraction 0.075 -->
<NumberInput bind:value={rate} percent decimalPlaces={2} min={0} max={1} step={0.005} stepper />

<!-- groups thousands AS YOU TYPE (caret preserved), full format on blur -->
<NumberInput bind:value={amount} currency="$" decimalPlaces={2} thousandsSeparator liveFormat />

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
• Percent mode: Show 50%, store the fraction 0.5
• Stepper: ± buttons + Arrow-Up/Down (spinbutton a11y); clamp to min/max; allowNegative (auto-off when min ≥ 0)
• Live formatting: liveFormat groups as you type (caret-preserved)
• Smart validation: Position-aware keystroke filtering
• Consistent formatting: Maintains format during focus/blur (deferred, not while typing)