3.0.1 • Published 9 months ago

@axa-fr/react-toolkit-form-input-radio v3.0.1

Weekly downloads
115
License
MIT
Repository
github
Last release
9 months ago

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

  1. RadioItem
  2. Radio
  3. RadioInput Default
    1. RadioInput Default Required
  4. RadioInput Classic
  5. RadioInput Inline
  6. Radio with children

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;
3.0.1

9 months ago

3.0.0

9 months ago

3.0.0-alpha.1

10 months ago

3.0.0-alpha.2

10 months ago

3.0.0-alpha.0

11 months ago

2.3.1

1 year ago

2.3.1-alpha.0

1 year ago

2.3.0

1 year ago

2.3.0-alpha.2

1 year ago

2.3.0-alpha.0

1 year ago

2.2.0

1 year ago

2.2.0-alpha.0

2 years ago

2.2.0-alpha.1

1 year ago

2.1.1

2 years ago

2.1.1-alpha.0

2 years ago

2.1.0

2 years ago

2.1.0-alpha.6

2 years ago

2.1.0-alpha.5

2 years ago

2.1.0-alpha.4

2 years ago

2.1.0-alpha.3

2 years ago

2.0.1-alpha.1

2 years ago

2.1.0-alpha.2

2 years ago

2.1.0-alpha.1

2 years ago

2.0.0

3 years ago

2.0.1-alpha.0

3 years ago

2.0.0-alpha.11

3 years ago

2.0.0-alpha.8

3 years ago

2.0.0-alpha.9

3 years ago

2.0.0-alpha.10

3 years ago

2.0.0-alpha.3

4 years ago

2.0.0-alpha.4

4 years ago

2.0.0-alpha.5

4 years ago

1.4.1

4 years ago

1.4.0

4 years ago

2.0.0-alpha.0

4 years ago

2.0.0-alpha.1

4 years ago

1.4.0-alpha.1

4 years ago

1.4.0-alpha.0

5 years ago

1.3.23

5 years ago

1.3.21

5 years ago

1.3.16

5 years ago

1.3.14

5 years ago

1.3.13

5 years ago

1.3.12

5 years ago

1.3.11

5 years ago

1.3.10

5 years ago

1.3.9

5 years ago

1.3.9-alpha.0

5 years ago

1.3.8-alpha.0

5 years ago

1.3.7-alpha.0

5 years ago

1.3.6

5 years ago

1.3.6-alpha.0

5 years ago

1.3.5-alpha.0

5 years ago

1.3.4

5 years ago

1.3.3

5 years ago

1.3.2

6 years ago

1.3.2-alpha.0

6 years ago

1.2.16

6 years ago

1.2.15

6 years ago

1.2.14

6 years ago

1.2.13

6 years ago

1.2.12

6 years ago

1.2.11

6 years ago

1.2.10

6 years ago

1.2.8

6 years ago

1.2.7

6 years ago

1.2.6

6 years ago

1.2.6-alpha.0

6 years ago

1.2.5

6 years ago

1.2.5-alpha.0

6 years ago

1.2.4

6 years ago

1.2.3

6 years ago

1.2.2

6 years ago

1.2.1

6 years ago

1.2.0

6 years ago

1.1.2

6 years ago

1.1.1

6 years ago

1.1.0

6 years ago

1.0.5

6 years ago

1.0.4

6 years ago

1.0.3

6 years ago

1.0.2

6 years ago

1.0.1

7 years ago

1.0.0

7 years ago

0.0.2-alpha.0

7 years ago