Input

The Input component is a versatile form control that supports validation, floating labels, input masking, and icon integration. It's built with accessibility in mind and follows modern web best practices.

Examples

Basic Usage

Username

<Input label="Username" placeholder="Enter username" />

With Icons

Password

<Input
  label="Password"
  type="password"
  leftIcon="lock"
  rightIcon="eye"
  placeholder="Enter password"
/>

Floating Label

<Input
  label="Email"
  type="email"
  floating={true}
  placeholder="Enter email"
/>

Validation and Error States

Email *

<Input
  label="Email"
  type="email"
  value="invalid-email"
  error="Please enter a valid email address"
  required
/>

Input Masking

Phone

<Input
  label="Phone"
  type="tel"
  mask="(###) ###-####"
  placeholder="(555) 555-5555"
/>

Props

Prop	Type	Default	Description
`label`	`string`	Required	Label text for the input
`type`	`string`	`text`	HTML input type (text, email, password, etc.)
`value`	`string`	`""`	Input value
`placeholder`	`string`	`""`	Placeholder text
`name`	`string`	`""`	Name attribute for the input
`id`	`string`	`auto`	Unique identifier for the input
`disabled`	`boolean`	`false`	Whether the input is disabled
`required`	`boolean`	`false`	Whether the input is required
`floating`	`boolean`	`false`	Whether to use floating labels
`readonly`	`boolean`	`false`	Whether the input is readonly
`error`	`string`	`""`	Error message to display
`helpText`	`string`	`""`	Help text to display below input
`leftIcon`	`string`	`""`	Name of icon to display on the left
`rightIcon`	`string`	`""`	Name of icon to display on the right
`class`	`string`	`""`	Additional CSS classes
`mask`	`string`	`""`	Input mask pattern (# for numbers, A for letters, * for any)

Events

Event	Detail Type	Description
`oninput`	`{ value: string }`	Fired when input value changes
`onfocus`	`void`	Fired when input gains focus
`onblur`	`void`	Fired when input loses focus
`onleftIconClick`	`void`	Fired when left icon is clicked
`onrightIconClick`	`void`	Fired when right icon is clicked

Accessibility

The Input component follows WAI-ARIA guidelines for form fields:

Labels are properly associated with inputs using for attributes
Required fields are marked with both visual and ARIA indicators
Error messages are linked to inputs using aria-describedby
Invalid states are indicated with aria-invalid
Icons are properly hidden from screen readers when decorative

Input Masking

The mask pattern uses the following special characters:

# - Matches a number (0-9)
A - Matches a letter (a-z, A-Z)
* - Matches any character
Any other character is treated as a literal

Example patterns:

Phone: (###) ###-####
Date: ##/##/####
Credit Card: #### #### #### ####
Serial Number: AA-##-**