shuip

Input Field

A form field input designed to be used with react-hook-form and Zod for validation. It combines a label, input, error handling, and optional description into a single reusable component.

Installation

npx shadcn@latest add https://shuip.xyz/r/input-field.json

Preview

Your name

Less verbose code in forms

<FormField
control={form.control}
name="email"
render={({ field }) => (
  <FormItem>
    <FormLabel>Email</FormLabel>
    <FormControl>
      <Input placeholder="your@email.com" {...field} />
    </FormControl>
    <FormDescription>
      Your email address
    </FormDescription>
    <FormMessage />
  </FormItem>
)}
/>

With InputField, the same result in a single line:

<InputField 
    register={form.register('email')} 
    label="Email" 
    description="Your email address"
    placeholder="your@email.com" 
/>

Built-in features

  • Automatic type handling: Native support for text, password, number
  • Visibility toggle: Automatic eye/eye-off button for password fields
  • Zod validation: Native integration with react-hook-form and Zod
  • Error display: Responsive error messages (hidden on mobile at top, shown at bottom)
  • Automatic conversion: number fields automatically convert values

react-hook-form integration

The component is specifically designed for react-hook-form:

const form = useForm({
    defaultValues: { name: '', age: 0 },
    resolver: zodResolver(schema),
});


// Direct usage with form register
<InputField register={form.register('name')} label="Name" />
<InputField register={form.register('age')} label="Age" type="number" />

Examples

Default

Your name

Props

NameTypeDescription
registerUseFormRegisterReturnreact-hook-form register function result
labelstringLabel displayed above the field
descriptionstring?Optional description below the field
typestring?HTML field type (text, password, email, number...)
...propsInputPropsAll shadcn/ui Input props