Password Input

 

React

Is new design vision part implemented using new tokens?

Up to date

Resources

Example

Storybook failed to load. Please connect to the VPN to access.

                                                        
                                                        
                                                            import { ChangeEvent, useState, MouseEvent } from 'react';
                                                        import { InputValue, PasswordInput, PasswordStrength } from '@optimus-web/core';
                                                        
                                                        const PasswordInputComponent = () => {
                                                            const [inputValue, setInputValue] = useState<InputValue>('');
                                                            const [passwordStrength, setPasswordStrength] = useState(PasswordStrength.None);
                                                        
                                                            const handleChange = (_event: ChangeEvent<HTMLInputElement> | MouseEvent, value: InputValue) => {
                                                                setInputValue(value);
                                                        
                                                                const strength = Math.ceil((value as string).length / 4);
                                                                setPasswordStrength(strength > (passwordStrength || 3) ? PasswordStrength.Good : strength);
                                                            };
                                                        
                                                                return (
                                                                    <PasswordInput
                                                                        value={inputValue}
                                                                        name="password"
                                                                        passwordStrength={passwordStrength}
                                                                        onChange={handleChange}
                                                                        onClear={() => {}}
                                                                        label='New password'
                                                                        helper='Helper text'
                                                                        required={true}
                                                                        hasPasswordVisibilityToggle={true}
                                                                        passwordStrength={3}
                                                                        placeholder='Safety first'
                                                                    />
                                                                )
                                                        }
                                                        
                                                            

API

Name

Description

Type

Default

alignRight?

Aligns text inside the input to the left or right

boolean

false

disabled?

Allows the input to be disabled

boolean

false

error?

Enables to add an error to the bottom of the Input (or inside if you have inlined set to true)

React.ReactNode

undefined

hasPasswordVisibilityToggle?

Enables the toggle for rendering the actual text in the screen instead of the dots

boolean

false

helper?

Helper text that shows on the bottom left of the Input

string

undefined

indicativeIcon?

Use IconName from @optimus-web/icons to add an icon inside the button

IconName

undefined

inline?

Removes the label, caption, error, and helper when set to true

boolean

false

label?

Text that descibes what your Input needs and used as the label attribute

string

undefined

loading?

Shows a spinner inside the text input

boolean

false

maxCharacterCount?

Shows the maximum amount of characters you want an Input to contain (if inline or readOnly are true, maxCharacterCount will be hidden)

number

undefined

name

Name associated with label and used as the name and id of the input

string

-

passwordStrength

The required complexity for the password.

0 | 1 | 2 | 3

3

placeholder?

Placeholder text

React.ReactNode

undefined

prefix?

Shown before the placeholder text inside the input

React.ReactNode

undefined

readOnly?

Gives the input a readOnly attribute and state

boolean

false

required?

Gives the input an * an makes it required for the user

boolean

false

size?

"small", "medium", "large", "extraLarge"

Size

medium

suffix?

Shown after the placeholder text inside the input

React.ReactNode

undefined

value?

Text value that is set or to be retrieved from the inputs value

string

‘‘

forwardedRef?

Allows a parent component to pass a ref down to the SearchInput component

ForwardedRef<HTMLInputElement>

undefined