Text7 checks

FormPhone

Country picker and number, checked for the chosen country.

Example

Installation

bunx --bun shadcn@latest add @fieldkit/form-phone

Needs the @fieldkit registry. Add it once

Usage

Add the field to your schema

schema.ts

import { z } from "zod"import { phoneField } from "@/lib/field-schemas"
export const schema = z.object({  phone: phoneField({ defaultCountry: "KE", countries: ["KE", "UG", "TZ"] }),})

Render it inside a Form

The name prop matches the schema key.

example-form.tsx

import { Form } from "@/components/form/form"import { FormPhone } from "@/components/form/form-phone"import { FormSubmit } from "@/components/form/form-submit"import { FieldGroup } from "@/components/ui/field"import { schema } from "./schema"
export function ExampleForm() {  return (    <Form      schema={schema}      defaultValues={{ phone: "" }}      onSubmit={save}    >      <FieldGroup>        <FormPhone name="phone" />        <FormSubmit>Save</FormSubmit>      </FieldGroup>    </Form>  )}

Checks

CheckOptionError message

Valid for the countrydefaultEnter a valid number for Kenya, like 0712 123456

Default countrydefaultCountryNone

Allowed countriescountriesUse a number from Kenya, Uganda or Tanzania

Mobile onlymobileOnlyEnter a mobile number

Hide the country pickercountrySelect={false}None

Stores E.164defaultNone

SMS verificationverify={{ send, check }}That code is wrong. Check it or resend.

What gets saved

Typed, with Kenya picked	Saved
0712 345 678	`+254712345678`
712345678	`+254712345678`
+254 712 345 678	`+254712345678`
+256 772 123456	`+256772123456`

Long lists

Leave out countries to list all of them.

Best practices

Accept 0712, 712 and +254712, then save +254712345678
Search countries by name, ISO code or dial code
Virtualize the country list
Use type="tel" and autoComplete="tel"

Try these values

Terminal

phoneField({ defaultCountry: "KE", countries: ["KE", "UG"] })

Input	Result	Output
`"+254712345678"`	Valid	`"+254712345678"`
`"+256772123456"`	Valid	`"+256772123456"`
`"+255754123456"`	Invalid	Use a number from Kenya or Uganda
`"+25471"`	Invalid	Enter a valid number for Kenya, like 0712 123456
`""`	Invalid	Enter a valid number for Kenya, like 0712 123456

API reference

FormPhone

PropDescription

defaultCountryCountryCodeOverrides the schema's defaultCountry.

countriesArray<CountryCode>Overrides the schema's allowed countries.

countrySelectboolean = truePass false to lock the number to defaultCountry.

verify{ send, check }SMS code before submit.

Field frame

PropDescription

namestringKey in the schema. Also picks the preset label and autocomplete.

labelReact.ReactNodeOverrides the preset label. Pass null to hide it.

descriptionReact.ReactNodeHint under the control.

requiredbooleanOverrides the asterisk read from the schema.

fieldPropsFormFieldPropsProps for the wrapping Field, such as className.

Add the field to your schema

Render it inside a Form

FormPhone

Field frame

Search docs