Telephone

npm2.0.0

The telephone input component allows users to input and edit telephone numbers. Uses native <input type="tel"> internally for proper mobile keyboard support and native validation.

Example

Phone Number

Enter your contact number

code

<script type="module">
  import '@blueprintui/components/include/telephone.js';
</script>

<bp-field>
  <label>Phone Number</label>
  <bp-telephone placeholder="+1 (555) 123-4567"></bp-telephone>
  <bp-field-message>Enter your contact number</bp-field-message>
</bp-field>

Vertical

Phone Number

Enter your contact number

disabled

disabled message

error

Please enter a valid phone number

success

Valid phone number

code

<bp-form-group layout="vertical">
  <bp-field>
    <label>Phone Number</label>
    <bp-telephone placeholder="+1 (555) 123-4567"></bp-telephone>
    <bp-field-message>Enter your contact number</bp-field-message>
  </bp-field>

  <bp-field>
    <label>disabled</label>
    <bp-telephone disabled value="+1 555-123-4567"></bp-telephone>
    <bp-field-message>disabled message</bp-field-message>
  </bp-field>

  <bp-field status="error">
    <label>error</label>
    <bp-telephone value="invalid"></bp-telephone>
    <bp-field-message status="error">Please enter a valid phone number</bp-field-message>
  </bp-field>

  <bp-field status="success">
    <label>success</label>
    <bp-telephone value="+1 555-123-4567"></bp-telephone>
    <bp-field-message status="success">Valid phone number</bp-field-message>
  </bp-field>
</bp-form-group>

Horizontal

Phone Number

Enter your contact number

disabled

disabled message

error

Please enter a valid phone number

success

Valid phone number

code

<bp-form-group layout="horizontal">
  <bp-field layout="horizontal">
    <label>Phone Number</label>
    <bp-telephone placeholder="+1 (555) 123-4567"></bp-telephone>
    <bp-field-message>Enter your contact number</bp-field-message>
  </bp-field>

  <bp-field layout="horizontal">
    <label>disabled</label>
    <bp-telephone disabled value="+1 555-123-4567"></bp-telephone>
    <bp-field-message>disabled message</bp-field-message>
  </bp-field>

  <bp-field layout="horizontal" status="error">
    <label>error</label>
    <bp-telephone value="invalid"></bp-telephone>
    <bp-field-message status="error">Please enter a valid phone number</bp-field-message>
  </bp-field>

  <bp-field layout="horizontal" status="success">
    <label>success</label>
    <bp-telephone value="+1 555-123-4567"></bp-telephone>
    <bp-field-message status="success">Valid phone number</bp-field-message>
  </bp-field>
</bp-form-group>

Compact

Phone Number

Enter your contact number

disabled

disabled message

error

Please enter a valid phone number

success

Valid phone number

code

<bp-form-group layout="compact">
  <bp-field layout="compact">
    <label>Phone Number</label>
    <bp-telephone placeholder="+1 (555) 123-4567"></bp-telephone>
    <bp-field-message>Enter your contact number</bp-field-message>
  </bp-field>

  <bp-field layout="compact">
    <label>disabled</label>
    <bp-telephone disabled value="+1 555-123-4567"></bp-telephone>
    <bp-field-message>disabled message</bp-field-message>
  </bp-field>

  <bp-field layout="compact" status="error">
    <label>error</label>
    <bp-telephone value="invalid"></bp-telephone>
    <bp-field-message status="error">Please enter a valid phone number</bp-field-message>
  </bp-field>

  <bp-field layout="compact" status="success">
    <label>success</label>
    <bp-telephone value="+1 555-123-4567"></bp-telephone>
    <bp-field-message status="success">Valid phone number</bp-field-message>
  </bp-field>
</bp-form-group>

Validation

Phone Number

Please use format: 555-123-4567

Phone number is required

code

<bp-field validate>
  <label>Phone Number</label>
  <bp-telephone required pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="555-123-4567"> </bp-telephone>
  <bp-field-message error="patternMismatch"> Please use format: 555-123-4567 </bp-field-message>
  <bp-field-message error="valueMissing"> Phone number is required </bp-field-message>
</bp-field>

With Prefix

Phone Number

Phone with icon prefix

code

<script type="module">
  import '@blueprintui/components/include/telephone.js';
  import '@blueprintui/icons/include.js';
  import '@blueprintui/icons/shapes/phone-handset.js';
</script>
<bp-field>
  <label>Phone Number</label>
  <bp-telephone placeholder="555-123-4567">
    <bp-button-icon slot="prefix" shape="phone-handset" readonly></bp-button-icon>
  </bp-telephone>
  <bp-field-message>Phone with icon prefix</bp-field-message>
</bp-field>

Autocomplete

Phone Number

Browser will suggest saved phone numbers

code

<bp-field>
  <label>Phone Number</label>
  <bp-telephone autocomplete="tel" placeholder="+1 (555) 123-4567"></bp-telephone>
  <bp-field-message>Browser will suggest saved phone numbers</bp-field-message>
</bp-field>

Install

NPM

// npm package
import '@blueprintui/components/include/telephone.js';

CDN

<script type="module">
  import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/telephone.js/+esm';
</script>

Accessibility

Must have a clear and visible label or aria-label attribute if no visible label is present.
Uses type="tel" for appropriate mobile keyboard with numeric keypad.
Supports keyboard navigation and visible focus state.
Supports ARIA attributes (aria-describedby, aria-label) for enhanced accessibility.
Provides clear feedback when input is invalid through validation messages.

Pattern Validation

The telephone component supports HTML5 pattern validation for enforcing specific phone number formats. Here are some common patterns:

US Format (555-123-4567):

<bp-telephone pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"></bp-telephone>

International Format (+1 555-123-4567):

<bp-telephone pattern="\+[0-9]{1,3} [0-9]{3}-[0-9]{3}-[0-9]{4}"></bp-telephone>

Flexible Format (allows various separators):

<bp-telephone pattern="[0-9]{3}[-. ]?[0-9]{3}[-. ]?[0-9]{4}"></bp-telephone>

bp-telephone

Events

Name	Types	Description
`input`	`InputEvent`	occurs when the value changes
`change`	`InputEvent`	occurs when the value changes

Properties

Name	Types	Description
`type`	`string`	Specifies the input type, affecting behavior and validation
`value`	`string \| number \| FormData \| File`	Defines the current value of the input for form submission and validation
`disabled`	`boolean`	determines if element is mutable or focusable
`required`	`boolean`	indicates that the user must specify a value for the input before the owning form can be submitted
`readonly`	`boolean`	makes the element not mutable, meaning the user can not edit the control
`multiple`	`boolean`	determines he form control accepts one or more values
`autocomplete`	`string`	provide automated assistance in filling out form field values, and guidance to the browser as to the type of information expected in the field
`formNoValidate`	`boolean`	determines if the form control is novalidate
`name`	`string`	represents the name of the current element as a string.
`pattern`	`string`	regular expression the form control's value should match
`placeholder`	`string`	defines a short hint to help the user with data entry when a form control has no value
`minLength`	`number`	defines minimum number of characters
`maxLength`	`number`	defines maximum number of characters
`min`	`number`	defines the most negative value in the range of permitted values
`max`	`number`	defines the greatest value in the range of permitted values
`size`	`number`	determines number of characters
`formAssociated`	`boolean`
`valueAsNumber`
`composedLabel`
`focus`
`reset`

Attributes

Name	Types	Description
`type`	`string`	Specifies the input type, affecting behavior and validation
`value`	`string \| number \| FormData \| File`	Defines the current value of the input for form submission and validation
`disabled`	`boolean`	determines if element is mutable or focusable
`required`	`boolean`	indicates that the user must specify a value for the input before the owning form can be submitted
`readonly`	`boolean`	makes the element not mutable, meaning the user can not edit the control
`multiple`	`boolean`	determines he form control accepts one or more values
`autocomplete`	`string`	provide automated assistance in filling out form field values, and guidance to the browser as to the type of information expected in the field
`formNoValidate`	`boolean`	determines if the form control is novalidate
`pattern`	`string`	regular expression the form control's value should match
`placeholder`	`string`	defines a short hint to help the user with data entry when a form control has no value
`minLength`	`number`	defines minimum number of characters
`maxLength`	`number`	defines maximum number of characters
`min`	`number`	defines the most negative value in the range of permitted values
`max`	`number`	defines the greatest value in the range of permitted values
`size`	`number`	determines number of characters

CSS Properties

Name	Types	Description
`--background-size`
`--color`
`--background`
`--border`
`--border-radius`
`--outline`
`--outline-offset`
`--padding`
`--font-size`
`--line-height`
`--height`
`--min-width`
`--width`
`--transition`
`--text-align`
`--cursor`

Slots

Name	Types	Description
`prefix`		slot for prefix text or icons
`suffix`		slot for suffix text or icons