PasswordInput

free

PasswordInput wraps Input with a visibility toggle button that switches between password and text input types.

Preview

Dark

import PasswordInput from '@/components/composites/PasswordInput';

export default function UsageDemo() {
  return (
    <div>
      <PasswordInput
        placeholder="Enter password"
        onVisibleChange={(visible) => {
          console.log(visible);
        }}
      />
    </div>
  );
}

Installation

Add this component with the NateUI CLI.

npx nateui@latest add PasswordInput

Examples

Custom Icons

Preview

Dark

import { PiLockKey, PiLockKeyOpen } from 'react-icons/pi'
import PasswordInput from '@/components/composites/PasswordInput';

export default function CustomIconsDemo() {
  return (
    <div>
      <PasswordInput
        placeholder="Enter password"
        icons={{
          show: <PiLockKey className="text-base" />,
          hide: <PiLockKeyOpen className="text-base" />,
        }}
      />
    </div>
  );
}

API

Prop	Description	Type	Default
`onVisibleChange`	Callback when the visibility icon is clicked, receiving the new visible state.	`(visible: boolean) => void`	—
`icons`	Custom icons for the show and hide states.	`{ show?: ReactNode; hide?: ReactNode }`	—
`placeholder`	Placeholder text.	`string`	—
`disabled`	Disables the input.	`boolean`	`false`
`size`	Layout size variant.	`'sm' \| 'default' \| 'lg'`	`'default'`