- Add the Native Phone Number Input element to your mobile page and resize it to fit your layout. - Set Value if you want to control the phone number from Bubble.
- Value can be a local number, a full international number with a plus sign, or a full international number without a plus sign.
- Set Default country with a two-letter country code such as US, NG, GB, CA, AU, or IN.
- Use Country code if you want Bubble workflows or conditions to control the selected country.
- Enable Auto detect country if the plugin should detect the country from values like +2349033282017.
- Enable Auto detect without plus if values like 2349033282017 should also be treated as international numbers.
- Turn Auto detect without plus off if your users enter local numbers that may start with a country dial code.
- Enable Allow country picker if users should be able to choose a country.
- Choose Picker mode.
- Bottom sheet opens the country picker from the bottom of the screen.
- Dropdown opens the country picker near the input.
- Turn Show search on if users should be able to search by country name, country code, or dial code.
- Choose Validation mode.
- Strict checks country-specific length and number pattern where supported.
- Possible checks whether the number length is plausible for the selected country or fallback range.
- Use Minimum digits and Maximum digits as fallback validation for countries without embedded validation rules.
- Use the is valid state to know when the number passes the selected validation mode.
- Use the is possible state to know whether the number length is plausible.
- Use validation error to show or debug why a number is not valid.
- Use e164 number when saving phone numbers or sending them to APIs.
- Use country code, country name, dial code, country flag URL, and country flag emoji when you need selected-country details.
- Use the changed event to run workflows when the phone number changes.
- Use the country changed event when the user selects a different country.
- Use the validation changed event when the validity changes.
- Use the Set number, Set country, Clear, Focus, Blur, Open country picker, and Close country picker actions when controlling the input from workflows.