Credit Card Input Field
Credit Card Input Field enables users to input and verify their card information.
Last updated
Credit Card Input Field enables users to input and verify their card information.
Last updated
Credit card fields are used in forms and input scenarios where users need to enter their credit card information for transactions. They ensure a consistent format for input, making it easier to validate and process the credit card number accurately.
A credit card field component typically includes a label, an input area formatted specifically for credit card numbers, and optional elements like placeholder text or helper text to guide the user. It may have different states to reflect its status, such as focused, filled, or error. This component helps users enter credit card information in the correct format, improving both accuracy and ease of use.
aria_label
An optional aria-label attribute for improved accessibility, helping screen readers describe the input field to users with visual impairments.
string
card_icon
The path to the image representing the card icon, such as a credit card or payment method logo, that will be displayed next to the input field.
string
component_mode
A string representing a specific mode for the component, which can be used for styling or behavior modifications, such as 'edit' or 'view'.
string
custom_class
An optional custom CSS class that can be applied to the input field or the surrounding container for additional styling.
string
disabled
A boolean flag that determines if the input field should be disabled. If true, the user won't be able to interact with the field.
boolean
error_message
A message that will be displayed if there is an error related to the credit card input, such as an invalid card number.
string
helper_text
Additional descriptive text or guidance that will be shown below the input field, typically providing hints to the user.
string
input_id
The unique identifier (id) for the input field, which is useful for labeling, accessibility, and DOM manipulation.
string
input_type
A string that defines the type of the input field. For example, this could control the appearance or behavior of the input (e.g., 'password' for obscuring text).
string
label
The label text associated with the input field. This is typically used to describe the input field's purpose.
string
placeholder
The placeholder text to be displayed in the input field when it is empty.
string
restrict_input
A boolean flag that, when set to true, limits the input field's length to 100 characters. If false, it allows a maximum of 25 characters.
boolean
size
A string that determines the size of the input field. It could be values like 'small', 'medium', or 'large', which adjusts the styling of the input field.
string
validation_type
A string used to specify the validation style for the input field, such as 'required', 'invalid', or any custom validation type.
string
value
The current value of the credit card input. It is used to set and update the value of the input programmatically.
string
Label: Positioned above the input field, the label ("Card Number") indicates the purpose of the field, guiding users to enter their card number.
Placeholder: The placeholder text inside the input field ("0000 - 0000 - 0000 - 0000") provides a visual example of the expected card number format, helping users understand how to enter the information.
Lead Icon: Positioned to the left of the helper text, the lead icon provides an additional visual cue, often indicating information or help related to the input field.
Caption: Positioned below the input field, the caption provides additional instructions or context, such as "Helper or footer text," to assist users with the input.
Use credit card fields to collect users' credit card numbers in a standardized format.
Don't use credit card fields for non-credit card number inputs.
Label the credit card field clearly to indicate its purpose.
Avoid using ambiguous or unclear labels for credit card fields.
Include placeholder text to show the expected credit card number format.
Don't rely solely on placeholder text for essential instructions.
Provide helper text to explain any specific formatting requirements.
Don't overload the credit card field with too much information.
Ensure the credit card field is large enough to be easily tappable or clickable.
Avoid making the credit card field too small to interact with comfortably.
Validate input and provide clear error messages when the credit card number format is incorrect.
Don't provide generic error messages that don't help users understand the issue.
Keep consistent styling and spacing across all credit card fields in the application.
Don't use inconsistent styles that may confuse users.
