@axa-fr/react-toolkit-form-input-radio v3.0.1
@axa-fr/react-toolkit-form-input-radio
RadioItem
Installation
npm i @axa-fr/react-toolkit-form-input-radio
npm i @axa-fr/react-toolkit-form-core
Import
import { RadioItem } from '@axa-fr/react-toolkit-form-input-radio';
import '@axa-fr/react-toolkit-form-input-radio/dist/af-radio.css';
import '@axa-fr/react-toolkit-form-core/dist/af-form.css';
Use
const RadioItemInput = () => (
<form className="af-form" name="myform">
<RadioItem
id="uniqueId"
name="radioItemName"
value="your value"
label="Paris"
checked={true}
/>
</form>
);
export default RadioItemInput;
Radio
Installation
npm i @axa-fr/react-toolkit-form-input-radio
npm i @axa-fr/react-toolkit-form-core
Import
import { Radio, RadioModes } from '@axa-fr/react-toolkit-form-input-radio';
import '@axa-fr/react-toolkit-form-input-radio/dist/af-radio.css';
import { HelpMessage } from '@axa-fr/react-toolkit-form-core';
import '@axa-fr/react-toolkit-form-core/dist/af-form.css';
Use
const options = [
{ label: 'For fun', value: '1', id: 'customIdOne' },
{ label: 'For work', value: '2', id: 'customIdTwo' },
{ label: 'For drink', value: '3', id: 'customIdThree' },
{ label: 'For the life', value: '4', id: 'customIdFour', disabled: true },
];
const RadioInput = () => (
<form className="af-form" name="myform">
<Radio
name="radioName"
options={options}
mode={RadioModes.default}
onChange={() => console.log('your function')}
/>
<HelpMessage message="Enter the place name, ex : Webcenter" />
</form>
);
export default RadioInput;
RadioInput Default
Installation
npm i @axa-fr/react-toolkit-form-input-radio
npm i @axa-fr/react-toolkit-form-core
Import
import { RadioInput, RadioModes } from '@axa-fr/react-toolkit-form-input-radio';
import '@axa-fr/react-toolkit-form-input-radio/dist/af-radio.css';
import { MessageTypes } from '@axa-fr/react-toolkit-form-core';
import '@axa-fr/react-toolkit-form-core/dist/af-form.css';
Use
const options = [
{ label: 'For fun', value: '1', id: 'customIdOne' },
{ label: 'For work', value: '2', id: 'customIdTwo' },
{ label: 'For drink', value: '3', id: 'customIdThree' },
{ label: 'For the life', value: '4', id: 'customIdFour', disabled: true },
];
const RadioInputDefault = () => (
<form className="af-form" name="myform">
<RadioInput
id="uniqueId"
label="Place type"
name="radioInputName"
options={options}
mode={RadioModes.default}
messageType={MessageTypes.error}
classNameContainerLabel="col-md-2"
classNameContainerInput="col-md-10"
onChange={(e) => {
console.log(e);
}}
/>
</form>
);
export default RadioInputDefault;
RadioInput Default Required
To achieve RadioInput Default Required, you need to add this :
classModifier = 'required';
to the RadioInput Default component
RadioInput Classic
Installation
npm i @axa-fr/react-toolkit-form-input-radio
npm i @axa-fr/react-toolkit-form-core
Import
import { RadioInput, RadioModes } from '@axa-fr/react-toolkit-form-input-radio';
import '@axa-fr/react-toolkit-form-input-radio/dist/af-radio.css';
import { MessageTypes } from '@axa-fr/react-toolkit-form-core';
import '@axa-fr/react-toolkit-form-core/dist/af-form.css';
Use
const options = [
{ label: 'For fun', value: '1', id: 'customIdOne' },
{ label: 'For work', value: '2', id: 'customIdTwo' },
{ label: 'For drink', value: '3', id: 'customIdThree' },
{ label: 'For the life', value: '4', id: 'customIdFour', disabled: true },
];
const RadioInputClassic = () => (
<form className="af-form" name="myform">
<RadioInput
id="uniqueId"
label="Place type"
name="radioInputName"
options={options}
mode={RadioModes.classic}
messageType={MessageTypes.error}
classNameContainerLabel="col-md-2"
classNameContainerInput="col-md-10"
onChange={(e) => {
console.log(e);
}}
/>
</form>
);
export default RadioInputClassic;
RadioInput Inline
Installation
npm i @axa-fr/react-toolkit-form-input-radio
npm i @axa-fr/react-toolkit-form-core
Import
import { RadioInput, RadioModes } from '@axa-fr/react-toolkit-form-input-radio';
import '@axa-fr/react-toolkit-form-input-radio/dist/af-radio.css';
import '@axa-fr/react-toolkit-form-core/dist/af-form.css';
Use
const options = [
{ label: 'For fun', value: '1', id: 'customIdOne' },
{ label: 'For work', value: '2', id: 'customIdTwo' },
{ label: 'For drink', value: '3', id: 'customIdThree' },
{ label: 'For the life', value: '4', id: 'customIdFour', disabled: true },
];
const RadioInputInline = () => (
<form className="af-form" name="myform">
<RadioInput
id="uniqueId"
label="Place type"
name="radioInputName"
options={options}
mode={RadioModes.inline}
classNameContainerLabel="col-md-2"
classNameContainerInput="col-md-10"
onChange={() => {
console.log('your function');
}}
/>
</form>
);
export default RadioInputInline;
Radio with children
Installation
npm i @axa-fr/react-toolkit-form-input-radio
npm i @axa-fr/react-toolkit-form-core
npm i @axa-fr/react-toolkit-help
npm i @axa-fr/react-toolkit-button
npm i @axa-fr/react-toolkit-popover
Import
import { RadioInput, RadioModes } from '@axa-fr/react-toolkit-form-input-radio';
import '@axa-fr/react-toolkit-form-input-radio/dist/af-radio.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';
import '@axa-fr/react-toolkit-button/dist/af-button.css';
import '@axa-fr/react-toolkit-popover/dist/af-popover.css';
Use
const options = [
{ label: 'For fun', value: '1', id: 'customIdOne' },
{ label: 'For work', value: '2', id: 'customIdTwo' },
{ label: 'For drink', value: '3', id: 'customIdThree' },
{ label: 'For the life', value: '4', id: 'customIdFour', disabled: true },
];
const RadioWithChildren = () => (
<form className="af-form" name="myform">
<RadioInput
id="uniqueId"
label="Place type"
name="radioInputName"
options={options}
mode={RadioModes.default}
messageType={MessageTypes.error}
classNameContainerLabel="col-md-2"
classNameContainerInput="col-md-10"
onChange={(e) => {
console.log(e);
}}>
<HelpButton mode="hover" classModifier="small">
Hello Radio
</HelpButton>
</RadioInput>
</form>
);
export default RadioWithChildren;
9 months ago
9 months ago
10 months ago
10 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years 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
2 years ago
2 years ago
2 years ago
3 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
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
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
7 years ago
7 years ago
7 years ago