Input Components

Input components provide form controls with built-in validation, accessibility features, and consistent styling.

The SDK is still in it's early stages. A lot of breaking changes will potentially be introduced as development progresses

TextInput

General purpose text input with comprehensive validation options.

Web Component Usage

<alviere-text-input
  label="Full Name"
  placeholder="Enter your full name"
  required
  validation-schema='{"alphabetic": true, "minLength": 2, "maxLength": 100}'
  help-text="Enter your legal name as it appears on official documents">
</alviere-text-input>

Svelte Component Usage

<script>
  import { TextInput } from '@alviere/ui-svelte';
</script>

<TextInput
  label="Full Name"
  placeholder="Enter your full name"
  required
  validationSchema={{ alphabetic: true, minLength: 2, maxLength: 100 }}
  help-text="Enter your legal name as it appears on official documents"
  on:change={(event) => console.log('Value:', event.detail.value)}
/>

Props

Prop	Type	Default	Description
`label`	`string`	`''`	Input label
`placeholder`	`string`	`''`	Placeholder text
`required`	`boolean`	`false`	Whether field is required
`disabled`	`boolean`	`false`	Disable input
`readonly`	`boolean`	`false`	Make input readonly
`help-text`	`string`	`''`	Help text below input
`error-message`	`string`	`''`	Custom error message
`validationState`	`ValidationState`	`neutral`	Current validation state of the field
`validationSchema`	`ValidationSchema`	`{}`	The schema used to validate the field

Validation Props

Deprecated: The individual validation props (validateEmail, validatePhone, validateUrl, etc.) are deprecated and will be removed in a future version. Please use the validationSchema prop with the ValidationSchema type instead. See the Validation Types section for more information.

Prop	Type	Description	Deprecated
`validateEmail`	`boolean`	Email validation	Use `validationSchema={{ email: true }}`
`validatePhone`	`boolean`	Phone number validation	Use `validationSchema={{ phone: true }}`
`validateUrl`	`boolean`	URL validation	Use `validationSchema={{ url: true }}`
`validateNumeric`	`boolean`	Numeric validation	Use `validationSchema={{ numeric: true }}`
`validateAlphabetic`	`boolean`	Alphabetic validation	Use `validationSchema={{ alphabetic: true }}`
`validateAlphanumeric`	`boolean`	Alphanumeric validation	Use `validationSchema={{ alphanumeric: true }}`
`validatePattern`	`string`	Custom regex pattern	Use `validationSchema={{ pattern: 'regex' }}`
`validatePostalCode`	`string`	Postal code validation (country code)	Use `validationSchema={{ postalCode: 'country' }}`
`validateMinLength`	`number`	Minimum length validation	Use `validationSchema={{ minLength: number }}`
`validateMaxLength`	`number`	Maximum length validation	Use `validationSchema={{ maxLength: number }}`

Events

Event	Payload	Description
`change`	`{ value: string, isValid: boolean }`	Fired when value changes
`input`	`{ value: string }`	Fired on input
`focus`	`FocusEvent`	Fired on focus
`blur`	`FocusEvent`	Fired on blur

Features

Comprehensive Validation: Supports ValidationSchema for flexible validation rules
Real-time Feedback: Immediate validation feedback with ValidationState
Accessibility: Full ARIA support and keyboard navigation
Customizable: Extensive styling and behavior options

CurrencyInput

Currency input component for monetary values with formatting and validation support.

Web Component Usage

<alviere-currency-input
  label="Amount"
  placeholder="0.00"
  value="100.00"
  validation-state="neutral"
  validation-schema='{"required": true, "min": 0}'>
</alviere-currency-input>

Svelte Component Usage

<script>
  import { CurrencyInput } from '@alviere/ui-svelte';
</script>

<CurrencyInput
  label="Amount"
  placeholder="0.00"
  value="100.00"
  validationState="neutral"
  validationSchema={{ required: true, min: 0 }}
  on:change={(event) => console.log('Value:', event.detail.value)}
/>

Props

Prop	Type	Default	Description
`label`	`string`	`Amount`	Input label
`placeholder`	`string`	`'0.00'`	Placeholder text
`value`	`string`	`''`	Current input value
`required`	`boolean`	`false`	Whether field is required
`disabled`	`boolean`	`false`	Disable input
`readonly`	`boolean`	`false`	Make input readonly
`help-text`	`string`	`''`	Help text below input
`error-message`	`string`	`''`	Custom error message
`validationState`	`ValidationState`	`neutral`	Current validation state of the field
`validationSchema`	`ValidationSchema`	`{}`	The schema used to validate the field

Events

Event	Payload	Description
`change`	`{ value: string, isValid: boolean }`	Fired when value changes
`input`	`{ value: string }`	Fired on input
`focus`	`FocusEvent`	Fired on focus
`blur`	`FocusEvent`	Fired on blur

Features

Currency Formatting: Automatic formatting for monetary values
Validation Support: Supports ValidationSchema for flexible validation rules
Real-time Feedback: Immediate validation feedback with ValidationState
Accessibility: Full ARIA support and keyboard navigation
Customizable: Extensive styling and behavior options

PhoneInput

Phone number input with international format support.

Validation Support: PhoneInput uses the same validation engine as other input components and supports validationState and validationSchema props. Phone number validation is applied implicitly based on the field type, but you can extend it with additional validation rules using validationSchema. See the Validation Types section for more information.

Web Component Usage

<alviere-phone-input
  label="Phone Number"
  placeholder="+1 202 647 4000"
  required>
</alviere-phone-input>

Svelte Component Usage

<script>
  import { PhoneInput } from '@alviere/ui-svelte';
</script>

<PhoneInput
  label="Phone Number"
  placeholder="+1 202 647 4000"
  required
/>

Props

Prop	Type	Default	Description
`label`	`string`	`'Phone Number'`	Input label
`placeholder`	`string`	`'+1 202 647 4000'`	Placeholder text
`required`	`boolean`	`false`	Whether field is required
`disabled`	`boolean`	`false`	Disable input
`readonly`	`boolean`	`false`	Make input readonly
`help-text`	`string`	`''`	Help text below input
`error-message`	`string`	`''`	Custom error message
`validationState`	`ValidationState`	`neutral`	Current validation state of the field
`validationSchema`	`ValidationSchema`	`{}`	The schema used to validate the field (phone validation is implicit)

Features

International Support: Handles various phone number formats
Format Validation: Ensures valid phone number structure
Country Code Support: Accepts international dialing codes

DateOfBirthInput

Date of birth input with validation.

Validation Support: DateOfBirthInput uses the same validation engine as other input components and supports validationState and validationSchema props. Date validation is applied implicitly based on the field type, but you can extend it with additional validation rules using validationSchema (e.g., minLength, maxLength for age restrictions). See the Validation Types section for more information.

Web Component Usage

<alviere-date-of-birth-input
  label="Date of Birth"
  placeholder="YYYY-MM-DD"
  required>
</alviere-date-of-birth-input>

Svelte Component Usage

<script>
  import { DateOfBirthInput } from '@alviere/ui-svelte';
</script>

<DateOfBirthInput
  label="Date of Birth"
  placeholder="YYYY-MM-DD"
  required
/>

Props

Prop	Type	Default	Description
`label`	`string`	`'Date of Birth'`	Input label
`placeholder`	`string`	`'YYYY-MM-DD'`	Placeholder text
`required`	`boolean`	`false`	Whether field is required
`disabled`	`boolean`	`false`	Disable input
`readonly`	`boolean`	`false`	Make input readonly
`help-text`	`string`	`''`	Help text below input
`error-message`	`string`	`''`	Custom error message
`validationState`	`ValidationState`	`neutral`	Current validation state of the field
`validationSchema`	`ValidationSchema`	`{}`	The schema used to validate the field (date validation is implicit)

Features

Auto-formatting: Automatically adds date separators
Date Validation: Ensures valid date format
Age Restrictions: Can validate minimum/maximum age requirements
ISO Format: Uses standard YYYY-MM-DD format

SearchSelect

Searchable dropdown select component.

Validation Support: SearchSelect uses the same validation engine as other input components and supports validationState and validationSchema props. Validation is typically used for required field checks (ensuring a value is selected from the options), but you can extend it with additional validation rules using validationSchema. See the Validation Types section for more information.

Web Component Usage

<alviere-search-select
  label="Country"
  options='[{"label":"USA","value":"USA"},{"label":"Canada","value":"CAN"}]'
  placeholder="Search countries..."
  required>
</alviere-search-select>

Svelte Component Usage

<script>
  import { SearchSelect } from '@alviere/ui-svelte';
  
  const countries = [
    { label: 'USA', value: 'USA' },
    { label: 'Canada', value: 'CAN' },
    { label: 'Mexico', value: 'MEX' }
  ];
</script>

<SearchSelect
  label="Country"
  options={countries}
  placeholder="Search countries..."
  required
  on:change={(event) => console.log('Selected:', event.detail.value)}
/>

Props

Prop	Type	Default	Description
`label`	`string`	`''`	Select label
`options`	`Array<{label: string, value: any}>`	`[]`	Available options
`placeholder`	`string`	`'Search...'`	Placeholder text
`required`	`boolean`	`false`	Whether field is required
`disabled`	`boolean`	`false`	Disable select
`readonly`	`boolean`	`false`	Make select readonly
`help-text`	`string`	`''`	Help text below select
`error-message`	`string`	`''`	Custom error message
`validationState`	`ValidationState`	`neutral`	Current validation state of the field
`validationSchema`	`ValidationSchema`	`{}`	The schema used to validate the field

Events

Event	Payload	Description
`change`	`{ value: any, label: string }`	Fired when selection changes
`search`	`{ query: string }`	Fired when search query changes
`focus`	`FocusEvent`	Fired on focus
`blur`	`FocusEvent`	Fired on blur

Features

Search Functionality: Real-time search through options
Keyboard Navigation: Full keyboard support
Custom Options: Flexible option structure
Accessibility: Full ARIA support for screen readers
Responsive: Works on all device sizes

Validation Types

ValidationState

The ValidationState type represents the current validation state of an input field.

Type Definition

type ValidationState = 'neutral' | 'valid' | 'invalid';

Values

Value	Description
`neutral`	Default state before user interaction or validation
`valid`	Field has passed validation
`invalid`	Field has failed validation

Usage

// Web Component
<alviere-currency-input
  validation-state="valid"
  value="100.00">
</alviere-currency-input>

// Svelte Component
<CurrencyInput
  validationState="invalid"
  value="abc"
/>

ValidationSchema

The ValidationSchema type defines a set of validation rules that can be applied to an input field.

Type Definition

type ValidationSchema = {
  required?: boolean;
  min?: number;
  max?: number;
  minLength?: number;
  maxLength?: number;
  pattern?: string | RegExp;
  email?: boolean;
  phone?: boolean;
  url?: boolean;
  numeric?: boolean;
  alphabetic?: boolean;
  alphanumeric?: boolean;
  postalCode?: string;
  custom?: (value: string) => boolean | string;
};

Properties

Property	Type	Description
`required`	`boolean`	Whether the field is required
`min`	`number`	Minimum numeric value (for numeric inputs)
`max`	`number`	Maximum numeric value (for numeric inputs)
`minLength`	`number`	Minimum string length
`maxLength`	`number`	Maximum string length
`pattern`	`string \| RegExp`	Custom regex pattern for validation
`email`	`boolean`	Validate as email address
`phone`	`boolean`	Validate as phone number
`url`	`boolean`	Validate as URL
`numeric`	`boolean`	Validate as numeric value
`alphabetic`	`boolean`	Validate as alphabetic characters only
`alphanumeric`	`boolean`	Validate as alphanumeric characters only
`postalCode`	`string`	Validate postal code for specific country
`custom`	`(value: string) => boolean \| string`	Custom validation function. Returns `true` if valid, `false` or error message string if invalid

Usage

// Web Component
<alviere-currency-input
  validation-schema='{"required": true, "min": 0, "max": 10000}'
  value="100.00">
</alviere-currency-input>

// Svelte Component
<CurrencyInput
  validationSchema={{
    required: true,
    min: 0,
    max: 10000,
    custom: (value) => {
      const num = parseFloat(value);
      return num > 0 && num <= 10000 || 'Amount must be between 0 and 10000';
    }
  }}
  value="100.00"
/>

Common Input Features

All input components share these common features:

Validation States

Valid: Green border and checkmark when validation passes
Invalid: Red border and error message when validation fails
Neutral: Default state before interaction

Accessibility

ARIA Labels: Proper labeling for screen readers
Keyboard Navigation: Full keyboard support
Focus Management: Clear focus indicators
Error Announcements: Screen reader announcements for errors

Styling

CSS Custom Properties: Easily customizable with CSS variables
Responsive Design: Works on all screen sizes
Consistent Theming: Unified look across all components
Dark Mode Support: Compatible with dark themes

Event Handling

Standard Events: All standard HTML input events
Custom Events: Component-specific events with detailed payloads
Validation Events: Events for validation state changes