ComponentsUpdated
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.
Version 13.4.0 introduces the size prop, which accepts "sm" or "md" and defaults to "md".
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) => void | Callback invoked when the visibility state changes. | |
defaultVisible | boolean | Default visibility state of the password input | |
visible | boolean | Controlled visibility state |
<Input />
import { Input } from "@vygruppen/spor-react";
Props
Name | Type | Required? | Description |
|---|---|---|---|
label | string | A descriptive label | |
variant | "core" | "floating" | Defaults to core. | |
size | "sm" | "md" | defaults to "md" | |
startElement | React.ReactNode | Use the 24px icons | |
endElement | React.ReactNode | Use the 24px icons | |
disabled | boolean | ||
invalid | boolean | ||
errorText | React.ReactNode | Display error text for the component | |
readonly | boolean | ||
required | boolean | ||
helperText | React.ReactNode | Display helper text for the input |