# Input Password > Section: Atoms A password input with visibility toggle. Source: https://design.formance.com/docs/components/input-password **Example — `input-password`:** ```tsx 'use client'; import { useState } from 'react'; import { InputPassword } from '@/registry/default/ui/input-password'; export default function InputPasswordDemo() { const [value, setValue] = useState('supersecret'); return (

setValue(e.target.value)} placeholder="Enter password" />

); } ``` ## Installation CLI Manual ```bash npx shadcn@latest add @formance/input-password ``` Install the following dependencies: ```bash npm install lucide-react ``` Copy and paste the following code into your project. **Source — `input-password.tsx`:** ```tsx 'use client'; import * as React from 'react'; import { cva, type VariantProps } from 'class-variance-authority'; import { EyeIcon, EyeOffIcon } from 'lucide-react'; import { cn } from '@/lib/utils'; import { Button } from '@/registry/default/ui/button'; import { Input } from '@/registry/default/ui/input'; const inputPasswordMaxWidthVariants = cva('', { variants: { maxWidth: { xs: 'max-w-24 md:max-w-32 lg:max-w-40', sm: 'max-w-32 md:max-w-64 lg:max-w-56', md: 'max-w-44 md:max-w-64 lg:max-w-96', lg: 'max-w-44 md:max-w-64 lg:max-w-120', xl: 'max-w-44 md:max-w-64 lg:max-w-165', }, }, }); type InputPasswordProps = Omit< React.InputHTMLAttributes, 'type' | 'size' > & VariantProps; function InputPassword({ className, maxWidth, ...props }: InputPasswordProps) { const [showPassword, setShowPassword] = React.useState(false); const disabled = props.value === '' || props.value === undefined || props.disabled; return (

{/* hides browsers password toggles */}

); } export { InputPassword }; ``` Update the import paths to match your project setup. ## Usage ```tsx import { InputPassword } from '@/components/ui/input-password' ``` ```tsx ```

Command Menu

Input Password

Installation#

Install the following dependencies:

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage#