Documentation
Forms
PhoneInput
Pairs a country dial-code select with a telephone number input.
01
See it in context
Preview
02
Copy a working example
Usage
---
import { PhoneInput } from '@santi020k/lumen-astro'
const countries = [
{ label: '🇺🇸 +1', value: '+1' },
{ label: '🇬🇧 +44', value: '+44' },
{ label: '🇪🇸 +34', value: '+34' },
{ label: '🇨🇴 +57', value: '+57' },
{ label: '🇯🇵 +81', value: '+81' }
]
---
<div style="display: grid; gap: 0.75rem; max-width: 22rem;">
<label for="ex-phone">Phone number</label>
<PhoneInput
countries={countries}
countryValue="+1"
id="ex-phone"
name="phone"
placeholder="(555) 000-0000"
/>
<label for="ex-phone-sm">Small</label>
<PhoneInput
countries={countries}
countryValue="+44"
id="ex-phone-sm"
name="phone-sm"
placeholder="Mobile number"
size="sm"
/>
<label for="ex-phone-lg">Large</label>
<PhoneInput
countries={countries}
countryValue="+34"
id="ex-phone-lg"
name="phone-lg"
placeholder="Work number"
size="lg"
value="612 345 678"
/>
</div>---
import { PhoneInput } from '@santi020k/lumen-astro'
const countries = [
{ label: '🇺🇸 +1', value: '+1' },
{ label: '🇬🇧 +44', value: '+44' },
{ label: '🇪🇸 +34', value: '+34' },
{ label: '🇨🇴 +57', value: '+57' },
{ label: '🇯🇵 +81', value: '+81' }
]
---
<div style="display: grid; gap: 0.75rem; max-width: 22rem;">
<label for="ex-phone">Phone number</label>
<PhoneInput
countries={countries}
countryValue="+1"
id="ex-phone"
name="phone"
placeholder="(555) 000-0000"
/>
<label for="ex-phone-sm">Small</label>
<PhoneInput
countries={countries}
countryValue="+44"
id="ex-phone-sm"
name="phone-sm"
placeholder="Mobile number"
size="sm"
/>
<label for="ex-phone-lg">Large</label>
<PhoneInput
countries={countries}
countryValue="+34"
id="ex-phone-lg"
name="phone-lg"
placeholder="Work number"
size="lg"
value="612 345 678"
/>
</div>import { PhoneInput } from '@santi020k/lumen-react'
export const Example = () => (
<>
<div style={{ display: 'grid', gap: '0.75rem', maxWidth: '22rem' }}>
<label htmlFor="ex-phone">Phone number</label>
<PhoneInput
countries={countries}
countryValue="+1"
id="ex-phone"
name="phone"
placeholder="(555) 000-0000"
/>
<label htmlFor="ex-phone-sm">Small</label>
<PhoneInput
countries={countries}
countryValue="+44"
id="ex-phone-sm"
name="phone-sm"
placeholder="Mobile number"
size="sm"
/>
<label htmlFor="ex-phone-lg">Large</label>
<PhoneInput
countries={countries}
countryValue="+34"
id="ex-phone-lg"
name="phone-lg"
placeholder="Work number"
size="lg"
value="612 345 678"
/>
</div>
</>
)import { PhoneInput } from '@santi020k/lumen-react'
export const Example = () => (
<>
<div style={{ display: 'grid', gap: '0.75rem', maxWidth: '22rem' }}>
<label htmlFor="ex-phone">Phone number</label>
<PhoneInput
countries={countries}
countryValue="+1"
id="ex-phone"
name="phone"
placeholder="(555) 000-0000"
/>
<label htmlFor="ex-phone-sm">Small</label>
<PhoneInput
countries={countries}
countryValue="+44"
id="ex-phone-sm"
name="phone-sm"
placeholder="Mobile number"
size="sm"
/>
<label htmlFor="ex-phone-lg">Large</label>
<PhoneInput
countries={countries}
countryValue="+34"
id="ex-phone-lg"
name="phone-lg"
placeholder="Work number"
size="lg"
value="612 345 678"
/>
</div>
</>
)<script type="module">
import { defineLumenElements } from '@santi020k/lumen-elements/define'
defineLumenElements()
</script>
<div style="display: grid; gap: 0.75rem; max-width: 22rem;">
<label for="ex-phone">Phone number</label>
<lumen-phone-input
countries={countries}
countryValue="+1"
id="ex-phone"
name="phone"
placeholder="(555) 000-0000"></lumen-phone-input>
<label for="ex-phone-sm">Small</label>
<lumen-phone-input
countries={countries}
countryValue="+44"
id="ex-phone-sm"
name="phone-sm"
placeholder="Mobile number"
size="sm"></lumen-phone-input>
<label for="ex-phone-lg">Large</label>
<lumen-phone-input
countries={countries}
countryValue="+34"
id="ex-phone-lg"
name="phone-lg"
placeholder="Work number"
size="lg"
value="612 345 678"></lumen-phone-input>
</div><script type="module">
import { defineLumenElements } from '@santi020k/lumen-elements/define'
defineLumenElements()
</script>
<div style="display: grid; gap: 0.75rem; max-width: 22rem;">
<label for="ex-phone">Phone number</label>
<lumen-phone-input
countries={countries}
countryValue="+1"
id="ex-phone"
name="phone"
placeholder="(555) 000-0000"></lumen-phone-input>
<label for="ex-phone-sm">Small</label>
<lumen-phone-input
countries={countries}
countryValue="+44"
id="ex-phone-sm"
name="phone-sm"
placeholder="Mobile number"
size="sm"></lumen-phone-input>
<label for="ex-phone-lg">Large</label>
<lumen-phone-input
countries={countries}
countryValue="+34"
id="ex-phone-lg"
name="phone-lg"
placeholder="Work number"
size="lg"
value="612 345 678"></lumen-phone-input>
</div>03
Choose your target
Add this component
Choose the package for your runtime. All adapters share the Lumen stylesheet. Use the matching registry command when you want a local wrapper for that framework.
pnpm add @santi020k/lumen-astropnpm add @santi020k/lumen-astrolumen add PhoneInputlumen add PhoneInputpnpm add @santi020k/lumen-reactpnpm add @santi020k/lumen-reactlumen add PhoneInput --target reactlumen add PhoneInput --target reactpnpm add @santi020k/lumen-elementspnpm add @santi020k/lumen-elementslumen add PhoneInput --target elementslumen add PhoneInput --target elementsAPI reference
Lumen-specific props and runtime attributes for the Astro primitive. React props follow the same names; Elements use equivalent kebab-case attributes where custom elements expose them.
| Attribute | Values | Default | Description |
|---|---|---|---|
| countries | Array<string | { label, value, disabled? }> | [] | Populates the country dial-code select options. |
| countryName | string | "country" | Sets the name of the country dial-code select. |
| countryLabel | string | "Country code" | Sets the accessible label for the dial-code select. |
| countryValue | string | - | Selects the initial dial code by value. |
| name | string | "phone" | Sets the name of the telephone number input. |
| placeholder | string | "Phone number" | Sets the placeholder for the number input. |
| size | "default" | "sm" | "lg" | "default" | Controls the height and font size of both controls. |
| class, className | string | "" | Merges custom classes with the generated ui-* root classes. |
| ...native attributes | HTML attributes | - | Forwards standard attributes to the root element unless the component consumes them. |