Phone Input Field
Phone Input Field allows users to enter and validate phone numbers in a standardized format, often with options for country code selection.
Last updated
Phone Input Field allows users to enter and validate phone numbers in a standardized format, often with options for country code selection.
Last updated
Phone fields are used in forms and input scenarios where users need to enter their phone number. They help maintain a consistent format, making it easier to validate and utilize the phone number for communication purposes.
A phone field component typically includes a label, a phone number-formatted input area, and optional elements like placeholder text and helper text to assist the user. It may also display different states, such as focused, filled, or error, to reflect its current status. The phone field ensures that the phone number is entered accurately and in the correct format.
aria_label
The aria-label for accessibility, describing the input field's function to screen readers.
string
button_aria_label
The aria-label for the dropdown button, providing context for screen readers.
string
button_id
The ID for the dropdown button, useful for styling or testing purposes.
string
component_mode
Defines the mode of the component, which can be used to customize its behavior or appearance
string
custom_class
A custom CSS class that can be added to the component’s root element for additional styling.
string
disabled
Determines if the input field is disabled or not. When true, the field is uneditable and grayed out.
boolean
error_message
An error message that is shown when the input is invalid or does not meet the validation criteria.
string
helper_text
Optional helper text displayed below the input field, providing extra information to the user about what should be entered.
string
input_id
The ID of the input field, useful for labeling and referencing the field in a form or when styling.
string
label
The label text that will be displayed next to the input field to describe the expected value (e.g., "Phone Number").
string
placeholder
A placeholder text that appears in the input field when it's empty, guiding the user on what to enter (e.g., "Enter phone number").
string
size
Specifies the size of the input field, e.g., "small", "medium", or "large". It adjusts the size of the input box accordingly.
string
validation_type
A type of validation to apply to the input field. This could trigger specific styling or validation behavior (e.g., "required", "email", etc.).
string
country_code
The default country code to be displayed in the input field, such as +1 for the US or +44 for the UK.
string
country_flag
The URL of the flag image associated with the default country. This is displayed alongside the country code.
string
phone_number
The value of the phone number entered by the user.
string
is_focused
A boolean that tracks whether the input field is currently focused by the user.
boolean
dropdown_open
A boolean indicating whether the country code dropdown is open or closed.
boolean
countries
A list of countries with their respective country codes and flag image URLs. This is used to populate the country selector dropdown.
Label: Describes the field as "Phone Number" to clarify the purpose for the user.
Flag Icon: Displays the country flag, indicating the selected country code. Provides a visual representation to assist users in identifying the region.
Country Dropdown: Allows users to select or change the country code. This is helpful for international phone numbers, ensuring accurate dialing codes.
Placeholder: Guides users on the input format for the phone number.
Lead-Icon: Positioned to the left of the helper text, the lead icon provides a visual cue that can offer additional information or help related to the entered input.
Caption: Additional helper or footer text that provides guidance or context, typically used for validation messages or tips.
Use phone fields to collect users' phone numbers in a standardized format.
Don't use phone fields for non-phone number inputs.
Label the phone field clearly to indicate its purpose.
Avoid using ambiguous or unclear labels for phone fields.
Include placeholder text to show the expected phone 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 phone field with too much information.
Ensure the phone field is large enough to be easily tappable or clickable.
Avoid making the phone field too small to interact with comfortably.
Validate input and provide clear error messages when the phone 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 phone fields in the application.
Don't use inconsistent styles that may confuse users.
