ba-input-phone-number

A form field for entering international phone numbers

<ba-input-phone-number label="Phone number" name="phoneNumber" hint-text="Please enter your phone number" required></ba-input-phone-number>

This component should only be used for entering phone numbers. For text use ba-input-text or ba-input-textarea and for numbers use ba-input-number

As ba-input-phone-number contains multiple inputs you cannot get both values by using the value property like you can with the other form inputs. Doing this will only get the phone number value, but not the country code. To get both values you must listen for the baOnInput event, as this emits out both the country code and the entered value.

Always use the label attribute to give a meaningful label to the field.

Code

Properties & Attributes

Property	Attribute	Description	Type	Default
`countryCode`	`country-code`	The selected country code	`string \| undefined`	`'gb'`
`hintText`	`hint-text`	Hint text to show above the input	`string \| undefined`	`undefined`
`invalid`	`invalid`	Whether the input is invalid	`boolean \| undefined`	`false`
`label`(required)	`label`	A label for the input	`string`	`undefined`
`maxLength`	`max-length`	Max amount of characters allowed in validation	`string \| undefined`	`undefined`
`minLength`	`min-length`	Min amount of characters allowed in validation	`string \| undefined`	`undefined`
`name`	`name`	The name of the input	`string \| undefined`	`undefined`
`priorityCodes`	`priority-codes`	List of priority codes for the country selector	`string \| undefined`	`'gb,us'`
`required`	`required`	Whether the input is required	`boolean \| undefined`	`false`
`value`	`value`	The value of the input	`string \| undefined`	`''`

Events

Event	Description	Type
`baBlur`	Emitted when the input loses focus.	`CustomEvent<void>`
`baFocus`	Emitted when the input has focus.	`CustomEvent<void>`
`baOnInput`	Emitted when a keyboard input ocurred.	`CustomEvent<KeyboardEvent>`
`baSubmit`	Emitted when the user submits the form from within the component	`CustomEvent<void>`

Methods

`isValid() => Promise<boolean>`

An exposed method for triggering the inputs required validation

`reset() => Promise<void>`

Resets the input back to its initial value

Returns

Type: Promise<void>

`getData() => Promise<InputChangeEventDetail>`

Returns the currently selected country code, dialing code and input value

Returns

Type: Promise<InputChangeEventDetail>

Slots

Slot	Description	Permitted elements
`"error"`	Element will be rendered in the error slot	`<p>`
`"error-required"`	Element will be rendered in the error-required slot	`<p>`
`"error-min-length"`	Element will be rendered in the error-min-length slot	`<p>`
`"error-max-length"`	Element will be rendered in the error-max-length slot	`<p>`

Parent components

ba-input-phone-number can be slotted into:

Usage

Basic usage

A simple phone number input

<ba-input-phone-number label="Label text" name="input-phone-number" required></ba-input-phone-number>

Help text

It is sometimes useful to add hint text.

A phone number input that has hint text

<ba-input-phone-number label="Label text" name="input-phone-number" hint-text="Custom hint text" required></ba-input-phone-number>

Priority codes

You can change the countries shown in the priority codes section of the dropdown

A phone number input with different priority codes

<ba-input-phone-number label="Label text" name="input-phone-number" hint-text="Custom hint text" priority-codes="fr,es"></ba-input-phone-number>

Validation

Min/max number

You can specify a minimum and maximum length of number.

Specifying a minimum and maximum length of numbers

<ba-input-phone-number name="text-input" label="Input text" min-length="2" max-length="6"></ba-input-phone-number>

Required

You can set the field to be required

Setting the field as required

<ba-input-phone-number name="text-input" label="Input text" required></ba-input-phone-number>

Custom Error messages

BAgel provides error messages with translations for:

Required
Minimum length of numbers
Maximum length of numbers
Error not a number

These can be customised using slots.

Specifying custom validation errors

<ba-input-phone-number name="text-input" label="Input text" required min-length="2" max-length="6">
  <p slot="error-required">Custom required error</p>
  <p slot="error-min">Custom min length error</p>
  <p slot="error-max">Custom max length error</p>
  <p slot="error-not-a-number">Custom not a number error</p>
</ba-input-phone-number>

Override all error messages

You can override all error messages with the error slot.

Overriding all error messages

<ba-input-phone-number name="text-input" label="Input text" required min-length="2" max-length="6">
  <p slot="error">This will override all error messages</p>
  <p slot="error-required">Custom required error</p>
  <p slot="error-min">Custom min length error</p>
  <p slot="error-max">Custom max length error</p>
  <p slot="error-not-a-number">Custom not a number error</p>
</ba-input-phone-number>

Custom validation

You can provide your own custom validation using events and props.

Custom validation

<ba-input-phone-number name="text-input" label="Input text" required>
  <p slot="error">Custom error message</p>
</ba-input-phone-number>

<script>
  const textInput = document.querySelector('ba-input-phone-number');
  textInput.addEventListener('baOnInput', (e) => {
    const value = e.detail.value;

    // Do your custom validation here.
    //
    //
    // Then set the input to invalid
    textInput.setAttribute('invalid')
  })
</script>