RadioGroup

This component has to be a child within the <Form /> component. This component must have <input /> components with the type="radio" as children. These children components must have a name prop which has to match the parents id. The id of the children will be the value of the <RadioGroup /> component when clicked.

Basic Usage

import {
  Form,
  RadioGroup,
} from 'react-form-package';

Render a <Form /> with a <RadioGroup /> and a <Button /> component.

<Form>
  <div>
    <div>Choose an option</div>
    <RadioGroup type="radio" id="option">
      <div>
        <div>option 1</div>
        <input type="radio" name="option" id="option1" />
      </div>
      <div>
        <div>option 2</div>
        <input type="radio" name="option" id="option2" />
      </div>
      <div>
        <div>option 3</div>
        <input type="radio" name="option" id="option3" />
      </div>
    </RadioGroup>
    <div>
      <Button
        id="submit"
        type="submit"
        onClick={state => {
          alert(JSON.stringify(state, null, 2))
          alert('open the console to see the whole state...')
          console.log(state)
        }}
      >
        Submit
      </Button>
    </div>
  </div>
</Form><Form>
  <div>
    <div>Choose an option</div>
    <RadioGroup type="radio" id="option">
      <div>
        <div>option 1</div>
        <input type="radio" name="option" id="option1" />
      </div>
      <div>
        <div>option 2</div>
        <input type="radio" name="option" id="option2" />
      </div>
      <div>
        <div>option 3</div>
        <input type="radio" name="option" id="option3" />
      </div>
    </RadioGroup>
    <div>
      <Button
        id="submit"
        type="submit"
        onClick={state => {
          alert(JSON.stringify(state, null, 2))
          alert('open the console to see the whole state...')
          console.log(state)
        }}
      >
        Submit
      </Button>
    </div>
  </div>
</Form>

Props

Property	Type	Required	Default	Description
id	String	true
type	String	true		`radio`
required	Bool	false	false
preOnChange	Func	false		manipulate the state before its validated (see State Manipulation)
errorMessage	String	false		define your own custom error message for the input
onFocus	Func	false		get access to the state of the form when the user focus on the input
onChange	Func	false		get access to the state of the form when the user changes the input
onBlur	Func	false		get access to the state of the form when the user blurs the input
bintTo	String, Array	false		only needed for binding input fields. The id/ids of the input/inputs you want to manipulate
bintToAllways	Bool	false		only needed for binding input fields. Only needed if you want that the bindToCallback is triggered even the bound input field was already touched (blurred)
bindToCallback	Func	false		only needed for binding input fields. The callback to set the target's (`bindTo`) input value, which gets called `onChange` (return a single value or an array of values)

RadioGroup

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Basic Usage

Props

Basic Usage