Phone Input
Examples
Base
<chi-label for="phone-input-base">Phone Number</chi-label>
<chi-phone-input id="phone-input-base"></chi-phone-input>Placeholder
Use the placeholder attribute to provide users with an example of the type of data
that can be entered into a Phone input. Note: Placeholder text is not persistent and visually
disappears when a value is entered.
<chi-label for="phone-input-placeholder">Phone Number</chi-label>
<chi-phone-input id="phone-input-placeholder" placeholder="e.g. (123) 456-7890"></chi-phone-input>Default Country
Use the default-country attribute to set a default two-letter country code. Defaults to "US".
<chi-label for="phone-input-default-country">Phone Number</chi-label>
<chi-phone-input id="phone-input-default-country" default-country="US"></chi-phone-input>Value
Use the value attribute to set a default phone number.
<chi-label for="phone-input-value">Phone Number</chi-label>
<chi-phone-input id="phone-input-value" default-country="US" value="+1-6045551212"></chi-phone-input>Excluded Countries
Use the excluded-countries attribute to set excluded countries.
<chi-label for="phone-input-excluded-countries">Phone Number</chi-label>
<chi-phone-input id="phone-input-excluded-countries" excluded-countries="GB,DE,FR"></chi-phone-input>Disabled
Use the disabled boolean attribute to prevent users from interacting with the phone input.
Disabled phone inputs can not receive any browsing events such as prefix selection, mouse clicks or focus.
<chi-label for="phone-input-disabled">Phone Number</chi-label>
<chi-phone-input id="phone-input-disabled" disabled></chi-phone-input>Error
Use the danger state to provide feedback to users when phone number fails to validate.
To meet accessibility requirements, phone input must include an error message explaining the
failure and/or how to correct it.
<chi-label for="phone-input-error">Phone Number</chi-label>
<chi-phone-input id="phone-input-error" state="danger" helper-message="Invalid phone number"></chi-phone-input>Input Mask
Use the input-mask boolean attribute to enter digits only in the phone input.
<chi-label for="phone-input-mask">Phone Number</chi-label>
<chi-phone-input id="phone-input-mask" input-mask></chi-phone-input>Sizes
Phone input supports the following sizes: xs, sm, md (default), lg, and xl.
<!-- xs -->
<chi-label for="phone-input-xs">xs</chi-label>
<chi-phone-input id="phone-input-xs" size="xs"></chi-phone-input>
<!-- sm -->
<chi-label for="phone-input-sm">sm</chi-label>
<chi-phone-input id="phone-input-sm" size="sm"></chi-phone-input>
<!-- md -->
<chi-label for="phone-input-md">md</chi-label>
<chi-phone-input id="phone-input-md" size="md"></chi-phone-input>
<!-- lg -->
<chi-label for="phone-input-lg">lg</chi-label>
<chi-phone-input id="phone-input-lg" size="lg"></chi-phone-input>
<!-- xl -->
<chi-label for="phone-input-xl">xl</chi-label>
<chi-phone-input id="phone-input-xl" size="xl"></chi-phone-input>Sizes
Phone input supports the following sizes: xs, sm, md (default), and lg.
<!-- xs -->
<chi-label for="phone-input-xs">xs</chi-label>
<chi-phone-input id="phone-input-xs" size="xs"></chi-phone-input>
<!-- sm -->
<chi-label for="phone-input-sm">sm</chi-label>
<chi-phone-input id="phone-input-sm" size="sm"></chi-phone-input>
<!-- md -->
<chi-label for="phone-input-md">md</chi-label>
<chi-phone-input id="phone-input-md" size="md"></chi-phone-input>
<!-- lg -->
<chi-label for="phone-input-lg">lg</chi-label>
<chi-phone-input id="phone-input-lg" size="lg"></chi-phone-input>Web Component
Properties
Events
Accessibility
Keyboard Navigation
| Key | Function |
|---|---|
Tab | Moves focus to the next focusable element. |
Shift + Tab | Moves focus to the previous focusable element. |
Enter,Space | Submits the entered value. |
For comprehensive details on keyboard support, refer to our Keyboard Control Guide.
Visit WebAIM for keyboard techniques.
Find live examples of accessible inputs with different types in DigitalA11y project.
Resources
- Mozilla Resources for Developers: Information about the HTML
input-type="tel" - A11y style guide: Describes core principles for the accessible inputs and textarea.
- MagentaA11y: How to test a number input.
Other recommendations
Explore additional accessibility tips in the general Accessibility Guide.
WCAG 2.2 Guidelines
- Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose. (Level A)
- Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)
- Headings and Labels: Headings and labels describe topic or purpose. (Level AA)
- Labels or Instructions: Labels or instructions are provided when content requires user input. (Level A)
- Name, Role, Value: For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. (Level A)