@axa-fr/react-toolkit-form-input-text

1. Text
2. Text Error
3. Text Success
1. Text Disabled
4. TextInput
1. TextInput Required
5. TextInput Error
6. TextInput Rich Label

Text

$3

``shell script
npm i @axa-fr/react-toolkit-form-input-text
npm i @axa-fr/react-toolkit-form-core
`

$3

`javascript
import { Text } from '@axa-fr/react-toolkit-form-input-text';
import '@axa-fr/react-toolkit-form-input-text/dist/af-inputtext.css';
import '@axa-fr/react-toolkit-form-core/dist/af-form.css';
`

$3

`javascript
const textReturn = () => (





);
export default textReturn;


`

Text Error

$3

`shell script
npm i @axa-fr/react-toolkit-form-input-text
npm i @axa-fr/react-toolkit-form-core
`

$3

`javascript
import { TextInput } from '@axa-fr/react-toolkit-form-input-text';
import '@axa-fr/react-toolkit-form-input-text/dist/af-inputtext.css';
import { MessageTypes } from '@axa-fr/react-toolkit-form-core';
import '@axa-fr/react-toolkit-form-core/dist/af-form.css';
`

$3

`javascript
const textError = () => (



id="uniqueid"
name="placeName"
placeholder="Paris"
label="your label"
value="Robert"
messageType={MessageTypes.error}
message="Le champ est obligatoires"
forceDisplayMessage={true}
/>

);
export default textError;


`

Text Success

$3

`shell script
npm i @axa-fr/react-toolkit-form-input-text
npm i @axa-fr/react-toolkit-form-core
`

$3

`javascript
import { TextInput } from '@axa-fr/react-toolkit-form-input-text';
import '@axa-fr/react-toolkit-form-input-text/dist/af-inputtext.css';
import { MessageTypes, HelpMessage } from '@axa-fr/react-toolkit-form-core';
import '@axa-fr/react-toolkit-form-core/dist/af-form.css';
`

$3

`javascript
const textSuccess = () => (



id="uniqueid"
name="placeName"
label="your label"
value="Robert"
placeholder="Paris"
messageType={MessageTypes.success}
message="Success Message Type"
forceDisplayMessage={true}
helpMessage="Enter the place name, ex : Webcenteraa"
/>


);
export default textSuccess;


`

$3

To achieve Text Disabled, you need to add this :

`javascript
disabled = { true };
`

in the component of your choice.

TextInput

$3

`shell script
npm i @axa-fr/react-toolkit-form-input-text
npm i @axa-fr/react-toolkit-form-core
npm i @axa-fr/react-toolkit-help
`

$3

`javascript
import { TextInput } from '@axa-fr/react-toolkit-form-input-text';
import '@axa-fr/react-toolkit-form-input-text/dist/af-inputtext.css';
import '@axa-fr/react-toolkit-form-core/dist/af-form.css';
import HelpButton from '@axa-fr/react-toolkit-help';
`

$3

`javascript
const textInputReturn = () => (



id="uniqueid"
name="placeName"
placeholder=""
value=""
onChange={(e) => {
console.log(e);
}}
label="Place name"
helpMessage="Enter the place name, ex : Webcenter">
tooltip avec du text


);
export default textInputReturn;


`

$3

To achieve TextInput Required, you need to add this :

`javascript
classModifier = 'required';
`

in TextInput.

TextInput Error

$3

`shell script
npm i @axa-fr/react-toolkit-form-input-text
npm i @axa-fr/react-toolkit-form-core
npm i @axa-fr/react-toolkit-help
`

$3

`javascript
import { TextInput } from '@axa-fr/react-toolkit-form-input-text';
import '@axa-fr/react-toolkit-form-input-text/dist/af-inputtext.css';
import { MessageTypes } from '@axa-fr/react-toolkit-form-core';
import '@axa-fr/react-toolkit-form-core/dist/af-form.css';
import HelpButton from '@axa-fr/react-toolkit-help';
`

$3

`javascript
const textInputError = () => (



id="uniqueid"
name="placeName"
label="Place name"
placeholder="Paris"
classModifier="required"
value="Robert"
messageType={MessageTypes.error}
message="The field is required"
forceDisplayMessage={true}>
tooltip avec du text


);
export default textInputError;


`

TextInput Rich Label

$3

`shell script
npm i @axa-fr/react-toolkit-form-input-text
npm i @axa-fr/react-toolkit-form-core
npm i @axa-fr/react-toolkit-help
`

$3

`javascript
import { TextInput } from '@axa-fr/react-toolkit-form-input-text';
import '@axa-fr/react-toolkit-form-input-text/dist/af-inputtext.css';
import { MessageTypes } from '@axa-fr/react-toolkit-form-core';
import '@axa-fr/react-toolkit-form-core/dist/af-form.css';
import HelpButton from '@axa-fr/react-toolkit-help';
`

$3

`javascript
const richLabel = (

Place name optional

);

const textInputRichLabel = () => (



id="uniqueid"
name="placeName"
placeholder="Paris"
label={richLabel}
value="Robert"
messageType={MessageTypes.error}
message="Le champ est obligatoires"
forceDisplayMessage={true}>
tooltip avec du text


);
export default textInputRichLabel;


``