Form fields·loomora/PhoneInput
PhoneInput
Combines country calling-code selection, country metadata, and a text field into a structured phone input.
Interactive live playground
Tweak props, change states, and see the live component respond in real time.
How to call
Import directly from the Loomora package root. For projects without Tailwind CSS, ensure loomora/dist/index.css is imported once in your root layout.
import { PhoneInput } from 'loomora'
<PhoneInput label="Phone" properties={{
defaultCountry: 'OM', value, setValue: ({ value }) => setValue(value),
}} />API reference
Important public props and how they affect rendering.
| Prop | Type | Default | Description |
|---|---|---|---|
| properties.value | string | — | Controlled local phone number. |
| properties.setValue | (phone: PhoneValue) => void | — | Receives structured country code and phone values. |
| properties.defaultCountry | CountryType | — | Initial country calling code. |
| properties.country | CountryType | — | Controlled selected country. |
| worldwide | boolean | true | Allows selecting from the worldwide country list. |
| showCountriesName / showCountriesFlags | boolean | true | Controls country option decorations. |