Form

Props

Usage

<Formik
  initialValues={{
    travelling: '',
    length: '',
    checkbox: false,
    radio: ''
  }}
  onSubmit={(values, actions) => {
    setTimeout(() => {
      console.log(JSON.stringify(values, null, 2))
      actions.setSubmitting(false)
    }, 1000)
  }}
>
  {(props) => (
    <Form>
      <Stack>
        <Input name='travelling' type='text' label='How are you travelling?' />
        <Input name='length' type='text' label='How long is your car?' />
        <Checkbox
          id='checkbox'
          name='checkbox'
          label='I have a Ticket Pass'
          type='checkbox'
          value={false}
        />
        <Flex alignItems='center'>
          {values.map((value, i) => {
            return (
              <Radio
                key={i}
                id={value}
                name='radio'
                label={value}
                value={value}
              />
            )
          })}
        </Flex>

        <Button>Submit</Button>
      </Stack>
    </Form>
  )}
</Formik>
<Formik
  initialValues={{
    travelling: '',
    length: '',
    checkbox: false,
    radio: ''
  }}
  onSubmit={(values, actions) => {
    setTimeout(() => {
      console.log(JSON.stringify(values, null, 2))
      actions.setSubmitting(false)
    }, 1000)
  }}
>
  {(props) => (
    <Form>
      <Stack>
        <Input name='travelling' type='text' label='How are you travelling?' />
        <Input name='length' type='text' label='How long is your car?' />
        <Checkbox
          id='checkbox'
          name='checkbox'
          label='I have a Ticket Pass'
          type='checkbox'
          value={false}
        />
        <Flex alignItems='center'>
          {values.map((value, i) => {
            return (
              <Radio
                key={i}
                id={value}
                name='radio'
                label={value}
                value={value}
              />
            )
          })}
        </Flex>

        <Button>Submit</Button>
      </Stack>
    </Form>
  )}
</Formik>