Yami UI

A password input with show and hide toggle.

Installation

Add the password input component with the shadcn CLI.

npx shadcn@latest add https://yami.ui.unsanity.ai/r/password-input.json

Usage

import { PasswordInput } from "@/components/ui/password-input"

<PasswordInput placeholder="Enter password" />

Examples

Default

Code

import { PasswordInput } from "@/components/ui/password-input"

<PasswordInput placeholder="Enter password" />

In a form field

Password

Code

import { Label } from "@/components/ui/label"
import { PasswordInput } from "@/components/ui/password-input"

<div className="flex flex-col gap-1.5">
  <Label htmlFor="password">Password</Label>
  <PasswordInput id="password" placeholder="Min. 8 characters" />
</div>

Disabled

Code

import { PasswordInput } from "@/components/ui/password-input"

<PasswordInput placeholder="Disabled" disabled />