CodeCraft Kit

@codecraftkit

Documentation

FormField

Description#

The FormField is used to create fields faster, it have to be used with formik and can take many types like select, radio, text, etc...

You can see all FormField Types here

This component is based on Formik Field

Import#

it can be imported from the core.

Code Example

import { FormField } from "@codecraftkit/core";

or alone.

Code Example

import FormField from "@codecraftkit/formfield";

Requirements#

To use this FormField, you will need to import Formik like this.

Code Example

import { Form, Formik } from 'formik'

FormField has to be a children of Formik in order to use its context, here an example:

Code Example

<Formik
  initialValues={{subject:""}}
  onSubmit={(values) => onSubmit(values, 'subject')}
>
  {() => (
    <Form>
      <Grid gap={4}>
        <FormField
          type='text'
          name='subject'
          label='Subject'
          required
        />
        <Button
          type='submit'
          size='xs'
          colorScheme='green'
          justifySelf='flex-end'
         >
          Submit
        </Button>
      </Grid>
    </Form>
  )}
</Formik>

If FormField is not inside Formik it won't work

Usage#

Example using FormField type text

Remember that the prop name has to match with its respective initial value, in this case subject

Code Example

<Formik
  initialValues={{subject:""}}
  onSubmit={(values) => onSubmit(values, 'subject')}
>
  {() => (
    <Form>
      <Grid gap={4}>
        <FormField
          type='text'
          name='subject'
          label='Subject'
          required
        />
        <Button
          type='submit'
          size='xs'
          colorScheme='green'
          justifySelf='flex-end'
         >
          Submit
        </Button>
      </Grid>
    </Form>
  )}
</Formik>

The prop name is required in every FormField type in order to work correctly

Props#

This props can be used with every FormField type

name

type

required

default

description

type

textpasswordpindatenumbertextareaphoneeditorselectradiocheckboxfileimagedatepickertypeAHeadsliderswitch

yes

text

The type of the input

name

String

yes

Name that the field will take and it will be use it by formik

label

String

Title of the input

noLabel

Boolean

Remove the label

required

Boolean

Place a red Asterisk

Boolean

Show a loading animation

variant

outlinefilledflushedunstyled

outline

Change the input variant

size

smmdlg

md

Change the input size

isDisabled

Boolean

To disable the input

placeholder

String

placeholder of the input

onInputChange

(value)=> void

Input onChange event handler