Using fields

Preamble

Fields are the heart of react-formilicious, so they are rather important to get right.

Fields differ from CSS framework to CSS frameworks, so make sure to pick the right one for your framework, you can also create your own fields.

Basic Usage

Fields are always included in the elements array prop of the <Form />.

import TextArea from '@react-formilicious/bulma/TextArea';

<Form
  data={{
    feedback: "Just getting started with it, (hopefully!) excited to learn more."
  }}
  onSubmit={this.onSubmit}
  elements={[
    {
      type: TextArea,
      key: "feedback",
      name: "❓ Feedback",
      placeholder: "Please send us some feedback about react-formilicious!"
    }
  ]} />

You can use as many or as little elements(even none at all! 😎) as you want.

Use a field

How a fields looks like, how it works, etc. is defined by the type property of each field(In this example TextArea). This field type was previously important from the module @react-formilicious/bulma/TextArea.

This allows you to only import the fields you need not even include unused ones in your bundle at all.

Furthermore it allows library authors to easily write their own fields for Formilicious, which you can then simply plug into your form and use right away.

All fields have - besides the type property - some more properties that are supported(and some of them even required) by all fields:

{ 
  type: FormField, 
  key: string, 
  name: React.ReactNode?, 
  ignoreData: boolean?, 
  validator: FieldValidator? 
}

Name	Description	Type	Required
type	The type of the field, determining its look and behaviour.	FormField	✔️
key	The property in your data this field represents.	string	✔️
name	The display name of this field. No display name is shown if omitted.	React.ReactNode	❌
ignoreData	Should the value passed into data prop of the form for this field be ignored? If true the field will thus always initially have its default value.	boolean	❌
validator	The validator runs after the field value changed and checks if it is valid. You can learn more about validators in the chapter about them.	FieldValidator	❌

Depending on the field type you use some fields may add quite a few more(potentially required!) props on their own, so always make sure to check the documentation of the field you are trying to use. For example, here is a link to the documentation of the TextArea we were using in this example.