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"></chi-phone-input>
<div class="chi-label -status -danger">
<chi-icon icon="circle-warning"></chi-icon>
Invalid phone number
</div>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>