WingoUI
Buttons & Actions
ButtonButton GroupCopy ButtonDelete ButtonTheme ToggleToggleToggle Group
Inputs
Avatar UploadCalendarCheckboxColor PickerComboboxCron PickerCurrency InputDate PickerDate Range PickerDate Time PickerDuration PickerFile UploadFilter BuilderInputInput GroupListboxMasked InputMention InputMonth PickerMulti SelectNumber InputOTP InputPassword InputPhone InputRadio GroupRatingSearch InputSegmented ControlSelectSignature PadSliderSwitchTag InputTextareaTime Picker
Forms
Address InputCSV ImportFieldForm WizardInline EditInvoice line itemsRich Text Editor
Navigation
Back To TopBounce SidebarBreadcrumbCommand MenuGlobal SearchGooey NavHook SidebarNav MenuNav TabsPaginationProximity SidebarScroll ProgressSidebarStepsTable Of ContentsTabsTopbarUser MenuWorkspace Switcher
Overlays
Alert DialogContext MenuDialogDrawerDropdown MenuFamily DrawerHover CardPopoverSheetShortcuts DialogTooltipTour
Feedback
AlertBannerCookie ConsentEmoji ReactionEmpty StateNotification BellNotification CenterProgressRoute ProgressSkeletonSpinnerToast
Data Display
Approval FlowAvatarBadgeCalendar ViewCode BlockComment ThreadContact cardCountdownDescription ListDiff ViewerFile ListFile managerFolderGanttJSON ViewerKbdLog ViewerMarkdownPresenceSchedulerTagTimelineTree View
Tables & Lists
Audit LogData TableDeal PipelineEditable GridKanbanListMembers tablePermissions MatrixTableTask ListVirtual List
Charts & Stats
Animated CounterArea chartBar chartDonut chartFunnel chartGaugeGitHub ActivityHeatmap calendarLeaderboardLine chartRadial barSparklineStat CardTrackerTrend badge
Layout
AccordionApp ShellCardCollapsibleDetail LayoutEntity HeaderPage HeaderScroll AreaSeparatorSettings LayoutSplit ViewToolbar
Media
Audio PlayerCarouselImage CropperImage LightboxLocation MapQR CodeStep PlayerVideo Player
AI Kit
Agent Status CardChat MessageChat ThreadConversation ListFluid OrbGrid RevealMatrix OrbModel PickerPrompt InputReasoning IndicatorRule BuilderSuggestion ChipsTool Call TimelineUsage MeterVoice InputWorkflow Canvas
Text & Effects
Gravity Letters
Mobile
Action SheetBottom Tab BarFABHaptic ButtonHero HeaderInstall PromptLarge Title HeaderNotification BannerOnboarding CarouselPicker WheelPull To RefreshSlide To ConfirmSticky CTA BarSwipe DeckSwipeable Tabs
Commerce
Cart drawerCategory pickerCheckout stepsCoupon inputFavorite buttonFilter panelListing cardListing gridOrder trackerPricePrice rangePricing tableProduct galleryQuantity stepperReviewsSeller card
Blocks
Admin Dashboard PageAdmin ShellAI Chat PageAutomation Builder PageCheckout PageCRM Contact PageCRM Pipeline PageError PagesInbox PageInvoice PageKPI DashboardListing Detail PageLogin PageMarketplace Home PageMarketplace Search PageMarketplace ShellMobile App HomeOnboarding FlowPost Listing WizardPricing PageRegister PageSettings PageUsers Admin Page
Hooks & Utilities
AI ChatChart kitCommerceDate utilsFile exportFile typesFiltersForm validationHapticsInvoicingMotion presetsNavigationNumber formatRelative timeRomanian locationsSpreadsheetText matchTonesUIProvideruseClipboarduseConsentuseControllableStateuseCooldownuseDebounceuseKeyboardInsetuseLocaleuseLongPressuseMediaControlsuseMediaQueryuseOverflowItemsusePersistedStateuseScrollEdgesuseScrollStateuseSelectionuseShortcutuseStickToBottom
GalleryThemeCredits

Inputs

Password Input

InputsPassword Input
OTP InputPhone Input
Live props
Field
label
description
error
required
disabled
invalid
readOnly
Content
placeholder
defaultValue
showLabel
hideLabel
capsLockLabel
strengthCaption
generateLabel
ruleMetLabel
ruleUnmetLabel
Appearance
size
variant
radius
accent
floatingLabel
Behavior
defaultVisible
showToggle
capsLockWarning
maxLengthNo limit
Strength
strength
showRules
generate
generateLength16
Code
import { PasswordInput } from "@/components/ui/password-input"

<PasswordInput />
Pro

v1.0.0·Added in 1.0.0

A password field with a caret-safe reveal toggle, a Caps Lock warning and, for sign-up, a strength meter, rules checklist and generator.

Tap the eye and the dots turn into text with the icon turning a quarter over; the caret and any selection stay exactly where they were, and the button stays in the Tab order. With Caps Lock on, a small amber warning slides in under the box and leaves when you release it or leave the field. With strength on, four bars fill left to right as you type, red, then amber, then green, with the verdict next to them, and a checklist opens on focus with each rule drawing its check the moment it is met; it stays open while there is text, so the submit button never jumps away under your finger. The wand fills a random 16-character password, reveals it until you leave the field and scores it Strong. On a phone both buttons have 44px hit areas, iOS never zooms and the checklist scrolls into view above the keyboard.

Add to a project

npx wingo-ui@latest add password-input

Pro item: the CLI needs a Pro account. See plans

Dependencies

motionlucide-reactinputfieldmotionuse-controllable-stateuse-media-queryui-config

Files

  • components/ui/password-input.tsx

See also

InputFieldOTP InputButton
PreviousOTP InputNext Phone Input

Sign in

Welcome back! Sign in to your account.

Forgot password?

No account? Create one for free

  • Tap the eye: the caret stays exactly where it was
  • With Caps Lock on you see “Caps Lock is on”