bellhop by actabl

When to use

Use password inputs for secure credential entry where the input needs to be obscured by default.

Login Forms

Secure password entry for user authentication.

Registration

Create new passwords with confirmation fields.

Password Reset

Enter new passwords when updating credentials.

When not to use

  • For non-sensitive text input—use regular input-text
  • For password confirmation that should match—use two separate password inputs with validation
  • In contexts where password visibility toggle isn't appropriate for security reasons
  • For one-time codes or PINs—use input-verification component

Features

Password input includes built-in features for better usability and security.

Visibility Toggle

Built-in button to show/hide password text

Leading Icon

Optional lock icon to indicate secure input

Validation States

Support for error states and hint text

Help Icon

Tooltip support for password requirements

Variants

Password inputs can be configured with different options.

With Leading Icon

Default password input with lock icon.

Without Icon

Clean input without leading icon.

With Help Icon

Includes tooltip for password requirements.

Required Field

Marked as required with asterisk indicator.

States

Password inputs support all standard form states.

Best Practices

Follow these guidelines when implementing password inputs.

Do

  • Include a visibility toggle for better usability
  • Show password requirements in hint text or help tooltip
  • Use clear error messages for validation failures
  • Include a "forgot password" link near login fields
  • Allow paste functionality for password managers

Don't

  • Don't disable paste functionality
  • Don't use overly complex password requirements
  • Don't show password by default
  • Don't use placeholder text instead of labels
  • Don't validate password strength in real-time during initial entry

Security Guidelines

Important security considerations for password inputs.

Always Use HTTPS

Passwords should only be transmitted over secure connections.

Backend Validation

Always validate and hash passwords on the server, not just the client.

Password Managers

Ensure compatibility with password managers by allowing paste and using proper HTML attributes.

Rate Limiting

Implement rate limiting and account lockout for failed login attempts.

Accessibility

Password inputs are designed to be accessible to all users.

Keyboard Navigation

  • Tab - Move focus to the input
  • Tab - Move to visibility toggle button
  • Space/Enter - Toggle password visibility

Screen Reader

  • Input type is announced as password field
  • Visibility toggle state is announced
  • Labels are properly associated
  • Error messages are announced

Visual Design

  • Clear focus indicator
  • Sufficient color contrast
  • Visibility toggle is easily identifiable

Resources

Design and development resources for the Input Password component.

Figma

Available
View in Figma →

Web Components/Angular

Available
View in Storybook →

React

Available
View in Storybook →