Forms

TextInput

An enhanced, fully accessible text input with input masking, validation states, clearable button, password toggle, prefix/suffix support, and debounce. Essential for patient data entry in healthcare applications.

Basic Usage

Standard text inputs with labels for patient information forms.

Patient Name

Email Address

Input Masking

Format input as users type with built-in mask presets for healthcare data. Use INPUT_MASKS constants for common patterns.

Phone Number

Date of Birth

Social Security Number

ZIP Code

NPI Lookup with Debounce

Combine debounce with loading state for async validation like NPI registry lookups.

National Provider Identifier (NPI)

Try entering an NPI starting with "1" for a valid response, or any other digit for an error.

Clearable Input

Add a clear button for search fields and inputs that users frequently need to reset.

Search Patients

Member ID

Password with Toggle

Allow users to toggle password visibility for easier entry while maintaining security.

Password

Prefix & Suffix

Add static text before or after the input for currency, domains, or units. Prefix/suffix are displayed inside the input container for a clean, unified look.

Copay Amount

Practice Website

Weight

Sizes

Choose appropriate sizes based on form density and importance.

Small Input

Medium Input

Large Input

Character Count

Use for fields with length limits like clinical notes or descriptions.

Chief Complaint

Disabled & Read-only

Use disabled for unavailable fields and read-only for view-only data.

Medical Record Number

Previous Provider

Props

Prop	Type	Default	Description
`label` *	`string`	—	Input label text
`value`	`string`	''	Current input value (bindable)
`type`	`'text' \| 'email' \| 'password' \| 'tel' \| 'url' \| 'search' \| 'number'`	'text'	Input type
`error`	`string`	—	Error message to display (shows red border and error icon)
`successMessage`	`string`	—	Success message when valid (shows green border and check icon)
`hint`	`string`	—	Helper text shown on focus
`required`	`boolean`	false	Marks field as required
`disabled`	`boolean`	false	Disables the input
`readonly`	`boolean`	false	Makes input read-only
`maxLength`	`number`	—	Maximum character length
`showCharCount`	`boolean`	false	Shows character counter
`iconLeft`	`Snippet`	—	Left icon slot
`iconRight`	`Snippet`	—	Right icon slot (when not showing status)
`size`	`'sm' \| 'md' \| 'lg'`	'md'	Input size
`validateOnMount`	`boolean`	false	Show validation state immediately
`mask`	`string`	—	Input mask pattern (# for digits, A for letters, * for alphanumeric)
`maskPlaceholder`	`string`	—	Character to show for unfilled mask positions
`maskIncludeLiterals`	`boolean`	false	Include mask literals in value
`clearable`	`boolean`	false	Show clear button when has value
`showPasswordToggle`	`boolean`	false	Show password visibility toggle
`prefix`	`string`	—	Static text before input
`suffix`	`string`	—	Static text after input
`loading`	`boolean`	false	Show loading spinner
`debounce`	`number`	—	Debounce delay for oninput (ms)
`ondebounce`	`(value: string) => void`	—	Called with debounced value
`onclear`	`() => void`	—	Called when clear button is clicked

Available Mask Presets

Constant	Pattern	Example Output
`INPUT_MASKS.PHONE_US`	(###) ###-####	(555) 123-4567
`INPUT_MASKS.SSN`	###-##-####	123-45-6789
`INPUT_MASKS.DATE_US`	##/##/####	01/15/1990
`INPUT_MASKS.DATE_ISO`	####-##-##	1990-01-15
`INPUT_MASKS.ZIP`	#####	12345
`INPUT_MASKS.ZIP_PLUS4`	#####-####	12345-6789
`INPUT_MASKS.NPI`	##########	1234567890
`INPUT_MASKS.MEMBER_ID_12`	############	123456789012
`INPUT_MASKS.CREDIT_CARD`	####-####-####-####	4111-1111-1111-1111

Mask characters: # = digit, A = letter, * = alphanumeric. Any other character is treated as a literal.

Healthcare Best Practices

• Use input masking for SSN, phone, DOB, and NPI to ensure consistent formatting
• Always use inputMode="numeric" for masked numeric fields (set automatically when using mask)
• Use debounce + loading for async validation like NPI lookups or member ID verification
• Mark PHI fields appropriately and never log their values in production
• Add clearable for search fields to improve UX on mobile devices
• Use password toggle to help users avoid typos in authentication flows
• Provide clear error messages that help users correct their input

Accessibility Features

• WAI-ARIA: Proper aria-invalid, aria-required, aria-describedby for validation
• Keyboard Support: Escape to clear (when clearable), proper focus management
• Screen Readers: Announces password visibility state, clear action, and validation messages
• Clear Button: Not in tab order (tabindex=-1) - keyboard users use Backspace/Delete
• Reduced Motion: Respects prefers-reduced-motion for animations
• Touch Targets: 44x44px minimum for clear/toggle buttons