Skip to content
Vy logo
  • Spor
  • Resources
Components

PasswordInput

The PasswordInput component is designed to securely collect password information from users. It features built-in security measures and user-friendly enhancements to ensure both safety and ease of use. This component is an essential part of any form where sensitive data is required.

FigmaGitHub

Code examples

<PasswordInput label="Password" />

Guidelines

Key Features

  • Secure Entry: Masks user input to protect sensitive information from onlookers.
  • Visibility Toggle: Allows users to toggle password visibility for convenience during entry.
  • Validation Feedback: Provides real-time feedback on password strength and validation requirements.
  • Accessibility: Fully accessible to users with disabilities, ensuring compliance with accessibility standards.

Usage

The PasswordInput component should be used in any scenario where a user is required to input a password. It is ideal for login forms, account creation, password updates, and other security-sensitive fields.

By incorporating the PasswordInput component into your application, you can ensure a secure and user-friendly experience for your users.

Code

<PasswordInput />

import { PasswordInput } from "@vygruppen/spor-react";

A password input, with a "show/hide" feature

Props

Name
Type
Required?
Description
onVisibleChange(visible: boolean) => voidCallback invoked when the visibility state changes.
defaultVisiblebooleanDefault visibility state of the password input
visiblebooleanControlled visibility state

<Input />

import { Input } from "@vygruppen/spor-react";

Props

Name
Type
Required?
Description
labelstringA descriptive label
variant"core" | "floating"Defaults to core.
startElementReact.ReactNodeUse the 24px icons
endElementReact.ReactNodeUse the 24px icons
disabledboolean
invalidboolean
errorTextReact.ReactNodeDisplay error text for the component
readonlyboolean
requiredboolean
helperTextReact.ReactNodeDisplay helper text for the input