Input Format
Pattern
Live
The Input Format pattern automatically formats a users input to the data type.
- Usage
- Examples
- Properties
- Accessibility
- CSS Variables
Usage
Input format provides automatic formatting to improve the consistency and correctness of data. It offers a variety of pre-set formatting options including currency, credit card, phone number, postcode, and more, guiding users and reducing user errors.
Installation
Install
yarn add @iag/chroma-react-ui.components
Import
import { InputFormat } from "@iag/chroma-react-ui.components";
When to use
Use Input Format to ensure a specific format of the user's input, especially when data integrity is crucial. It's also helpful when you want to guide users and remove ambiguity about how they should enter information.
When to avoid
Avoid using Input Format where any input is acceptable, or where specified formats are not required. Consider the Input component.
Do
- Do select the relevant variant based on the input field needs.
- Do use informative error messages for easier correction.
- Do provide help text for additional context or prompts.
- Do use placeholders to guide users on input format.