Password Field
PasswordField is a specialized reusable input component for Shaddy Form.
PasswordField is a specialized reusable input component for Shaddy Form. It supports labels, required state, password visibility toggle, custom icons, and more. Use it inside a Shaddy Form to collect password input with validation.
Installation
pnpm dlx shadcn@latest add https://shaddy-docs.vercel.app/r/password-field
Props
| Name | Type | Default | Description |
|---|---|---|---|
name | string (from react-hook-form Path) | required | The field name (must match your form schema). |
label | string | The label displayed above the input. | |
placeholder | string | "Enter password" | Placeholder text for the input. |
required | boolean | false | Marks the field as required. |
className | string | Additional CSS classes for the field container. | |
icon | boolean | true | Whether to show the password visibility toggle icon. |
showIcon | ReactNode | <Eye /> | Icon to display for "show password". |
hideIcon | ReactNode | <EyeOff /> | Icon to display for "hide password". |
Usage
<ShaddyForm>
<PasswordField
name="password"
label="Password"
required
placeholder="Enter your password"
/>
</ShaddyForm>