All components (204)
Password
Fields · PasswordField
What it is and when to use it
The password, with the eye to see it. The name of the button states the state, not just the action: "Show password" when it is hidden and "Hide password" when it is visible, because someone who cannot see the screen needs to know whether they are typing it uncovered.
When to use it
- To sign in, as it is: it carries
autocomplete="current-password"and the password manager fills in the saved one. - To create or change it, with
newPassword(autocomplete="new-password", and the manager offers to generate one) andshowStrength: a four-segment bar and the level in writing, with a tip ("Strength: Weak. With 12 characters or more it gets much stronger"). viewLabelandhideLabelchange the two names of the eye.
When not to
- A one-time code (the SMS or email one):
CodeField. - A discount code:
CouponField.
Keyboard: Tab reaches the field and then the eye; Enter or Space on the eye reveal or hide the password.
Accessibility: the label is mandatory; the help and the error are read as a description. The strength level is seen with each key, but is announced when typing stops (after 700 ms), not with every keystroke. The meter is a rough aid (length and variety): whoever decides whether a password is good is the server.
Fine-tuning: no variables of its own: it uses those of the field (--amset-field-*) and is adjusted with the classes amset-password__strength, amset-password__bars, amset-password__segment and amset-password__level.
What it looks like
<PasswordField label="New password" newPassword showStrength hint="At least 12 characters" />
<PasswordField label="Password" error="The password is incorrect. You have 2 attempts left." />Props
Import it with import { PasswordField } from '@amset/ui'. Required props are marked.
| Prop | Type | What it does |
|---|---|---|
labelrequired | string | — |
className | string | — |
defaultValue | string | — |
disabled | boolean | — |
error | string | — |
front | ReactNode | Content in front of the text: an icon, as in the text field. BEHIND is not possible, and it is not an oversight: that is where the eye goes, which is part of the component. |
hideLabel | string | — |
hint | string | — |
inputRef | Ref<HTMLInputElement> | The real password `<input>`, to focus it, select its text or measure it from outside. It is separate from `ref` because the component paints a box with label, hint and error, and whoever asks for a ref almost always wants the control. |
invalid | boolean | — |
newPassword | boolean | New password (sign-up or change): changes the `autocomplete` so the password manager offers to generate one instead of filling in the usual one. |
onChange | (value: string) => void | — |
onChangeEvent | (event: ChangeEvent<HTMLInputElement>) => void | Like `onChange`, but with the native event of the `<input>`: `e.target.value`, `e.currentTarget`... It exists to migrate a front end that already writes its handlers with the event (AMS-735). If you only want the text, `onChange` already gives it to you. |
placeholder | string | — |
readOnly | boolean | — |
required | boolean | — |
showStrength | boolean | Strength bar while typing. For sign-ups and password changes. |
size | "sm" | "md" | "lg" | — |
validationBehavior | "aria" | "native" | `aria` (the default) announces the state without the browser interrupting submission with its bubble; `native` also adds its own validation. |
value | string | — |
variant | FieldVariant | — |
viewLabel | string | — |
It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.
In the test bench
Every state and variant, to try one at a time, on its page at ui.amset.tech: