Radio

Basics

Radio buttons differ from other inputs because they need a wrapper which keeps the state.

That wrapper is provider by Kingpin itself and is the <RadioGroup /> component. It takes as attributes the name (which is the key in the Kingpin submit payload) and the initialValue which is the name of the selected radio.

RadioGroup Props

Name	Mandatory	Purpose
name	true	A string which describe the element. Will be the element key in the submit payload
initialValue	false	A string that represent the name of the selected radio
validation	false	A single (or an array/object of) function(s) to validate the element. Check the doc

Radio Props

Name	Mandatory	Purpose
name	true	A string which describe the element. It will be the value in the submitted payload
Input attributes	false	All the React input attributes.

Example

Typescript

import { Form, FormResult, Radio, RadioGroup } from 'kingpin-react-form'

function App(): JSX.Element {
  const submit = (e: FormEvent<HTMLFormElement>, data: FormResult): void => {
    e.preventDefault()
  }

  return (
    <Form onSubmit={submit}>
      <RadioGroup name="radio-group" initialValue="radio2">
        <Radio name="radio1" />
        <Radio name="radio2" />
      </RadioGroup>
      <button type="submit">Submit</button>
    </Form>
  )
}

Javascript

import { Form, Radio, RadioGroup } from 'kingpin-react-form'

function App() {
  const submit = (e, data) => {
    e.preventDefault()
  }

  return (
    <Form onSubmit={submit}>
      <RadioGroup name="radio-group" initialValue="radio2">
        <Radio name="radio1" />
        <Radio name="radio2" />
      </RadioGroup>
      <button type="submit">Submit</button>
    </Form>
  )
}

note

Setting the type attribute won't have any effect as well as the checked attribute which will be overrided by the initialValue.