PasswordInput

Tier: client

ImportCopy Anchor Link

import { PasswordInput } from '@nizivo/react/password-input';

// Once per app (Getting started), after
// @nizivo/tokens/tokens.css and @nizivo/react/css/base.css and @nizivo/react/css/input.css
import '@nizivo/react/css/password-input.css';

Static or interactiveCopy Anchor Link

Client. It always ships its client leaf, which reads its Field through FieldScope, so a page with a PasswordInput also loads FieldScope. The server HTML is a native password input that works before hydration; the toggle works once the page has hydrated. How to choose.

In a client app (a Vite or React Router single-page app, or a 'use client' file) it is an ordinary React component: event handlers, refs and state work as usual. In a client app.

The toggleCopy Anchor Link

The toggle is a button with a constant name, "Show password" (labels.toggle), and aria-pressed: a screen reader hears "Show password, toggle button, pressed" while the password shows. Its mark is the internal eye glyph while the password is hidden and eye-off while it shows; showIcon and hideIcon replace them. onVisibleChange(visible, details) reports each change, with details.reason 'toggle' or 'submit'.

Hidden again on submitCopy Anchor Link

When its form submits, the password turns back into a password field before the form's handler or action runs, so the plain text is not left on screen and a password manager sees a password field.

AutocompleteCopy Anchor Link

autoComplete is current-password by default, for signing in. Pass new-password where the user chooses one, so a password manager offers to generate it. Spell check and autocapitalisation are off.

ExamplesCopy Anchor Link

import type { JSX } from 'react';
import { Field } from '@nizivo/react/field';
import { PasswordInput } from '@nizivo/react/password-input';

export function PasswordInputExample(): JSX.Element {
  return (
    <form style={{ maxInlineSize: 320 }}>
      <Field name="password" label="Password" required>
        <PasswordInput />
      </Field>
    </form>
  );
}

import type { JSX } from 'react';
import { Field } from '@nizivo/react/field';
import { PasswordInput } from '@nizivo/react/password-input';

export function PasswordInputNewExample(): JSX.Element {
  return (
    <form style={{ maxInlineSize: 320 }}>
      <Field
        name="new-password"
        label="New password"
        description="At least 12 characters."
        required
        messages={{
          valueMissing: 'Enter a new password.',
          tooShort: 'Use at least 12 characters.',
        }}
      >
        <PasswordInput autoComplete="new-password" minLength={12} />
      </Field>
    </form>
  );
}

import type { JSX } from 'react';
import { Field } from '@nizivo/react/field';
import { PasswordInput } from '@nizivo/react/password-input';

export function PasswordInputStatesExample(): JSX.Element {
  return (
    <div style={{ display: 'grid', gap: 16, maxInlineSize: 320 }}>
      <Field label="Password" error="That password is not right. Try again or reset it.">
        <PasswordInput defaultValue="hunter2" />
      </Field>
      <PasswordInput size="sm" aria-label="Small" />
      <PasswordInput size="lg" aria-label="Large" />
      <Field label="Password" disabled>
        <PasswordInput defaultValue="hunter2" />
      </Field>
    </div>
  );
}

PropsCopy Anchor Link

Other exportsCopy Anchor Link

PasswordInputLabels type

import type { PasswordInputLabels } from '@nizivo/react/password-input'

PasswordInput's own strings (§16.4): serialisable, English defaults.

Name	Type	Default	Description
togglerequired	string	'Show password'	The toggle's name, the same in both states: aria-pressed says whether the password shows.

PasswordInputProps type

import type { PasswordInputProps } from '@nizivo/react/password-input'

The props of PasswordInput, listed above.

PasswordInputState type

import type { PasswordInputState } from '@nizivo/react/password-input'

The render state of PasswordInput, listed above.

PasswordInputVisibleReason type

import type { PasswordInputVisibleReason } from '@nizivo/react/password-input'

'toggle': the toggle was pressed. 'submit': the form submitted, which hides the password.

type PasswordInputVisibleReason = "toggle" | "submit"

Data attributes and slotsCopy Anchor Link

Style parts by class (.nz-<slot>) and state by data attribute. Attribute meanings come from contracts/vocabulary.json.

CSS hooksCopy Anchor Link

Set a hook on the component's class or any ancestor to restyle it without specificity games; leave it unset for the default shown.

Layers: nz.components. Classes: .nz-password-input, .nz-password-input-icon, .nz-password-input-toggle.

AccessibilityCopy Anchor Link

These parts are interactive. Each gets the focus outline and touch-action rule from @nizivo/react/css/base.css (the nz.base layer), so the floor survives a restyle:

• password-input: draws the outline when the field inside it has focus.
• password-input-toggle: draws the focus outline itself on keyboard focus.

KeyboardCopy Anchor Link

Source: a native <input> and <button type="button" aria-pressed> (password-input.client.tsx). The browser lane (test/browser/password-input.spec.tsx) checks the toggle by pointer and keyboard, the focus outlines, the revert on submit and inline validation in a Field.

FigmaCopy Anchor Link

Node ids from design/component-map.json, which nz gen writes from component.json. The links open the Nizivo Figma library, which may ask you to sign in.

• Canonical: none
• Ghost masters: none