Diwa Design System

Input Tel

A telephone number input. Triggers the numeric keypad on mobile devices and supports autocomplete for phone numbers.

When to use

Use diwa-input-tel for telephone number fields. This triggers the numeric keypad on mobile devices and enables browser autocomplete for saved phone numbers. The browser does not enforce a specific format, so validate format in your application if needed.

Example

<diwa-input-tel
  label="Phone number"
  placeholder="+1 (555) 000-0000"
  autocomplete="tel"
  required
></diwa-input-tel>

Format guidance

Use the placeholder and description props to communicate the expected format to users, for example +1 (555) 000-0000 or +44 7911 123456.