Component reference
PasswordInput
A password field in an application-owned sign-in form.
Preview
Live previewOptional six-digit hex. Clear to restore the preset. Check contrast with your brand color.
Changes apply to this preview only.
Width adapts to the available space
"use client";
import { useState } from "react";
import { Input, PasswordInput, Button, Badge } from "@pimolu/react";
function SignInForm() {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [submitted, setSubmitted] = useState(false);
const passwordIsValid = password.length >= 8;
return (
<form
className="grid gap-5 min-w-0"
onSubmit={(event) => {
event.preventDefault();
setSubmitted(true);
}}
>
<Input
label="Work email"
type="email"
placeholder="you@company.com"
autoComplete="email"
value={email}
onValueChange={setEmail}
required
/>
<PasswordInput
label="Password"
placeholder="Enter your password"
autoComplete="current-password"
value={password}
onValueChange={(nextValue) => {
setPassword(nextValue);
setSubmitted(false);
}}
description="At least 8 characters."
error={submitted && !passwordIsValid
? "Use at least 8 characters."
: undefined}
required
/>
<div className="flex flex-wrap items-center gap-3 min-w-0">
<Button type="submit" disabled={!email || !password}>Sign in</Button>
<Badge
variant={submitted && passwordIsValid
? "success"
: "neutral"}
>
{
submitted && passwordIsValid
? "Credentials accepted"
: "Not signed in"
}
</Badge>
</div>
</form>
);
}
export function DemoExample() {
return (<SignInForm />);
}More examples
Different configurations and compositions using the real Pimolu API. Each preview runs independently and follows the site appearance.
Anatomy
A visible label, an optional description and the eye toggle.
Sizes
From xs to xxl, matching the Input scale.
Validation
An error message marks the field invalid, replaces the description and is announced as an alert.
Usage
Keep authentication and password validation on the server; visibility is a local preference.
API reference
Generated from the public TypeScript declarations. Native HTML attributes are inherited where the component extends them; this reference includes Pimolu props and selected common native attributes.
PimoluPasswordInputProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
value | string | undefined | — | Controlled value. |
defaultValue | string | undefined | — | Initial value when uncontrolled. |
onValueChange | ((value: string) => void) | undefined | — | Called with the next value on every keystroke. |
size | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | undefined | "md" | Field size. Defaults to "md". |
label | string | undefined | — | Visible field label. |
description | string | undefined | — | Helper text shown below the field when there is no error. |
error | string | undefined | — | Error message; marks the field invalid and replaces the description. |
invalid | boolean | undefined | false | Marks the field invalid without an error message. |
showLabel | string | undefined | "Show password" | Accessible name of the toggle while the password is hidden. |
hideLabel | string | undefined | "Hide password" | Accessible name of the toggle while the password is visible. |
fullWidth | boolean | undefined | false | Stretch the field to the width of its container. |
containerClassName | string | undefined | — | Class applied to the root wrapper. |
placeholder | string | undefined | — | Public Pimolu prop; see the source declaration for details. |
autoComplete | string | undefined | — | Public Pimolu prop; see the source declaration for details. |
onChange | ChangeEventHandler<HTMLInputElement, HTMLInputElement> | undefined | — | Standard React/HTML attribute. |
className | string | undefined | — | Standard React/HTML attribute. |
style | CSSProperties | undefined | — | Standard React/HTML attribute. |
aria-label | string | undefined | — | Defines a string value that labels the current element. |
children | ReactNode | — | Standard React/HTML attribute. |
onClick | MouseEventHandler<HTMLInputElement> | undefined | — | Standard React/HTML attribute. |
disabled | boolean | undefined | false | Standard React/HTML attribute. |
name | string | undefined | — | Standard React/HTML attribute. |
required | boolean | undefined | false | Standard React/HTML attribute. |
valuestring | undefinedNo default extracted.
Controlled value.
defaultValuestring | undefinedNo default extracted.
Initial value when uncontrolled.
onValueChange((value: string) => void) | undefinedNo default extracted.
Called with the next value on every keystroke.
size"xs" | "sm" | "md" | "lg" | "xl" | "xxl" | undefinedDefault: "md"
Field size. Defaults to "md".
labelstring | undefinedNo default extracted.
Visible field label.
descriptionstring | undefinedNo default extracted.
Helper text shown below the field when there is no error.
errorstring | undefinedNo default extracted.
Error message; marks the field invalid and replaces the description.
invalidboolean | undefinedDefault: false
Marks the field invalid without an error message.
showLabelstring | undefinedDefault: "Show password"
Accessible name of the toggle while the password is hidden.
hideLabelstring | undefinedDefault: "Hide password"
Accessible name of the toggle while the password is visible.
fullWidthboolean | undefinedDefault: false
Stretch the field to the width of its container.
containerClassNamestring | undefinedNo default extracted.
Class applied to the root wrapper.
placeholderstring | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
autoCompletestring | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
onChangeChangeEventHandler<HTMLInputElement, HTMLInputElement> | undefinedNo default extracted.
Standard React/HTML attribute.
classNamestring | undefinedNo default extracted.
Standard React/HTML attribute.
styleCSSProperties | undefinedNo default extracted.
Standard React/HTML attribute.
aria-labelstring | undefinedNo default extracted.
Defines a string value that labels the current element.
childrenReactNodeNo default extracted.
Standard React/HTML attribute.
onClickMouseEventHandler<HTMLInputElement> | undefinedNo default extracted.
Standard React/HTML attribute.
disabledboolean | undefinedDefault: false
Standard React/HTML attribute.
namestring | undefinedNo default extracted.
Standard React/HTML attribute.
requiredboolean | undefinedDefault: false
Standard React/HTML attribute.
Accessibility
- Preserve autocomplete and label the reveal action without exposing the secret in feedback.