FormComponentsPhone Input Field

Phone Input Field

PhoneInputField is reusable phone number taking input.

PhoneInputField is a reusable input component for Shaddy Form, designed for collecting and validating phone numbers. It integrates with react-hook-form and supports labels, required state, and disabled state.

Installation

pnpm dlx shadcn@latest add https://shaddy-docs.vercel.app/r/phone-input-field

Props

NameTypeDefaultDescription
namestring (from react-hook-form Path)requiredThe field name (must match your form schema).
labelstringThe label displayed above the input.
requiredbooleanfalseMarks the field as required.
disabledbooleanfalseDisables the input when true.
classNamestringAdditional CSS classes for the field.

Usage

<ShaddyForm>
  <PhoneInputField
    name="phone"
    label="Phone Number"
    required
    placeholder="Enter your phone number"
  />
</ShaddyForm>

Notes

  • PhoneInputField uses the PhoneInput component for formatting and validation.
Password FieldSelect Field