UI Bloom

Password Input

This component is specifically designed for securely entering passwords. It includes built-in functionality to toggle password visibility, allowing users to show or hide the entered text. The component features a login icon and an eye icon (open/closed) that users can click to switch between masked and visible password states, enhancing both usability and security.

How To Use

Using this component is as simple as working with any standard input field in a form. After installation, import the component and place it within your form structure.

Usage Restriction

This component is designed to work exclusively within the Form component provided by shadcn/ui. Make sure you wrap it inside a valid Form context to ensure proper functionality.

Update global.css

Add the following CSS to your global or main stylesheet. It is used to hide the default eye icon that appears in the native password field, ensuring full control over custom visibility toggles.

/* hide default eye icon on password field  */
input[type='password']::-ms-reveal,
input[type='password']::-ms-clear,
input[type='password']::-webkit-contacts-auto-fill-button,
input[type='password']::-webkit-credentials-auto-fill-button {
display: none;
}

Install

Run this command in your terminal to install the component:

Import

You can now import this component anywhere you need to use it.

import { PasswordInput } from '@/components/ui/bloom/password-input';

Use

Replace the Input component with this component inside the FormField.

<FormField
  control={form.control}
  name="password"
  render={({ field }) => (
    <FieldRenderer label="Password">
      <PasswordInput placeholder="password" {...field} />
    </FieldRenderer>
  )}
/>

Preview

Open in

Accepted Props

This component accepts all standard input props except for the type prop. The type is internally managed by the component to ensure correct functionality (e.g., for password visibility toggling or other controlled behaviors).

Dependencies

  • Form: This component relies on the Form component from shadcn/ui for proper integration with form handling and submission. View Form Documentation

Previous

Logical Pagination

Next

React Select Input

On this page