React
Is new design vision part implemented using new tokens?
Up to date
Resources
Example
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'
/>
)
}