Forms

PhoneInput

Combines localized country metadata, calling codes, formatting, validation, and E.164 output.

View preview API reference View in Figma

FrameworksAstro · React · Elements

Registry commandlumen add PhoneInput

InteractionNative markup

Design sourceLinked component node

See it and copy it

Framework example

Choose Astro, React, or Elements to compare native usage against the shared visual output. Each example assumes the framework-level setup is already complete.

Phone number

Small

Large

Framework usage

Switch targets to compare the adapter code. The preview stays visually stable because all three packages share the same tokens and ui-* class contract.

---
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>
  </>
)

<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>

Edit PhoneInput in browser

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-astro

pnpm add @santi020k/lumen-astro

lumen add PhoneInput

lumen add PhoneInput

pnpm add @santi020k/lumen-react

pnpm add @santi020k/lumen-react

lumen add PhoneInput --target react

lumen add PhoneInput --target react

pnpm add @santi020k/lumen-elements

pnpm add @santi020k/lumen-elements

lumen add PhoneInput --target elements

lumen add PhoneInput --target elements

API 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? }>	International metadata	Overrides the generated country choices for legacy or specialized forms.
countryOptions	LumenPhoneCountry[]	Generated metadata	Overrides localized country metadata while retaining formatting and E.164 behavior.
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	ISO region or calling code	"US"	Selects the initial country by region or calling code.
locale	string \| string[]	Runtime locale	Localizes generated country names.
name	string	"phone"	Sets the name of the telephone number input.
placeholder	string	"Phone number"	Sets the placeholder for the number input.
value / onValueChange	LumenPhoneNumber / callback	Uncontrolled	Controls formatted national input and exposes validity plus E.164 in React.
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.