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

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

1. Switch
2. SwitchInput
   1. SwitchInput Required

Switch

Installation

npm i @axa-fr/react-toolkit-form-input-switch

Import

import { Switch } from '@axa-fr/react-toolkit-form-input-switch';
import '@axa-fr/react-toolkit-form-input-switch/dist/af-switch.css';

Use

const options = [
  {
    id: 'check0',
    label: 'Choice 1',
    value: 'value1',
  },
  {
    id: 'check1',
    label: 'Choice 2',
    value: '2',
  },
  {
    id: 'check2',
    label: 'Choice 3',
    value: 'value3',
  },
  {
    id: 'check3',
    label: 'Choice 4',
    value: '4',
  },
];

const SwitchInput = () => (
  <Switch
    name="Form.SwitchInput"
    value={options[3].value}
    options={options}
    onChange={(e) => console.log(e)}
    disabled={false}
  />
);
export default SwitchInput;

SwitchInput

Installation

npm i @axa-fr/react-toolkit-form-input-switch

Import

import { SwitchInput } from '@axa-fr/react-toolkit-form-input-switch';
import '@axa-fr/react-toolkit-form-input-switch/dist/af-switch.css';

Use

const options = [
  {
    id: 'check0',
    label: 'Choice 1',
    value: 'value1',
  },
  {
    id: 'check1',
    label: 'Choice 2',
    value: '2',
  },
  {
    id: 'check2',
    label: 'Choice 3',
    value: 'value3',
  },
  {
    id: 'check3',
    label: 'Choice 4',
    value: '4',
  },
];

const SwitchInputReturn = () => (
  <SwitchInput
    id="idSwitchInput"
    name="nameSwitchInput"
    label="Select a choice"
    value={options[3].value}
    options={options}
    disabled={false}
    onChange={(e) => console.log(e)}
  />
);
export default SwitchInputReturn;

SwitchInput Required

To achieve SwitchInput Required, you need to add this :

classModifier = 'required';

to the SwitchInput component