jb-mobile-input web component

Mobile number input web component built on jb-input.

• Removes non-numeric characters.
• Accepts Persian digits and converts them to English digits.
• Normalizes Iranian mobile numbers to 09xxxxxxxxx.
• Formats the visible value as 09xx xxxxxxx.
• Adds ready-to-use mobile-number validation through jb-validation.

When to use

Use jb-mobile-input when the field must collect an Iranian mobile number.

Use jb-input for generic single-line text and jb-number-input for numeric values that are not mobile numbers.

Demo

• CodePen

Using With JS Frameworks

Other integrations: Angular · Vue · Nuxt · Svelte · SvelteKit · SolidJS · Lit · Next.js · Astro · Blazor · Server-rendered templates · WordPress · Alpine.js and HTMX

Installation

npm install jb-mobile-input

import 'jb-mobile-input';

Using CDN:

<script src="https://unpkg.com/jb-mobile-input/dist/jb-mobile-input.umd.js"></script>

<jb-mobile-input label="Mobile"></jb-mobile-input>

API reference

jb-mobile-input extends JBInputWebComponent, so it inherits the jb-input label, message, validation, form association, slots, events, methods, and CSS parts.

Attributes

| name | type | default | description | | --- | --- | --- | --- | | value | string | "" | Initial mobile value. Prefer the value property for controlled updates. | | label | string | "" | Visible label text and accessible aria label inherited from jb-input. | | message | string | "" | Helper text shown below the input when no validation error is visible. | | name | string | "" | Form field name inherited from jb-input. | | placeholder | string | "" | Placeholder text forwarded to the inner native input. | | disabled | boolean | false | Disables the input. | | required | boolean \| string | false | Enables required validation. A string value is used as the required error message. | | error | string | "" | External validation error message inherited from jb-input. | | disable-auto-validation | boolean | false | Stops automatic validation inherited from jb-input. | | size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | md style defaults | Visual size variant inherited from jb-input. |

Properties

| name | type | readonly | description | | --- | --- | --- | --- | | value | string | no | Canonical normalized value without spaces, for example 09123456789. | | displayValue | string | yes | Formatted value rendered in the input, for example 0912 3456789. | | validation | ValidationHelper<ValidationValue> | yes | jb-validation helper inherited from jb-input with an added mobile-number validation. | | isDirty | boolean | yes | true when current value differs from initialValue. | | validationMessage | string | yes | Current native validation message from ElementInternals. |

Methods

| name | returns | description | | --- | --- | --- | | checkValidity() | boolean | Runs validation without showing the error message. | | reportValidity() | boolean | Runs validation and shows the first error message. | | focus() | void | Focuses the inner native input. | | setSelectionRange(start, end, direction?) | void | Forwards setSelectionRange to the inner input. |

Events

| event | detail | description | | --- | --- | --- | | input | none | Dispatched on each user input after value standardization. | | change | none | Dispatched when the value is committed. | | beforeinput | none | Cancelable event dispatched before the native input changes. | | enter | none | Dispatched when Enter is pressed. | | invalid | none | Dispatched when validation finds an invalid value. |

Value format

jb-mobile-input keeps two values:

• value: normalized mobile number without spaces, such as 09123456789.
• displayValue: formatted text shown to the user, such as 0912 3456789.

The component accepts input like 9123456789, 09123456789, Persian digits, or pasted text with spaces. It removes non-numeric characters and adds the 09 prefix when possible.

const mobileInput = document.querySelector('jb-mobile-input');

mobileInput.value = '9123456789';
console.log(mobileInput.value); // 09123456789
console.log(mobileInput.displayValue); // 0912 3456789

Validation

The component adds mobile-number validation to the inherited jb-input validation list. An empty value is valid unless required is set.

<jb-mobile-input required="Mobile number is required"></jb-mobile-input>

const isValid = document.querySelector('jb-mobile-input').reportValidity();

Slots

Inherited from jb-input.

| slot | description | | --- | --- | | inline-start | Content rendered before the native input. | | inline-end | Content rendered after the native input. |

CSS parts and custom style

Inherited CSS parts from jb-input:

| part | description | | --- | --- | | label | The label element. | | control | The wrapper around slots and inner input. | | input | The inner native input. | | message | The helper or validation message element. |

jb-mobile-input adds one CSS variable:

| CSS variable name | description | | --- | --- | | --jb-mobile-input-input-direction | Direction of the inner input text. Default is ltr. |

All other styling is inherited from jb-input.

Related Docs

• See jb-mobile-input/react if you want to use this component as a React component.
• See jb-input for inherited input behavior, events, validation, slots, and styling.
• See All JB Design System Component List for more components.
• Use Contribution Guide if you want to contribute to this component.

AI agent notes

• Import jb-mobile-input once before using <jb-mobile-input>.
• Use this component for Iranian mobile numbers; use jb-input for generic text.
• Read value for normalized 09xxxxxxxxx data and displayValue for formatted display text.
• Do not add custom formatting logic for Persian digits, spaces, or missing 09; the component already standardizes these.
• Use required, error, and validation.list through the inherited jb-input validation API.
• Style with inherited jb-input CSS variables/parts plus --jb-mobile-input-input-direction.
• This package includes custom-elements.json and points to it with the package.json customElements field. The field is documented by the Custom Elements Manifest project in Referencing manifests from npm packages.
• In custom-elements.json, exports.kind: "js" describes JavaScript/TypeScript exports and exports.kind: "custom-element-definition" maps the jb-mobile-input tag name to JBMobileInputWebComponent.