Form

Password

Password input built on Input with a visibility toggle button in the end-adornment slot.

Import

import { Password } from "@zephora/react";

Click the eye button to reveal or hide the value.

<Password placeholder="Enter password" />

<Password defaultVisible defaultValue="hunter2" />

All Input props (size, invalid, fullWidth…) work on Password too.

<Password invalid defaultValue="123" size="lg" />

Prop	Type	Default	Description
`defaultVisible`	`boolean`	`false`	Whether the password starts revealed (uncontrolled).
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Control height / typography scale (inherited from Input).
`invalid`	`boolean`	`false`	Marks the field invalid: sets aria-invalid and error styling.
`startAdornment`	`ReactNode`	—	Element rendered before the input. The end slot is reserved for the toggle.
`unstyled`	`boolean`	`false`	Headless mode — drops Zephora classes so your own CSS can style it.
`…rest`	`Omit<InputProps, "type" \| "endAdornment">`	—	All remaining Input props and native input props are forwarded.