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