@axa-fr/react-toolkit-form-input-pass v2.3.1
@axa-fr/react-toolkit-form-input-pass
Pass
Installation
npm i @axa-fr/react-toolkit-form-input-pass
npm i @axa-fr/react-toolkit-form-core
classModifier / type |
---|
bad |
okay |
good |
verygood |
excellent |
Import
import { Pass } from '@axa-fr/react-toolkit-form-input-pass';
import '@axa-fr/react-toolkit-form-input-pass/dist/af-pass.css';
import { HelpMessage } from '@axa-fr/react-toolkit-form-core';
import '@axa-fr/react-toolkit-form-core/dist/af-form.css';
Use
const PassInput = () => (
<form className="af-form" name="myform">
<Pass
id="uniqueid"
classModifier="good"
onChange={(e) => {
console.log(e);
}}
onToggleType={() => {
console.log('your function');
}}
name="password"
type="password"
value="your value"
/>
<HelpMessage message="Enter password" />
</form>
);
export default PassInput;
PassInput
Installation
npm i @axa-fr/react-toolkit-form-input-pass
npm i @axa-fr/react-toolkit-form-core
npm i @axa-fr/react-toolkit-button
npm i @axa-fr/react-toolkit-popover
npm i @axa-fr/react-toolkit-help
Import
import { PassInput } from '@axa-fr/react-toolkit-form-input-pass';
import '@axa-fr/react-toolkit-form-input-pass/dist/af-pass.css';
import { PopoverModes, PopoverPlacements } from '@axa-fr/react-toolkit-popover';
import '@axa-fr/react-toolkit-popover/dist/af-popover.css';
import Help from '@axa-fr/react-toolkit-help';
import '@axa-fr/react-toolkit-help/dist/af-help-custom.css';
import '@axa-fr/react-toolkit-form-core/dist/af-form.css';
import '@axa-fr/react-toolkit-button/dist/af-button.css';
Use
const PassInputReturn = () => (
<form className="af-form" name="myform">
<PassInput
id="uniqueid"
name="password"
value=""
label="Password"
onChange={(e) => {
console.log(e);
}}
onToggleType={() => console.log('onToggle')}
helpMessage="8 characters minimum">
<Help mode={PopoverModes.click} placement={PopoverPlacements.right}>
Choose a password
</Help>
</PassInput>
</form>
);
export default PassInputReturn;
PassInput Required
To achieve PassInput Required, you need to add this :
classModifier = 'required';
to the PassInput component
1 month ago
1 month ago
2 months ago
2 months ago
3 months ago
4 months ago
5 months ago
4 months ago
5 months ago
5 months ago
6 months ago
6 months ago
6 months ago
6 months ago
7 months ago
8 months ago
7 months ago
7 months ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago