Masked Fields
Masked fields are input components that enforce a specific structure for user input. They're ideal for forms that require consistent formatting - such as dates, times, numbers, or identifiers - where accuracy is required.
These components apply formatting rules directly to the input field, helping users understand what type of value is expected while reducing input errors. This makes them particularly useful in financial systems, administrative dashboards, scheduling interfaces, and other apps that rely on validated data entry.
Topics
📄️ MaskedDateField
The MaskedDateField is a text input that lets users enter dates as numbers and automatically formats the input based on a defined mask when the field loses focus. The mask specifies the expected date format, guiding both input and display. The component supports flexible parsing, validation, localization, and value restoration for consistent, region-specific date handling.
📄️ MaskedNumberField
The MaskedNumberField is a text input designed for structured numeric entry. It ensures numbers are formatted consistently based on a defined mask, making it especially useful for financial forms, pricing fields, or any input where precision and readability matter.
📄️ MaskedTextField
The MaskedTextField component provides a configurable text input that enforces formatting rules and validation. It's well-suited for apps requiring structured input, such as financial, e-commerce, and healthcare systems.
📄️ MaskedTimeField
The MaskedTimeField is a text input that lets users enter times as numbers and automatically formats the input based on a defined mask when the field loses focus. The mask specifies the expected time format, guiding both input and display. The component supports flexible parsing, validation, localization, and value restoration for consistent time handling.