VisorPasswordInput

Password input with show/hide visibility toggle, floating label, and validation states. Composed on top of VisorTextInput.

VisorPasswordInput is a thin wrapper around VisorTextInput that handles the password ergonomics: an obscured field with a show/hide eye toggle in the suffix slot, autocorrect and suggestions disabled, and the same five-state validation surface (default / focused / error / valid / disabled).

Preview

When to Use

Any password, PIN, or secret-value field in an auth or settings flow
Fields where the user benefits from being able to reveal what they typed
Confirm-password fields requiring cross-field validation

When Not to Use

Plain text fields without a secrecy requirement (use VisorTextInput)
OTP / one-time code entry (use VisorOtpInput)

Installation

npx visor add password-input --target flutter

Or copy components/flutter/visor_password_input/visor_password_input.dart into your project. Note: password-input depends on text-input.

Basic Usage

import 'package:ui/ui.dart';

VisorPasswordInput(
  labelText: 'Password',
  controller: _password,
  onFieldSubmitted: (_) => _signIn(),
)

With Validation

VisorPasswordInput(
  labelText: 'Password',
  controller: _password,
  validator: (value) {
    if (value == null || value.length < 8) {
      return 'Password must be at least 8 characters';
    }
    return null;
  },
  autovalidateMode: AutovalidateMode.onUserInteraction,
)

Confirm Password (Cross-Field)

VisorPasswordInput(
  labelText: 'Confirm password',
  controller: _confirm,
  isValid: _confirm.text == _password.text && _confirm.text.isNotEmpty,
  errorText: _confirm.text == _password.text ? null : 'Passwords don\'t match',
)

API Reference

Property	Type	Default	Description
`labelText`	`String`	required	Floating label text
`controller`	`TextEditingController?`	`null`	Optional external text controller
`focusNode`	`FocusNode?`	`null`	Optional external focus node
`errorText`	`String?`	`null`	Override the error message
`onChanged`	`ValueChanged<String>?`	`null`	Fires on every keystroke
`onFieldSubmitted`	`ValueChanged<String>?`	`null`	Fires on keyboard submit
`validator`	`String? Function(String?)?`	`null`	Synchronous validator
`textInputAction`	`TextInputAction?`	`null`	Keyboard action button type
`autofocus`	`bool`	`false`	Request focus on first build
`enabled`	`bool`	`true`	When `false`, reduces opacity and ignores input
`autovalidateMode`	`AutovalidateMode?`	`null`	When the validator runs
`isValid`	`bool?`	`null`	Explicit valid/invalid override (for async or cross-field)
`semanticLabel`	`String?`	`null`	Override the announced label (defaults to `labelText`)

Accessibility

Visibility toggle is labeled 'Show password' / 'Hide password'.
autocorrect: false and enableSuggestions: false are set automatically.
All VisorTextInput accessibility properties carry through — Semantics(textField: true, label: …, enabled: …), RTL-aware paddings, reduce-motion-aware floating-label animation.

Source

components/flutter/visor_password_input/visor_password_input.dart
components/flutter/visor_text_input/visor_text_input.dart
Quality contract audit row: docs/flutter-widget-quality-contract.md (Rec8)

VisorPasswordInput

On this page