Phone Number Field
Phone Number Field allows users to enter and validate phone numbers in a standardized format, often with options for country code selection.
Last updated
Phone Number Field allows users to enter and validate phone numbers in a standardized format, often with options for country code selection.
Last updated
Overview
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.
toggle_button_name
Name attribute for the country dropdown button
string
country_select_button_name
Name attribute for the country selection buttons in the dropdown
string
phone_input_name
Name attribute for the input field
string
Label: Describes the data to be entered, such as "Phone Number."
Flag Icon: Shows the flag of the selected country, identifying the country code.
Lead-Icon: Placed at the start of the input field to symbolize phone number entry.
Country Dropdown: Allows selection of the country code, displaying flags and codes for user convenience.
Input Fields: Segments where users type their phone number, structured by separators for clarity.
Separator: Divides segments of the phone number for organized input.
Helper or Footer Text: Provides extra guidance or requirements about the input format.
Caption: Offers additional details or instructions related to the input.
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.
