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.

PasswordField is a specialised text input for collecting passwords inside ShaddyForm. It renders a shadcn/ui Input set to type="password" by default and includes a built-in visibility toggle button on the right side. Clicking the toggle switches the input between masked and plain-text modes. The toggle icons are fully replaceable, and the toggle itself can be hidden if you prefer a plain password input.

​
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 { PasswordField } from "@/components/form/fields/password-field"
import { SubmitButton } from "@/components/form/fields/submit-button"

const schema = z.object({
  password: z
    .string()
    .min(6, { message: "Password must be at least 6 characters" }),
  confirmPassword: z.string(),
}).refine((data) => data.password === data.confirmPassword, {
  message: "Passwords do not match",
  path: ["confirmPassword"],
})

type FormValues = z.infer<typeof schema>

const initialValues: FormValues = { password: "", confirmPassword: "" }

export default function Example() {
  return (
    <ShaddyForm
      mode="onChange"
      schema={schema}
      initialValues={initialValues}
      onSubmit={(data) => console.log(data)}
    >
      <div className="space-y-4 w-72">
        <PasswordField<FormValues>
          name="password"
          label="Password"
          required
          placeholder="Enter your password"
        />
        <PasswordField<FormValues>
          name="confirmPassword"
          label="Confirm Password"
          required
          placeholder="Re-enter your password"
        />
        <SubmitButton label="Register" />
      </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 input. Omit to hide the label.
​
placeholder
string
default:"'Enter password'"
Placeholder text shown inside the input when it is empty.
​
required
boolean
default:"false"
When true, appends a red asterisk to the label as a visual indicator.
​
icon
boolean
default:"true"
When true (the default), the visibility toggle button is rendered on the right side of the input. Set to false to render a plain password input without a toggle.
​
showIcon
ReactNode
default:"<Eye size={18} />"
The icon rendered inside the toggle button when the password is currently hidden (i.e., clicking it will reveal the password).
​
hideIcon
ReactNode
default:"<EyeOff size={18} />"
The icon rendered inside the toggle button when the password is currently visible (i.e., clicking it will mask the password).
​
className
string
Additional CSS classes applied to the outermost FormItem wrapper.

​
Notes

  • The visibility toggle button uses tabIndex={-1} so it does not interfere with keyboard tab navigation through the form.
  • The toggle button carries an aria-label of "Show password" or "Hide password" depending on the current state, keeping the control accessible.
  • Password validation (length, complexity, etc.) is handled entirely by your Zod schema — PasswordField makes no assumptions about rules.
  • PasswordField must be rendered inside a <ShaddyForm> — it reads control from useFormContext internally.

Build docs developers (and LLMs) love

Get started for freeTalk to us