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