Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/rijvi-mahmud/shaddy/llms.txt

Use this file to discover all available pages before exploring further.

PhoneInputField wraps the PhoneInput UI component inside ShaddyForm’s form context, providing a ready-to-use international phone number input. It renders a country-code selector alongside a formatted number input, calls field.onChange with the full E.164-formatted phone string, and shows validation errors automatically via <FormMessage>.

​
Installation

Install all ShaddyForm fields at once with the shaddy-form registry item: 
npx shadcn@latest add https://shaddy-docs.vercel.app/r/shaddy-form

​
Usage

"use client"
import { z } from "zod"
import { ShaddyForm } from "@/components/form/shaddy-form"
import { PhoneInputField } from "@/components/form/fields/phone-input-field"
import { SubmitButton } from "@/components/form/fields/submit-button"

const schema = z.object({
  phone: z
    .string()
    .min(7, { message: "Please enter a valid phone number" }),
})

type FormValues = z.infer<typeof schema>

const initialValues: FormValues = { phone: "" }

export default function Example() {
  return (
    <ShaddyForm
      schema={schema}
      initialValues={initialValues}
      onSubmit={(data) => console.log(data)}
    >
      <div className="space-y-4 w-80">
        <PhoneInputField<FormValues>
          name="phone"
          label="Phone Number"
          required
        />
        <SubmitButton label="Continue" />
      </div>
    </ShaddyForm>
  )
}

​
Props

​
name
Path<T>
required
The field name. Must match a key in your Zod schema passed to ShaddyForm.
​
label
string
Label text rendered above the phone input. Omit to hide the label.
​
required
boolean
default:"false"
When true, appends a red asterisk to the label as a visual indicator.
​
disabled
boolean
default:"false"
Disables the underlying PhoneInput component when true.
​
className
string
Additional CSS classes applied to the outermost FormItem wrapper.

​
Notes

  • The value stored in the form state is the full phone string produced by the PhoneInput component (typically E.164 format, e.g. +14155552671).
  • Phone number format validation should be handled in your Zod schema — for example using a regex or a library such as libphonenumber-js.
  • PhoneInputField must be rendered inside a <ShaddyForm> — it reads control from useFormContext internally.

Build docs developers (and LLMs) love

Get started for freeTalk to us