Phone Input

<ahi-phone-input> | AhiPhoneInput

An input mask set up for phone number inputs.

<ahi-phone-input label="Home Phone"></ahi-phone-input>

Importing

Script

Bundler

To import this component using a script tag:

<script type="module" src="/path/to/azalea-kit-ui/dist/components/phone-input/phone-input.js"></script>

To import this component using a bundler:

import '@azaleahealth/azalea-kit-ui/dist/components/phone-input/phone-input.js';

Slots

Name	Description
`label`	The input’s label. Alternatively, you can use the `label` attribute.
`clear-icon`	An icon to use in lieu of the default clear icon.
`help-text`	Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
`show-password-icon`	An icon to use in lieu of the default show password icon.
`hide-password-icon`	An icon to use in lieu of the default hide password icon.
`error`	An error message shown once the control is invalid. Plain text can be set with the `error` property instead; use this slot when the message needs markup.

Learn more about using slots.

Properties

Name	Description	Type	Default
`type`	The type of input. Works the same as a native `<input>` element, but only a subset of types are supported. Defaults to `text`.	`'email' \| 'password' \| 'search' \| 'tel' \| 'text' \| 'url'`	`'tel'`
`mask`	The mask to the applied to the input’s value. `^` indicates a letter, `#` indicates a number, and `*` indicates any character. Any other character will be treated as a separator.	`string`	`'(###) ###-####'`
`placeholder`	Placeholder text to show as a hint when the input is empty.	`string`	`'(555) 555-5555'`
`inputmode`	Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual keyboard on supportive devices.	`'none' \| 'text' \| 'decimal' \| 'numeric' \| 'tel' \| 'search' \| 'email' \| 'url'`	`'tel'`
`pattern`	A regular expression pattern to validate input against. If one is not provided, then one will be generated based on the `mask` property.	`string`	`'\(\d{3}\) \d{3}-\d{4}'`
`value`	The current value of the input	-	-
`name`	The name of the input, submitted as a name/value pair with form data.	`string`	`''`
`autofocus`	Indicates that the input should receive focus on page load.	`boolean`	`false`
`autocomplete`	Specifies what permission the browser has to provide assistance in filling out form field values. Refer to this page on MDN for available values.	`string`	-
`clearable`	Adds a clear button when the input is not empty.	`boolean`	`false`
`disabled`	Disabled the input.	`boolean`	`false`
`required`	Makes the input a required field.	`boolean`	`false`
`readonly`	Makes the input read only.	`boolean`	`false`
`label`	The input’s label. If you need to display HTML, use the `label` slot instead.	`string`	-
`helpText` `help-text`	The input’s help text. If you need to display HTML, you can use the `help-text` slot instead.	`string`	-
`error`	An error message to show on the control, as on `<ahi-input>`. Setting it makes the control genuinely invalid and shows the message at once, as the control’s only error, without waiting for the user to touch the field. Clearing it clears that validity. Use the `error` slot instead when the message needs markup rather than plain text.	`string`	`''`
`defaultValue`	The default value of the form control. Primarily used for resetting the form control.	`string`	`''`
`passwordToggle` `password-toggle`	Adds a button to toggle the password’s visibility. Only applies to password types.	`boolean`	`false`
`validity`	Gets the validity state object	-	-
`validationMessage`	Gets the validation message	-	-
`formId` `form`	By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you to place the form control outside of a form and associate it with the form that has this `id`. The form must be in the same document or shadow root for this to work.	`string`	`''`
`form`	The form the control is associated with, following the native form-control contract: reading returns the associated `<form>` element (or `null` if there is none), assigning takes a form id — assign an empty string to restore association with the nearest containing form.	`HTMLFormElement \| null`	-
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about properties and attributes.

Events

Name	Description	Event Detail
`ahi-blur`	Emitted when the control loses focus.	-
`ahi-change`	Emitted when an alteration to the control’s value is committed by the user.	-
`ahi-clear`	Emitted when the clear button is activated.	-
`ahi-focus`	Emitted when the control gains focus.	-
`ahi-input`	Emitted when the control receives input.	-
`ahi-invalid`	Emitted when the form control has been checked for validity and its constraints aren’t satisfied.	-

Learn more about events.

Methods

Name	Description	Arguments
`checkValidity()`	Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.	-
`reportValidity()`	Checks for validity and shows the browser’s validation message if the control is invalid.	-
`setCustomValidity()`	Sets a custom validation message. If `message` is not empty, the field will be considered invalid.	`message: string`
`focus()`	Sets focus on the input.	`options: FocusOptions`
`blur()`	Removes focus from the input.	-
`select()`	Selects all the text in the input.	-
`resetValidity()`	Hides validity again, returning the control to its pristine state: it stops matching `:user-invalid` and drops its error styling until the user next interacts with it. The value and the validity are both untouched — an empty required control is still invalid and still blocks submission. This only changes whether that invalidity is shown. Interaction state otherwise has exactly one automatic exit, `form.reset()`. Call this when the application replaces a value itself and the old error no longer describes anything the user did: loading a draft, switching which record is being edited, or clearing a filter row.	-

Learn more about methods.

CSS Parts

Name	Description
`input`	The internal `<ahi-input>` control.
`input__form-control`	The form control that wraps the label, input, and help-text in the internal `<ahi-input>` control.
`input__form-control-label`	The wrapper of the internal `<ahi-input>` control’s label.
`input__form-control-input`	The wrapper of the internal `<ahi-input>` control’s input.
`input__form-control-error`	The wrapper of the internal `<ahi-input>` control’s error.
`input__form-control-help-text`	The wrapper of the internal `<ahi-input>` control’s help text
`input__base`	The internal `<ahi-input>` control’s base wrapper.
`input__input`	The internal `<input>` control.
`input__clear-button`	The internal `<ahi-input>` control’s clear button.
`input__password-toggle-button`	The internal `<ahi-input>` control’s password toggle button.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

<ahi-icon>
<ahi-input>
<ahi-input-mask>