The last password field you'll ever need for Framer.
Building a secure, user-friendly, and theme-aligned password field is tough. Password Input Pro is a production-ready component that gives you complete control without the headache. It features a show/hide toggle, live validation feedback, and seamless integration with your native forms to create a pixel-perfect, secure sign-up experience.
What’s Included:
PasswordInput.tsx: The customizable, feature-packed code component.
FormValidityOverrides.tsx: A tiny shared store and a suite of code overrides to effortlessly sync your entire form.
Key Features:
Live Strength Feedback: Guide your users in real-time with a segmented progress bar and a detailed validation checklist that shows exactly what they need to do.
Fully Themeable: Forget custom CSS. Style every element (colors, fonts, radius, and padding) directly from the properties panel using your existing Framer design tokens.
Built-in Icon Support: Choose between two of the most popular icon libraries, Phosphor and Lucide, right from a dropdown. Simply type the icon name (e.g., "Eye", "EyeSlash") and you're set.
Powerful Validation Rules: Enforce any password policy with simple toggles for minimum length, uppercase, lowercase, numbers, and special characters. Need more? Use the two custom regex slots for advanced requirements.
Seamless Form Gating: Effortlessly disable your native Submit button until every field in your form (First Name, Email, Password, etc.) is filled and valid. No complex wiring, no backend code required.
Get Started in 60 Seconds:
Copy Components: Open the included Framer file and copy the PasswordInput.tsx & FormValidityOverrides.tsx code files into your own project's /code directory.
Drag & Drop: Drag the PasswordInput component onto your canvas.
Style It: Use the properties panel on the right to connect your project's color and font tokens.
Set Up Icons: Choose your library (Phosphor or Lucide) and type the icon names. Important: For the icons to appear, add the corresponding package (phosphor-react or lucide-react) in Assets > Code > Dependencies.
Set Validation Rules: Configure your password policy with the built-in toggles.
Connect Your Form: Apply the included overrides from FormValidityOverrides.tsx to your native Framer input fields:
useFirstName → Apply to your First Name input.
useLastName → Apply to your Last Name input.
useEmail → Apply to your Email input.
Gate Your Submit Button:
Apply the useSubmitGate override to your native Submit button. It will now automatically switch between your "Default" and "Disabled" variants.
On the PasswordInput component, set the useSharedStore property to true. This automatically syncs its value and validity with the rest of the form. That's it!
How The Form Overrides Work:
The included FormValidityOverrides.tsx file creates a tiny shared store that keeps all your fields in sync.
Field Overrides: useFirstName, useLastName, and useEmail are simple overrides you apply to your native input components to connect them to the store.
Submit Gate: useSubmitGate is the hero. It watches the entire store and only enables your Submit button when every single field is filled out and valid. It also prevents clicks when disabled for a truly robust user experience.
Features & Props:
Core:
placeholder, name, initialValue (strings)
showToggle, showProgressBar, showChecklist, useShortLabels (booleans)
useSharedStore (boolean): The easiest way to connect to the form overrides.
Styling:
font (Framer Font control), fontSize, checklistFontSize
radius, paddingX, paddingY
bgColor, textColor, borderColor, focusBorderColor, iconColor
barOkColor, barNeutralColor, checklistOkColor, checklistNeutralColor
Icons:
iconLibrary: "Phosphor" or "Lucide"
iconSize, showIconName, hideIconName, phosphorWeight, lucideStrokeWidth
Validation:
minLength, requireUppercase, requireLowercase, requireNumber, requireSpecial
specialCharset: Define your own set of special characters.
custom1Label, custom1Short, custom1Regex: For advanced custom rules.
custom2Label, custom2Short, custom2Regex
FAQ:
Q: Do I need to write code to use this?
A: No. Setup is done entirely through the properties panel. Just drag the component, apply the pre-written overrides to your inputs, and you're set.
Q: Do I need to install anything for the icons to work?
A: Yes. After choosing your icon library (Phosphor or Lucide) in the properties panel, you must add the corresponding package name (phosphor-react or lucide-react) in Assets > Code > Dependencies. If the package is missing, a fallback icon is safely displayed so your site won't crash.
Q: Can I change the password policy later?
A: Yes. Just change the toggles or update the custom regex rules in the properties panel at any time.
For any issues or questions, please reach out to: abhonkarharsh12@gmail.com
Harsh Abhonkar
