Forms

Password input

A password field with a reveal toggle and an optional strength meter.

Client componentSource

Import

import { PasswordInput } from '@the_viveksingh/vivek-ui'

With a reveal toggle

The toggle is a button with a real accessible name, and the visibility state is controllable if you need to reset it on submit.

<PasswordInput placeholder="Your password" autoComplete="current-password" />
<PasswordInput size="sm" defaultVisible defaultValue="already visible" />
<PasswordInput invalid defaultValue="short" />

Strength and rules

You supply the rules, so the policy lives in your code rather than in the library. Each one shows pass or fail as the user types, which beats a single "too weak" verdict. Note that `test` is a function: the component holding these rules must be a Client Component, since a function cannot cross the server boundary.

Password strength: Fair. 2 of 4 requirements met.

  • At least 12 characters — not met
  • Upper and lower case — met
  • At least one digit — met
  • At least one symbol — not met

At least 12 characters, mixed case, and a digit.

<Field label="Choose a password" help="At least 12 characters, mixed case, and a digit.">
  <PasswordInput
    strength
    rules={[
      { id: 'length', label: 'At least 12 characters', test: (v) => v.length >= 12 },
      { id: 'case', label: 'Upper and lower case', test: (v) => /[a-z]/.test(v) && /[A-Z]/.test(v) },
      { id: 'digit', label: 'At least one digit', test: (v) => /\d/.test(v) },
    ]}
  />
</Field>

Props

Generated from the package's own type declarations, so this table cannot drift from the code.

Props for PasswordInput
PropTypeDefaultDescription
size'sm' | 'md' | 'lg'——
invalidboolean—Sets `aria-invalid` on the input. Injected by `Field`.
valuestring—Controlled value.
defaultValuestring—Uncontrolled initial value.
onValueChange(value: string) => void—Called with the new value on every edit, in both modes.
strengthboolean—Show the strength meter. Uses `rules` when given, otherwise a built-in set.
rulesPasswordRule[]—The requirements to check and list. Also drives the meter.
visibleboolean—Controlled reveal state.
defaultVisibleboolean—Initial reveal state while uncontrolled. Default `false`.
onVisibleChange(visible: boolean) => void——
showLabelstring—Accessible name for the toggle while hidden. Default `'Show password'`.
hideLabelstring—Accessible name for the toggle while shown. Default `'Hide password'`.

Every remaining prop is spread onto the root element, so all standard HTML and ARIA attributes work. className and style are merged with the library's own, never replaced, and the ref forwards to the root DOM node.

Rendering