Phone Input

PhoneInput is an Input with a dialling-code picker on the left. The code and the number are two separate values: you hold the code in state and the number behaves like any input.

import { PhoneInput } from '@beyul/sulmu-ui'

Source · Figma

Examples

Basic

+975

import { PhoneInput } from '@beyul/sulmu-ui'
import { useState } from 'react'

const dialCodes = [
  { code: '+1', label: 'Canada' },
  { code: '+975', label: 'Bhutan' },
  { code: '+91', label: 'India' },
]

export default function Example() {
  const [code, setCode] = useState('+975')
  return (
    <div style={{ maxWidth: 320 }}>
      <PhoneInput
        aria-label="Phone"
        countries={dialCodes}
        countryCode={code}
        onCountryCodeChange={setCode}
        placeholder="17 123 456"
      />
    </div>
  )
}

Inside a Field

We only call about your booking.

import { Field, PhoneInput } from '@beyul/sulmu-ui'
import { useState } from 'react'

const dialCodes = [
  { code: '+1', label: 'Canada' },
  { code: '+975', label: 'Bhutan' },
]

export default function Example() {
  const [code, setCode] = useState('+1')
  return (
    <div style={{ maxWidth: 320 }}>
      <Field label="Phone" helperText="We only call about your booking.">
        <PhoneInput
          countries={dialCodes}
          countryCode={code}
          onCountryCodeChange={setCode}
          defaultValue="909-993-9177"
        />
      </Field>
    </div>
  )
}

Props

Prop	Type	Default	Description
`countryCode`*	`string`	-	The selected dialling code, e.g. "+1".
`onCountryCodeChange`	`((code: string) => void)`	-
`countries`*	`PhoneCountry[]`	-	Dialling codes to offer.
`size`	`"sm" \| "md" \| "lg"`	`md`	sm 36px, md 40px, lg 48px. Default: md.
`variant`	`"outline" \| "translucent"`	`outline`	outline (default) or translucent, for the search field on the page canvas.
`invalid`	`boolean`	-	Marks the value as wrong. Inside a Field this is set for you.
`rightElement`	`ReactNode`	-	Icon or short text after the value.
`rootClassName`	`string`	-	Class for the outer pill. `className` goes to the same element.

PhoneInput also accepts the props of Input except leftElement and type, and every native input attribute.

Countries

Field	Type	Description
`code`	`string`	Dialling code with the plus sign, e.g. `"+975"`.
`label`	`string`	Country name, read by screen readers and shown in the list.

Accessibility and usage

The picker is a native <select> labelled “Country code”, so it uses the platform’s own list on phones.
The input has type="tel", inputMode="tel" and autoComplete="tel-national".
countryCode is controlled: keep it in state and update it in onCountryCodeChange.